Debug a page running on Ios-safari with Chrome

Quoted http://www.cnblogs.com/kelsen/p/6402477.html

This article focuses on how to debug a Web page running in the Iphone/ipad Safari browser from a Chrome browser in a Windows system. If you have a imac/macbook, you can ignore the document. In the IMAC environment, the iphone is linked directly to Imac/macbook via USB, and then in Imac/macbook, Safari is turned into debug mode to debug the page running on the phone. For details see: Using Web Inspector to Debug Mobile Safari or Safari Web Inspector Guide

Install ITunes

Windows system first installs itunes, opens the Apple website to download itunes and completes the itunes installation, or the computer does not recognize the IPhone device correctly.

Turn on debug mode

To remotely debug IOS Safari, you must enable the Web check feature, open Iphone/ipad, go to settings > Safari > Advanced > Web Check > enabled.

Ios-webkit-debug-proxy

Ios-webkit-debug-proxy is a DevTools proxy, and the project is hosted on Github. It allows developers to send commands to the Safari browser or uiwebviews in a real (or virtual) iOS device.

Installation deployment

Project Address: Https://github.com/artygus/ios-webkit-debug-proxy-win32

Click the download link in the Binaries section.

After downloading, complete the decompression and copy the Ios-webkit-debug-proxy-win32 directory to the C: \ disk.

Add C:\ios-webkit-debug-proxy-win32to the system environment variable.

Start proxy

Open the command line terminal and execute:

Ios_webkit_debug_proxy-win32.exe-f chrome-devtools://devtools/bundled/inspector.html

Note: I downloaded the version of the Win64 bit, run cmd, execute the following command (without-win32.exe):

Ios_webkit_debug_proxy-f chrome-devtools://devtools/bundled/inspector.html

The output results are as follows:

Ios_webkit_debug_proxy-win32.exe-f chrome-devtools://devtools/bundled/inspector.html

connected:9222 to IPhone (c356a29f73043a36aa6de64b088d55aeeda8f034)

Start debugging

Open the Chrome browser and enter http://localhost:9221/in the Address bar, where you will see a list of all connected devices, select a device and click Open.

Open the page to see the current iphone in the Safari browser open all the pages, click the link to debug the page to open to enter the debugging interface. At this point, you may have an error message such as

Note:your Browser may block1,2 the above links with JavaScript console error: Not  allowed to load local RESOURCE:CHR ome-devtools://... To open a Link:right-click on the link (Control-click on Mac), ' Copy link Address ', and paste it into Address bar.

Prompts the browser to prevent the page from loading local resources, you need to click on the link above to copy the link, and then manually create a new tab to paste the link in, enter the access.

Follow the instructions to copy the link and open it to see the Common Chrome debugging window.

Next, you can do the normal debugging work.

Debug a page running on Ios-safari with Chrome