How To Debug Javascript Issue Using iOS Chrome, Safari & Android Chrome, Firefox Web Browser

This article will tell you how to debug javascript issues when you meet them using iOS Chrome, Safari web browser and Android Chrome, Firefox web browser.

1. How To Debug JavaScript Issue On iOS Device Using Google Chrome & Safari Web Browser.

1.1 Debug JavaScript On iOS Device Using Google Chrome.

1. Open google chrome web browser on iOS device.
2. Input the URL chrome://inspect in the google chrome URL address.
3. It will show the Javascript Console page, there is a button with the text Start Logging on the page top center position.
4. Click the Start Logging button to start the javascript logging.
5. Then when you browse the web page URL on another chrome tab, it will show the javascript warning or error message on the javascript logging tab page that you opened in step 2.

1.2 Debug JavaScript Issue On iOS Using Safari.

1.2.1 Activate Safari Inspector.

1. On iOS device, press Settings —> Safari —> Advanced.
2. Turn on the Web Inspector toggle button on the Advanced page.

1.2.2 Enable Safari Web Browser Develop Menu On Mac Computer.

1. Open Safari web browser on the Mac computer.
2. Click Safari —> Preferences… menu item on the top left corner.
3. Click the Advanced tab icon on the top icon bar.
4. Check the checkbox Show Develop menu in menu bar and close the Safari preferences window.
5. Now you can see the Develop menu on the Safari top menu bar.

1.2.3 Debug Web Page On iOS Safari Web Browser.

1. Connect the iOS device to the Mac computer using a USB line.
2. Press the Trust button on the iOS device screen.
3. On the mac computer Safari web browser, click the Develop menu, you can find your iOS device name from the popup list.
4. Click the iOS device name, if the iOS device screen is locked, it will show the Unlock Device with Passcode menu item.
5. Unlock your iOS device, open Safari web browser on your iOS device, and browse the web page that you want to debug javascript code on.
6. On your Mac computer, open Safari web browser, click Develop —> your-iOS-device-name —> Safari Web Browser —> The web page in the Safari web browser.
7. Then it will open the Web Inspector on the Safari web browser, you can debug the web page displayed on the iOS Safari web browser in it.

2. How To Debug JavaScript Issue On Android Device Using Google Chrome & Firefox Web Browser.

2.1 Enable USB Debugging Mode In Android.

1. Press the Settings icon on the android device to open the Settings page.
2. Scroll down to the end of the page, press the Developer Options item.
3. Turn on the USB debugging toggle button.

2.2 Debug JavaScript Issue On Android Using Google Chrome.

1. Connect the android device to the computer.
2. Press the OK button on the android device to allow USB debugging.
3. Press the Yes, Access Data button to allow the computer to read data from the android device.
4. Open Google Chrome web browser on your computer.
5. Input the URL chrome://inspect/#devices in Google Chrome URL address input text box.
6. Then you can see the android device that is connected to the computer on the page.
7. You can input the web page URL in the Open tab with url input text box, then click the Open button to open a new browser tab in the android device.
8. And it will list the browser tab page URL below the above input text box, and there are the links inspect, pause, focus tab, reload, close.
9. Click the inspect link to open the Google Chrome inspector window that can inspect the web page opened in Google Chrome on Android devices.

2.3 Debug JavaScript Issue On Android Using Firefox.

1. Open Firefox web browser on your computer.
2. Click the Tools —> Browser Tools —> Remote Debugging menu item on the Firefox top menu bar.
3. Click the Enable USB Devices button to enable remote debugging on the USB devices.
4. If you have connected your Android device to the computer as in section 2.1, you can find the android device on the page left side.
5. Now you can see the text Waiting for browser… under the android device name, this means the Firefox browser on the Android device is not ready.
6. Open Firefox web browser on the android device, click the 3 vertical dots on the browser bottom right corner, then press the Settings item on the popup menu list bottom.
7. Scroll down the Settings page, and turn on the Remote debugging via USB toggle button.
8. Now on the computer Firefox web browser, you will find the Connect button beside the Android device name in the about:debugging#/setup page.
9. Click the Connect button above, then click the Android device name, it will show all the android firefox properties ( opened tabs, extensions .etc ) on the page right side.
10. Click the Inspect button on the right side of one web browser tab, it will open the Firefox web inspector that can let you debug the web page opened on the Android device Firefox browser.