Debug iOS 6+7 Mobile Safari using the Chrome DevTools

20 Jan Debug iOS 6+7 Mobile Safari using the Chrome DevTools

With this method you can use the dev tools on your Mac to connect to your iOS Safari browser. 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. I’ve searched for many options, some worked, some didn’t, so below is what worked for me.

From here, select More Tools → Developer Tools from the Chrome menu to open Chrome DevTools. Alternatively, you can use the shortcut ⌥ Option + Cmd ⌘ + I (macOS) / Ctrl https://wizardsdev.com/en/vacancy/senior-ios-developer/ + Shift + I (Windows and Linux). When syntax error occurs the full screen LogBox error will automatically open with the stack trace and location of the syntax error.

Using the Web Inspector Extension

Here you can test applications on Mobile, Test and Web platforms. So, you will see how to inspect elements on the iPhone safari browser. If you don’t have a Mac or you want to sneak into a site directly via your iPhone If so, you’ll be happy to know there’s the iOS Shortcuts application that can do this. This article addresses this challenge by describing an intuitive yet effective method that will help individual testers or developers comprehensively debug iOS apps from web browsers.

It includes the real Mobile Safari app and the Web.app engine used when your PWA is installed on the home screen, so the final experience you see is fairly representative of an actual device. To access it, open the Chrome Developer tools from the More tools menu. Inside it you need to open the Remote devices view from the More tools menu. The view will list all attached Android devices and running emulator instances, each with its own list of active web views. However, this takes a non-trivial amount of effort which includes setting up a Chromium checkout, installing a current version of Xcode, and waiting for the build to complete.

Learning Hub

You can only install the Android SDK or Android Studio, a free IDE including the Android SDK with the emulators. With the SDK, you will have to use the command line to open and set up your emulators. With Android Studio, you can open the tools needed from the Welcome screen’s menu.

• Sometimes, if I’m really diving into a granular issue and don’t want to wait, I like to use ngrok.
• Now you must have already guessed that you don’t even need a real iPhone or iPad device to inspect elements on it.
• Choosing “Automatically Show Web Inspectors for JSContexts” saves you from having to select the latest JSContext manually.
• Inside Application, Cache then Cache Storage, you can see all the caches stored in current origin, preview content, and delete entries.
• It makes the job of testing much easier as testers get the required test infrastructure and environments at their fingertips.
• In that case, you can bridge a port on localhost on the Android device to any origin and port from your host computer, including your development computer’s localhost.
• You can open other devices by selecting File then Open Simulator menu.

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. Inspecting an iPhone on Windows is not straightforward as Apple’s Web Inspector only works on Mac. However, you can use third-party tools like ‘RemoteDebug iOS WebKit Adapter’ or ‘BrowserStack’ to inspect your iPhone from a Windows machine. These tools allow you to debug web content on iOS devices from a Windows PC.

Simulators and devices #

The following steps will guide you on how to inspect element on iPhone or iPad using LT Browser. By default, Xcode only installs the latest version of iOS, but you can go to Xcode, use the Preferences menu, and download older Simulators from the Components tab. Apple offers the Simulator app (formerly known as iOS Simulator) which allows you to test your web app on different iPhones and iPads on various operating system versions. To cross-check, one can simply open any URL in Safari and right-click the mouse button to check if the option is enabled. You can enable a performance overlay to help you debug performance problems by selecting “Perf Monitor” in the Dev Menu.

Additionally, a Mac with enough disk space to hold the code and tools is required. This barrier to debugging has led to bugs being filed for specific website failures on Chrome for iOS. Chrome 32+ for the desktop now has mobile device emulation, which is useful for debugging things via the console, such as touch events that don’t necessarily exist on the desktop. You will not be able to see highlighted elements from the devtools in the browser though. You will just need to deal with opening the DOM tree and finding the elements. Or use DOM queries in the JS console (document.querySelectorAll) and then right click on the results and click “Reveal In Elements Panel”.

Which Xbox controller works with iOS?

You can also refer to the below tutorial on how to perform responsive testing using chrome dev tools protocol In Selenium 4. You can use the desktop version known as Firefox Developer Edition. As with Chromium browser, Firefox has versions in different channels on desktop and Android, including stable, beta, and dev versions. Within Application then Storage, you can see, preview, update, and delete data from your origin, such as Web Storage entries or IndexedDB stores. Inside Application, Cache then Cache Storage, you can see all the caches stored in current origin, preview content, and delete entries.

With your app running on the device, head back to Chrome and click on inspect under your device in the list of remote targets. You will then be able to use all of the Chrome DevTools to debug the application as it runs on your device. All these methods are correct, but you need one convenient for you.

By the end of this post, you will not only be able to inspect elements on iPhone and iPad but will have various options to choose from as per your choice. The official way is to use Safari Developer Tools, which requires you to connect your iPhone to a Mac. If you’re not near a computer, you can install a free app called Web Inspector, or create a JavaScript bookmark (which also works on Chrome).

Generally, iOS Safari and Chrome act relatively the same, so debugging in Safari helps me clear my Chrome issue. And if it doesn’t I can always throw in more console.logs and see what Chrome is actually doing. Ideally, we should be able to debug the code directly on Chrome, like we can do with Safari, but at this time it’s just not possible.