Debug a page running on Iphone-safari through Chrome in Windows

This article focuses on how to debug a Web page running in the IPhone 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, turn on IPhone, 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

The output results are 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 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:chrome-devtools://... ' 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.

At last

This address: http://www.cnblogs.com/kelsen/p/6368550.html

About this article if you have any suggestions or questions, please contact the following message, but also through the Web front-end senior Engineer Group to communicate online.

Debug a page running on Iphone-safari through Chrome in Windows