Come back anytime to see any and all console outputs!.Now go do your thing in another tab, keeping this tab open.In Chrome on your iPad or iPhone, go to chrome://inspect and then press Start Logging.This is great quick way to check out your console messages without using your Mac. I can even share the ngrok address with my colleagues and they can access it on my local machine too! Another option would be to set up DNS for your iPhone to navigate to your laptop while on the same wifi network, and that’s not worth the effort in my book. It’s pretty slick and has saved me a lot of time. This allows me to troubleshoot realtime on my mobile browser while writing the code on my laptop. Ngrok spins up a gateway from a public address to your local dev machine. Sometimes, if I’m really diving into a granular issue and don’t want to wait, I like to use ngrok. I can then hit the site directly on my iPhone and debug as needed. With CI/CD in place, I can make code changes and get them into my dev environment in under 5 minutes, and that suffices at times. In the following debugging methods, we can debug anything our browser can get to:, , or our public website. MacBook Pro 13-inch 2018 running macOS Monterey 12.2.1īefore we get started in debugging, we should cover what we’re debugging.I’ve searched for many options, some worked, some didn’t, so below is what worked for me. I won’t get into what the issue is here, instead, I’ll get into how we can debug the browsers on our iOS devices. In my recent efforts in troubleshooting one small “nuance” between Chrome on Mac and Chrome and Safari on iOS (yes, all three were acting differently), I needed to debug my browser on my iPad and/or iPhone. Even with the great modern web, we still have issues once in a while. Thankfully, the big contenders like Netscape (those were the days) and Internet Explorer have finally been deprecated and are no longer expected to be supported in the wild. The reality is, web development, as great and modern as it is, can have little caveats and nuances across the different browsers: Chrome, Safari, FireFox, Edge, and the Mac/Windows/Linux/iOS/Android versions of each. In the world of modern web development, Web 2.0 (or is it 3.0?), with HTML5, CSS3, ES6, and frameworks and libraries up the wazoo, our web apps and sites always work seamlessly and flawlessly across all the browsers and devices… hahaha, I know…

Iphone safari online emulator