Mobile H5 Debugging Tool Guide

Title: Guide to Mobile H5 Debugging Tools
Date: 2020-09-20 22:56:01
Tags:

Mobile
Debugging

Having a useful mobile debugging tool can greatly improve development efficiency and problem-solving capabilities during the process of development and bug fixing.

Introduction#

In mobile web development projects, due to the diversity of mobile devices, compatibility issues with iOS systems, and varying compatibility of webviews on different Android devices, it is difficult to reproduce problems using browser developer tools on PC. Having a useful mobile debugging tool can greatly improve development efficiency and problem-solving capabilities during the process of development and bug fixing. Below are several debugging tools that I have used during development.

vConsole#

vConsole is a lightweight, extendable frontend developer debugging panel for mobile web pages, developed and open-sourced by the WeChat front-end team. It can be used to display console logs and facilitate development and debugging.

Github: https://github.com/Tencent/vConsole

Online demo: http://wechatfe.github.io/vconsole/demo.html

Features:

View console logs
View network requests
View page element structure
View Cookies, localStorage, and SessionStorage
Execute JS commands manually
Custom plugins

Quick start:

Script import:

<head>
  <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js"></script>
  <script>
    var vConsole = new VConsole();
  </script>
</head>

For future extensions, it is recommended to import it in the section:

npm install vconsole

import vConsole from "vconsole";

const vConsole = new VConsole();

eruda#

Eruda is a debugging panel designed for mobile web pages, similar to a mini version of DevTools. Its main features include capturing console logs, inspecting element states, capturing XHR requests, and displaying local storage and cookie information.

Github: https://github.com/liriliri/eruda

Online demo: https://eruda.liriliri.io/

Features:

Draggable buttons, adjustable panel transparency.
Console panel: Capture console logs, support log, error, info, warn, dir, time/timeEnd, clear, count, assert, table; support placeholders, including %c for custom style output; support filtering by log type and regular expressions; support JavaScript script execution.
Elements panel: View tag content and attributes; view styles applied to the DOM; support highlighting of page elements; support direct selection by tapping on the screen; view various events bound to the DOM.
Network panel: Capture requests, view sent data, response headers, response content, and other information.
Resources panel: View and clear localStorage, sessionStorage, and cookies; view scripts and style files loaded by the page; view loaded images.
Sources panel: View page source code; format HTML, CSS, JS code, and JSON data.
Info panel: Output URL and User Agent; support custom output content.
Snippets panel: Add borders to page elements; refresh the page with a timestamp; support custom code snippets.

Quick start:

Using CDN:

<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

npm install eruda --save

<script src="node_modules/eruda/eruda.js"></script>
<script>eruda.init();</script>

vConsole and eruda have similar functions, both embedding a console panel in the mobile web page. However, they are not very convenient to use. For example, when debugging a specific element, it is not easy to operate due to the limitations of the mobile screen. Next, I will introduce two representative remote debugging tools.

Weinre#

Weinre stands for Web Inspector Remote, which is a remote debugging tool.

Weinre, as a remote debugging tool, is structured into three layers:

Target page: The page being debugged, with remote JS embedded in it.
Debug client: Local Web Inspector debugging client.
Debug server: An HTTP server that establishes communication between the target page and the debug client.

Quick start:

Installation:

npm install -g weinre

Start from the command line:

weinre --httpPort 8080 --boundHost -all-

Open Google Chrome (-webkit kernel) and enter: http://127.0.0.1:8080/

Then add a Debug Target:

Add the following script (with your IP) to the page you want to debug:

<script src="http://your-ip:8080/target/target-script-min.js#anonymous" type="text/javascript"></script>

Open the debugging page on your mobile device. The mobile device needs to be connected to the same Wi-Fi network as the computer.

Finally, go back to the http://127.0.0.1:8080 page you opened earlier and click "debug client user interface:". If everything is fine, you have successfully added a Debug Target.

Note: I have not used this tool yet. For detailed usage instructions, please refer to: https://github.com/nupthale/weinre

Chii#

Chii is a remote debugging tool similar to Weinre, but it replaces web inspector with the latest Chrome DevTools frontend.

Github: https://github.com/liriliri/chii

Compared to Weinre, Chii uses the Chrome developer tools interface for debugging, which is more user-friendly.

Quick start:

Installation:

npm install chii -g

Start:

chii start -p 8080

Inject the following script into the page you want to debug:

<script src="//your-ip:8080/target.js"></script>

Then you can access localhost:8080 to start debugging the page.

It's simple, you can operate on your mobile device and view elements and log outputs in the debugging panel on your PC.

Conclusion#

The above is a sharing of mobile debugging tools. There are many similar tools, and the most famous ones are the ones mentioned above. There are also some similar tools such as https://github.com/wuchangming/spy-debugger, but I haven't used them yet. I will share them in the future if there are better ones.