I had an issue this week with a mobile menu not working on iPhones or iPads (iOS) regardless of what browser that you used on them. When you touched the menu, it didn’t open, it just sat there, staring back at you, not opening. It was shouting “JAVASCRIPT ERROR” at me, but when I viewed the site in Chrome on my iMac, I didn’t get any errors in the console, and also the menu worked fine when you shrank the screen size. So, it seemed that the issue was only occurring when you used the website natively in iOS. My issue was now that I couldn’t get any kind of error reporting when using these devices, even when I used a service like BrowserStack.
I discovered that I had Xcode installed on my Mac, which also meant that I had the iOS simulator, but I still needed to find some sort of error reporting so I could fix it.
Enter Safari.
After a lot of Googling (basically what my job consists of), I found that when you have the iOS Simulator running on your Mac, if you open Safari up, and go to >> Develop >> iOS Simulator >> and then choose your simulator from the list – it pops open a console and you can see any errors or warnings! Perfect. I found the rogue Javascript error, fixed it in the code, and then enjoyed a working mobile menu on the website in iOS.