H5 Mobile Debugging Guide

[[406894]]

A brief summary:

Mobile debugging pain points (commonly used in projects)

When developing on the mobile side, we always debug on the PC side using a mobile simulator. After there are no problems, we will test on the mobile browser. At this time, once a problem occurs, it is difficult for us to solve it because there is no visual interface. Many times, we rely on experience or elimination. In fact, we have to attribute it to the implementation problem of the browser.

The most important thing in mobile development is to master debugging skills and fix bugs before they are discovered.

1. Google Chrome Mobile Mode - Public Debugging

Google Chrome is an indispensable tool in our front-end development. Adjusting styles, setting breakpoints, viewing network requests, viewing performance, etc. Basically, Google can satisfy you with everything you can think of.

The same is true for mobile debugging. We can use the mobile mode of Google Chrome, as shown in the figure below. Click the mobile button in the red frame on the right to switch to mobile mode. At the same time, we can also click the drop-down arrow in the red frame on the left to select different mobile modes. We can also choose responsive mode to customize the width and height.

At the same time, we can also customize the device and modify the browser's UA to debug pages that are only accessible to WeChat, as shown below:

Most of our needs can be met through Google Chrome, but in actual development, due to problems with various models, real-machine debugging has also become a compulsory course for the front-end.

*Features: A popular debugging tool, but cannot simulate real machine problems.

2. Mac+IOS+Safari- Advanced Debugging

If you have a Mac and an iPhone, this is all you need to fix the bug.

1. Browser settings: Safari - Preferences - Advanced - Check "Show Develop menu in menu bar".

2. iPhone settings: Settings - Safari - Advanced - Open Web Inspector.

3. Open the H5 page through Safari on your phone. We can see through the browser development options:

4. Successfully solve the problem in this way.

*Feature: Cannot debug pages in webView.

3. Chrome+Android- Advanced Debugging

1. Open your Android phone's Settings > Developer Options > USB debugging.

2. Connect your computer and Android phone via a data cable, the following interface will pop up, click OK.

3. Enter chrome://inspect in Chrome to enter the debugging page.

4. You can see the debugging interface like this

*Features: The console can view pages normally.

4. spy-debugger- advanced debugging

spy-debugger: A powerful tool for mobile debugging, a convenient remote debugging mobile page and packet capture tool.

spy-debugger is a one-stop page debugging and packet capture tool. Remotely debug any mobile browser page, any mobile webview (such as WeChat, HybridApp, etc.). Support HTTP/HTTPS, no USB connection required. Features of spy-debugger include:

Page debugging + packet capture

Easy operation, no USB connection required

Support HTTPS

spy-debugger integrates weinre, node-mitmproxy, and AnyProxy

Automatically ignore the https requests initiated by the native app, and only intercept the https requests initiated by the webview, without any impact on the native app that uses the SSL pinning technology.

Can be used with other proxy tools (AnyProxy is used by default) (Set up external proxy)

Debugging method (important)

1. Install spy-debugger

sudo npm install spy-debugger -g

2. Keep your phone and PC on the same network

3. Open the network proxy on the mobile phone, the IP is the IP of the PC, the port number defaults to 98884, and the https page requires the mobile phone to install the certificate 5. Enter the command line

spy-debugger

At this point, the interface is as follows:

At this point we can debug in elements, resources, console, etc. At the same time, we can also use anyproxy that comes with spy-debugger to capture packets, as shown below:

5. Charles packet capture tool - advanced debugging

1. What is Charles?

Charles is called Blue and White Porcelain in Chinese. It is an HTTP proxy server, HTTP monitor, and reverse proxy server. It becomes a proxy for a computer or browser, and then intercepts requests and request results to achieve the purpose of analyzing and capturing packets. Charles is a cross-platform packet capture software developed based on Java. It can be used on Mac, Linux, and Windows. It can capture http and https requests on computers and mobile phones. It is a powerful tool for front-end development.

Features: Cross-platform, semi-free.

2. How Charles works

Charles installation and configuration

1. Installation of Charles

Charles official website: https://www.charlesproxy.com

Page Details

2. Charles proxy settings

3. Charles access control

4. Client-MacOS Quick Proxy Settings

Application Scenario

When the MacOS client is the same computer as the computer running the Charles software tool, you can set it up using the quick proxy setup method.

Operation steps: After opening the Charles tool, select the "macOS Proxy" option in the "Proxy" menu.

5. Client-IOS mobile proxy settings

1) On your iOS phone, select "Settings" - "Wi-Fi"

2) Click the name of the connected wireless network

3) Select "Manual" in the HTTP proxy configuration

4) Enter the server IP address and endpoint, and click "Save"

As shown in the figure:

6. Debugging Tools - Scenario Analysis

Since there are so many solutions for mobile debugging, how should we choose in actual operation?

Scenario Analysis

1. Safari: A powerful tool for debugging iPhone, the first choice for checking errors and modifying styles;

2. iOS simulator: no real device is required, suitable for debugging functional pages with frequent interactions between Webview and H5;

3. Charles: The preferred packet capture tool for Mac OS, suitable for viewing and controlling network requests and analyzing data;

4. Fiddler: Suitable for Windows platform, similar to Charles, view and control network requests, and analyze data;

5. Spy-Debugger: A powerful tool for mobile debugging, a convenient remote debugging mobile page and packet capture tool;

6. Whistle: A cross-platform web debugging proxy tool based on Node;

7. Chrome Remote Devices: Relies on Chrome for remote debugging, suitable for remote debugging of static pages on Android phones;

8. localhost to ip: real machine debugging, suitable for remote debugging of static pages;

9. vConsole: built into the project, prints mobile logs, views network requests, and views Cookies and Storage;

Summarize:

If you want to do your work well, you must first sharpen your tools. Without good debugging tools or methods, debugging on real mobile devices is simply a nightmare for front-end developers. But with these useful methods, it is so easy for all the excellent front-end developers to fix a small bug.