How to debug a HTML5 developed Web page on a mobile device

In the mobile app that we do with PHOENGAP+HTML5, the problem that we often encounter is that the local webpage is compatible but the situation is incompatible with the app, the reason is that the mobile page, mostly run in the browser of the WebKit kernel, but there are all kinds of compatibility problems because of different platforms and vendors.

Here's a look at how to debug a page on a real machine on iOS and Android two platforms. This means that the iOS platform can only be debugged with its own Safari browser, and the Android platform can only be debugged with Google Chrome. Of course, I currently only find such two means, if you have other ways to debug more browsers, I hope you can leave a message to tell me.

One, IOS + Safari1. Open the Mobile Web Inspector.

Open by using Settings > Safari > Advanced > Web Inspector. See (Click to view larger image), and you will see the appropriate description of the computer operation under this option, as well.

2. Link PC (MAC)

2.1 First open the Web page you want to debug in your phone safari and connect it to your computer using a data cable (I'm here for Mac)

2.2 Again on the computer open safari click on the "Develop" menu and you will see as shown (click to view larger image):

3.3 Click on the website name in 2.2 to open Safari's console on your computer (click to view larger image):

3. Debugging Web pages

As shown in the 3.3 figure, at this point you can view the structure of the DOM of the mobile Web page, and the computer-side Web debugging is no different, when the mouse over these DOM nodes when the corresponding layout on the phone will be highlighted, such as (click to view the larger image):

Second, Android + Chrome1. Set up your phone

1.1 "Settings" > "About Phone" > "version Number", the version number of this point 7 (which is the official document) will prompt "You have become a developer."

1.2 Then return to "Settings" > "Developer Options" > "USB Debugging" to turn on the phone USB debugging.

2. Set up your PC (MAC)

This is a bit of a hassle, because you have to install the Android SDK.

2.1 Download the Android SDK and unzip it, I put the entire ADT directory on the/users/david/adt/here.

2.2 Set environment variables. Open terminal under the David path (shaped like daviddemacbook-pro:~ david$) Enter Open Bash_profile, if the file exists it will open, and if it does not, then enter touch. Bash_profile Create and open this file. In the file, enter export path= $PATH:/users/david/adt/sdk/platform-tools:/users/david/adt/sdk/tools, close save. Finally, enter source. Bash_profile in the terminal to update the environment variable to take effect. In the terminal, input the ADB command help information is successful.

2.3 Enter ADB forward tcp:9222 localabstract:chrome_devtools_remote in the terminal.

3. Link Computer

3.1 In Chrome on your phone, open the page you want to debug, connect your phone to your computer with a data cable (my Mac). Alas ~ I just emphasize the difference of platform, do not misunderstand).

3.2 Open chrome on your computer, and in the Address bar, enter the about:inspect  check box in front of "Discover USB Devices". The screen appears (click to view larger image):

4. Debugging Web pages

4.1 You can click on the "inspect" under the running website on the device detected in Figure 3.2, or enter localhost:9222 in the browser to open the list of pages that the phone is viewing, such as:

4.2 Hits the site thumbnail, will jump to a Google proxy link (link may be wall ..., hang agent) will open as shown in the console (click to view the larger image):

4.3 This and the computer on the page debugging is no different, the mouse through the DOM node, the layout of the phone will also be highlighted:

All right, it's over.

How to debug a HTML5 developed Web page on a mobile device