Debugging web content on iOS (debug webpage content on iOS devices)

Debug webpage content on iOS devices using safari of the previous version of IOS 6. You can debug mobile webpage content through Mac. You can directly see JavaScript errors, edit HTML attributes, and change CSS attributes, this article describes how to use Web Inspector to debug web content. You should use the desktop and several iOS devices to test the webpage content. If you cannot perform a real machine test, you can use the IOS simulator, because there are differences between the IOS system and the OS X system browser, you should test on the iPhone iPad or its simulator separately. Web Inspector can be used to debug webpage content during safari testing on any platform.
Step 1: Enable Web inspectorweb inspector on iOS devices to provide valuable monitoring for webpage content that may cause errors, and Web Inspector can be accessed by Safari of OS X, you can use it to monitor the content of web pages previously loaded into safari or webview. (This debugging method can be used to debug the safari webpage content of iOS devices, such as the iPhone, through the Web Inspector of Safari on Mac, and the uiwebview embedded in the app can also be used)

To enable Web Inspector on iOS

1. Open the Settings app.

2. Tap safari.

3. Scroll down and select advanced.

4. Switch Web Inspector to on.

Monitoring on Mac

Enable Web Inspector on the iOS device and connect the device to your Mac with a USB cable. the safari develop menu on the Mac machine is displayed, as shown in, if your iOS device name is not displayed in the develop menu, try restarting safari or reconnecting USB cable. (If no menu item is available in Safari, you can choose safari> preference> advanced> show develop menu in menu bar ).
Figure 12-1 inspecting a web page from the develop menu

Use JavaScript to interact with the device on the Web insepctor debug console panel. You can use a Mac machine to send Javascript commands to your device, you can access the variables, functions, and Dom trees on the monitored page through the debug console, such:

Note: The HTML page of the IOS device can be accessed through the console. log ("myvariable is" + myvariable), print the log to the Mac machine window, the Mac machine can input Javascript commands in the window, send js to the page, such as window. alert (); the result is as follows:
Figure 12-5 alert dialog triggered from the debug Console