Quoted from http://www.cnblogs.com/kelsen/p/6402477.html
This article focuses on how to debug web pages running in iPhone/iPad Safari browser through chrome browser in Windows system. If you have an iMac/MacBook, ignore this document. In the iMac environment, directly link the iphone to the iMac/MacBook through USB, and then open Safari in the iMac/MacBook to enter the debug mode, then you can debug the page running on the phone. For details, see: Using Web Inspector to Debug Mobile Safari or Safari Web Inspector Guide
Install iTunes
The Windows system must first install iTunes, open Apple's official website to download iTunes and complete the iTunes installation, otherwise the computer will not be able to correctly identify the iPhone device.
enable debug mode
To remotely debug IOS Safari, the Web Inspection feature must be enabled, turn on the iPhone/iPad and go to Settings > Safari > Advanced > Web Inspection > Enable.
ios-webkit-debug-proxy
ios-webkit-debug-proxy is a DevTools proxy, the project is hosted on Github. It allows developers to send commands to Safari browsers or UIWebViews on real (or virtual) IOS devices.
Install and deploy
Project address: https://github.com/artygus/ios-webkit-debug-proxy-win32
Click the download link in the Binaries section.
After downloading, decompress and copy the ios-webkit-debug-proxy-win32 directory to the C:\ drive.
Add C:\ios-webkit-debug-proxy-win32 to the system environment variables .
start proxy
Open a command line terminal and execute:
ios_webkit_debug_proxy-win32.exe -f chrome-devtools://devtools/bundled/inspector.html
Note: I downloaded the win64-bit version, run CMD, and execute the following command (without -win32.exe):
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html
The output is as follows:
ios_webkit_debug_proxy-win32.exe -f chrome-devtools://devtools/bundled/inspector.html
Listing devices on :9221
Connected :9222 to iPhone (c356a29f73043a36aa6de64b088d55aeeda8f034)
start debugging
Open the chrome browser, enter http://localhost:9221/ in the address bar, a list of all connected devices will be displayed here, select a device and click to open.
Open the page to see all the pages opened by the Safari browser in the current iphone. Click the link of the page to be debugged to open to enter the debug interface. At this point, there may be an error message as follows
Note: Your browser may block1,2 the above links with JavaScript console error: Not allowed to load local resource: chrome-devtools://... To open a link: right-click on the link (control-click on Mac), 'Copy Link Address', and paste it into address bar.
Prompt the browser to prohibit the page from loading local resources, you need to right-click on the above link to copy the link, and then manually create a new tab to paste the link in, and press Enter to access.
Copy the link and open it according to the prompt instructions, you can see the common chrome debugging window.
Next, you can perform normal debugging work.