---
title: Detecting and debugging the Instagram in-app browser
date: 2017-08-15T12:00:00-04:00
author: John Morton
canonical_url: "https://supergeekery.com/blog/detecting-the-instagram-in-app-browser"
section: Blog
---
# Detecting and debugging the Instagram in-app browser

*August 15, 2017* by John Morton

![Instagram-User-Agent-String](https://static.supergeekery.com/site-assets/instagram-user-agent-string.png)
*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 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. Since I built her site, this is my problem to solve.

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.

```js
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. By that I mean I popped up an alert dialog box. I couldn't rely on the console because the in-app browser didn't offer that capability.

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 the SVGs 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.

## More info

Since writing this post, I've discovered these in-app browsers are a problem for many developers. Check out [The Pitfalls of In-app Browsers](https://frontendmasters.com/blog/the-pitfalls-of-in-app-browsers/) for more info how to debug them on both iOS and Android.

---

**Tags:** javascript