Debug a Web page on your phone (Breakpoint console timeline select DOM)

Using mobile phone to see the web, more and more, mobile phone app set a webview also a lot of, then how to debug the page on the phone? such as breakpoints, select Dom,console, console output, view memory, = =

Well, the almighty chrome and Safari still helped us out with these things.

Android under Debug page on phone (breakpoint, view modify Dom,console output, timeline,===)

Debug a webpage on your phone under iOS

Some of the problems encountered

Android under Debug page on phone (breakpoint, view modify Dom,console output, timeline,===)

Some notes

Chrome is the solution, so it only supports Chrome.

This means that the phone must be a Chrome browser, the computer must also be a Chrome browser, and 2 version is also high (My Computer version is 41.0.2272.76, the phone version is 40.0.2214)

Specific operation

1. First make sure that the newer Chrome browser is installed on both the computer and the phone

2. Connect the phone with the computer, and then in the settings---> Developer options--->usb debugging, check the USB debug (the directory structure of the personal phone is like this)

3. In the Chrome address bar on the computer input chrome://inspect/#devices, will appear as the interface, red box is inside the Phone Chrome open page

4. Click on the inspect connection and a Chrome controller box will pop up, as shown in

5. You can now operate in the pop-up box, like Chrome on the computer, try to break a point, such as

Debug a webpage on your phone under iOS

Some notes

It's not that easy to debug a webpage on my iphone because you have to get an iphone and a Mac, and it's not cheap!!!

Specific operation

1. First the phone, set the-->safari--> Advanced-->web Checker, open the Web Inspector, as

2. Then the settings for Safari on Mac, safari--> Preferences--and advanced--show the "Development" menu in the menu bar, as shown in

3. Open a webpage on your phone and develop "phone name" (My is Wtcsy) on Safari on Mac, as shown in

4. Click on the following address, will pop up a box, cut to the debugger, you can break the breakpoint, you can also console, cut a breakpoint diagram

Some of the problems encountered

Question 1

Q

Android dot on inspect has been white screen

A

Read the explanation on the Internet, heard that it was requested a foreign address, was the wall, so it has not opened

Solution Fq.

How to FQ?

Go to this address and the next Chrome swim version is http://www.sd173.com/html/928.html

Question 2

Q

Developed on Safari on Mac--the name of the phone (my is Wtcsy) shows a blank behind, as

A

is because the version of Safari on the MAC is relatively low, the system can be upgraded

Explanation of the problem address http://stackoverflow.com/questions/25920138/ Ios8-iphone-5-mobile-safari-cannot-be-inspected-by-desktop-safari-7-0-6-no-i

Debug a Web page on your phone (Breakpoint console timeline select DOM)