Detecting and debugging 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 debug­ging.

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 couldn’t rely on the con­sole because the in-app brows­er didn’t offer that capa­bil­i­ty.

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 brows­er.

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 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 brows­er.