Summary of development and debugging methods of mobile terminal

The author's own experience is shallow, but also hope the great God criticism advice.

?

Mobile Debugging Method Summary, the mobile debugging method has roughly four kinds: 1, chorme developer platform debugging, 2, Fildder remote debugging, 3, Chrome Inspect debugging, 4, Wenwire remote debugging

?

1. Chorme Developer Platform (F12)

?

?

This debugging method is one of the most commonly used methods in the early development, if you are familiar with the Chrome developer platform, development efficiency that is definitely a multiplier.

Chrome developer Debugging Common 5 parts:

1, Elements debug style, break the breakpoint

2. Network Observation Web request

3, source, mainly used for JS debugging

4, resources, mainly used to look at data storage

?

Each of these sections has a very powerful function, each of which can be taken out individually, where the author does not delve into it and only introduces parts related to mobile development.

?

1. elemnts HTML and CSS debugging

When we right-click on the element, we can see that, as shown, Chorme will automatically display the HTML code of your selected area with the associated CSS. At the same time, your code and CSS operations are instantly displayed.

We can in the Code section of the code to do additions and deletions of the operation, if you think the page display style is not correct, then do the corresponding debugging in the CSS section.

?

In addition to debugging code and CSS can also break points, yes! There are a lot of breakpoints we can not follow in source, at this point we can directly interrupt the DOM element, we will be able to hear

A DOM is modified, a DOM element is selected, and the right button appears as shown:

?

?

2. Network request

First, the Chorme network can receive all HTTP requests. This section features a very similar fildder

Not only can we see the requested URL, the request is time consuming, we can also see the requested parameters, return (Response) content, more detailed to see the time-consuming (Timing) full content of the request

?

3, Source JS debugging

Open source, generally what I see is as shown, the left side is the script resource area, the right side is the detailed content of the corresponding script.

In the script content area, hit your breakpoint, you can do JS debugging

?

4. Resource Resources

?

Resource is actually the storage of the web, from the way you can see the Web Storage:

1, Websql 2, IndexedDB 3, Local Storage 4, Session Storage 5, Cookie 6, Application Cache

?

Our development is mainly local Storage. The right side is the storage content of the local Storage.

For specific usage, see http://www.w3school.com.cn/html5/html_5_webstorage.asp

Open source Storage processing Framework Https://github.com/marcuswestin/store.js

?

?

2. Remote debugging of Fildder Mobile Terminal

?

1, first start the phone settings-->wlan--> set manual agent, IP: The computer's native IP, port number: 8888 (because fildder default listening 8888 port)

2. Open Fildder,tools-->fildder Options->connections

As shown: The port number is 8888, and remote debugging is allowed.

?

?

Once the setup is complete, you can listen to any requests made by my phone.

?

One benefit of debugging with Fildder is that you can intercept requests made by your phone, capture requests, and, based on Fildder's powerful features, you can capture requests for any processing.

?

3, Chrome Inspect? Android Real-Computer debugging

?

Let's take a look at the results we want to achieve.

? On the left is the PC-side chrome? Browser, the right is the chrome on the phone? You can then see that the area on your phone is highlighted when you move the mouse over a div, and you can modify the code and feedback the results directly on your phone.

Get ready

In order to complete this bright SAO mobile debugging function We need the following preparatory work

1.PC End installs the latest chrome

2. Phone-side Install the latest chrome (? Android computer?)

3.USB Connection Cable

(feeling is not too simple)

TIP: Previous Chrome If you want to implement this kind of debugging need to install one? ADB plugin? (requires FQ)? But the latest Chrome has direct support for Android, so it's no longer necessary to install the ADB plugin on chrome, but to download the latest chrome

Steps

Down we're done gradually

1. Suppose you have downloaded the latest chrome on your computer and downloaded the latest chrome on your phone

2.USB settings on your phone open USB debug with "Settings", "Developer Tools", "USB debugging" on.? because the Android phone model many people can't find "USB debugging this option where" and most mobile phone "developer Options" is hidden by default, You need to look at your phone instructions and then turn your phone into "developer mode" to find "USB debugging"?

3. Assume that you have set the phone to "USB debugging" turned on the status of the phone connected to the computer phone will pop up whether the link click OK

4. Open the computer's chrome in the address bar input? Chrome://inspect? Discover USB devices? Can detect your device can see monitoring to my device is M351

5. open chrome on your phone

You can see the page that Chrome opens on your phone at this point, chrome on my phone doesn't have any web history on it, so what if we're on the phone? Chrome input www.baidu.com can be seen or Inspect the input box behind Chrome opens a link directly

6. Click Inspect if you see the beginning of the article the same effect now is to review the mobile phone page elements

7. You can click the small square icon in the upper right corner of the pop-up review element box to switch to view mode. The page that opens your phone will be pulled to the PC display

Summarize

Basically has been happy to complete the summary under the entire process: PC and Android phone to download the latest chrome, in the phone settings will be "USB debugging" open? link to PC Open PC Chrome input Chrome://inspect Open the phone chrome input you want to debug the page click Inspect to start Debugging.

?

4, Wenwire remote debugging

Wenwire Debugging This development author is not used.

Summary of development and debugging methods of mobile terminal