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

A blog prob­a­bly of inter­est only to nerds by John Morton.

15Aug2017

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

Instagram-User-Agent-String
An alert dialog showing the userAgent string within the Instagram in-app browser.

I had to debug an issue with a site I built when a 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. Since I built her site, this is my prob­lem to solve.

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 userAgent 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. By that I mean I popped up an alert dia­log box. I could­n’t rely on the con­sole because the in-app brows­er did­n’t offer that capability.

It also adds a class of instagram-browser 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 did­n’t show up because I had SVG back­ground images for those graph­ics. Replac­ing the SVGs 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.