Remote debugging of Web pages on Iphone/ipad via Mac

We know that browsers on MAC/PC have web-checker tools such as the most famous Firebug to debug front-end development, and in Iphone/ipad because of the size of the screen and the use of touch screen habits, directly to the Web debugging is very inconvenient, so there has been no web Checker, but the release of IOS 6 solves this problem.

IOS 6 provides Safari with a remote Web Inspector tool (remotely web Inspector) that you can debug with a simulator or a real-world device (with a USB connection to your Mac). Let me talk about the detailed debugging process:

1. For remote debugging, first turn on the remote debugging feature of Safari on Iphone/ipad, "Open with Settings > Safari > Advanced":

2. Then open Safari, start the page you want to debug, of course, the native app through the WebView open page can also be debugged.

3. Finally connect the IPhone or IPad via the data cable to the MAC computer, open the desktop version of Safari (currently IOS 6 Safari remote debugging is only supported through the desktop version of Safari on Mac, Safari for Windows is currently Without this feature), click on the Development menu, select the device name of the iphone/ipad you are debugging, select the Debug page.

4. Finally, call the desktop version of Safari's Web inspector to debug the Safari app on Iphone/ipad:

This debugging process and we usually on the MAC/PC debugging basically the same, for example, HTML and CSS can make some real-time changes to see the effect of the changes. View cookies, local storage, session and other data. View WEBAPP performance, network requests, and so on, or you can view all error and warning messages to correct the program.

Of course we can use it to debug Javascript, set breakpoints, define uncaught surprises, and so on. You can also access the Console to execute Javascript code directly.

It also supports touch to inspect: Activates the hand icon on the inspector, and can immediately find the DOM element corresponding to the inspector by touching it on the iphone/ipad.