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

15Aug2017

Detecting and debugging the Instagram in-app browser

I had to debug an issue with a site I built when client/friend discovered that the menu toggle icon disappeared only when visiting her site from within Instagram, specifically, on her bio page where she has a link to her site.

Being an in-app browser within an application I have no control of, I struggled to debug this problem. The "userAgent" string, as shown in the image above helped me out. I used the following Javascript code to the site during 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 debugging, as in showing alerts.

It also adds a class of "instagram-browser" to the body tag that allowed me to outline divs and other elements in my CSS only in the Instagram in-app browser.

Eventually, I figured out that the menu icons didn’t show up because I had SVG background images for those graphics. Replacing them with tiny PNGs did the trick. Now the menu works and I ended up removing the JS code above entirely. Without it though, I don’t know how else I would have debugged that browser.