A blog probably of interest only to nerds by John Morton.

15Aug2017

Detect­ing and debug­ging the Insta­gram in-app browser

I had to debug an issue with a site I built when client/​friend dis­cov­ered that the menu tog­gle icon dis­ap­peared only when vis­it­ing her site from with­in Insta­gram, specif­i­cal­ly, on her bio page where she has a link to her site.

Being an in-app brows­er with­in an appli­ca­tion I have no con­trol of, I strug­gled to debug this prob­lem. The user­A­gent” string, as shown in the image above helped me out. I used the fol­low­ing Javascript code to the site dur­ing my debugging.

var ua = navigator.userAgent || navigator.vendor || window.opera;
var isInstagram = (ua.indexOf('Instagram') > -1) ? true : false;

if (document.documentElement.classList ){
	if (isInstagram) {
		window.document.body.classList.add('instagram-browser');
    // alert("debugging within the Instagram in-app browser");
	}
}

This JS allowed me to do some old-school debug­ging, as in show­ing alerts.

It also adds a class of insta­gram-brows­er” to the body tag that allowed me to out­line divs and oth­er ele­ments in my CSS only in the Insta­gram in-app browser.

Even­tu­al­ly, I fig­ured out that the menu icons didn’t show up because I had SVG back­ground images for those graph­ics. Replac­ing them with tiny PNGs did the trick. Now the menu works and I end­ed up remov­ing the JS code above entire­ly. With­out it though, I don’t know how else I would have debugged that browser.