Whistle is a cross-platform Web debugging agent based on Node. It can be used as a common HTTP agent or to capture, modify, and operate HTTP, HTTPS, Websocket, and tunnel requests. For example: You can modify hosts, request methods, response status codes, request headers, request (response) content, and so on. You can basically operate all aspects of web requests. It also supports plug-in extension functions. Github.com/avwo/whistl… .

Problems encountered in mobile debugging

Compared with PC, the following three problems may occur when you debug web pages on mobile devices:

  1. Without Console, you cannot view the js error and pass of the pageconsole.xxxDebug logs are generated
  2. The DOM structure and style of the page cannot be viewed or modified
  3. Unable to debug

In general, the mobile end page on Chrome on PC simulator for debugging, but not all mobile terminal page can in PC simulator debugging, such as some need to call to the local API APP embedded page of the APP, or test page compatibility issues, etc., can only see the real execution on the true effect, In this case, whistle can be used to solve the first two problems with a simple configuration (currently, you can’t get the debugging information from the page js, and the debug function is not supported. You can use console.log instead) :

Use whistle to see js errors and passes on a pageconsole.xxxDebug logs are generated

Whistle implements a remote Log platform similar to the Console of a browser. Simple whistle rules can automatically capture page errors and Console output information. Take M.baidu.com/ as an example. Since https://m.baidu.com/ is accessed using HTTPS, HTTPS interception must be enabled on Whistle to capture and modify HTTPS requests. The whistle agent needs to be configured on the mobile phone. After everything is ready, you can configure the following rules:

// # if you want to inject javascript at the same time, ///User/ XXX /test.js # m.baidu.com :///User/ XXX /test.js # m.baidu.com :// User/ XXX /test.js # m.baidu.com log://D:\ XXX \test.js # m.baidu.com log://{test.js}Copy the code

The whistle Values see: avwo. Making. IO/whistle/web… The matching modes are not limited to domain name matching, but also include path, regular, wildcard, and exact matching. For details, see the help document.

We use the Values of whistle to inject a js file into the log, which is used to output data through console.error, console.warn, console.log, etc., and simulate an exception thrown:

m.baidu.com log://{test.js}
Copy the code

test.js:

console.error({ error: true }); console.warn({ error: true, warn: { test: true } }); console.log(123456); Console. notAFunction('test');Copy the code

The effect is shown below:

Use Whistle to view and modify the DOM structure and style of a page

Whistle integrates with Weinre, which allows you to modify the DOM structure and style of a web page on a PC using a single rule:

m.baidu.com weinre://test
Copy the code

Weinre ://test is only used as a classification of Weinre to prevent a weinre debug page from having too many links.

Inject vConsole with Whistle

VConsole is a lightweight and expandable front-end developer debugging panel for mobile web pages developed by wechat team. The main principle is to simulate the Console function of PC browser by injecting JS into the page. Here, the js protocol of Whistle is used to inject vconsole. js into the specified webpage (m.baidu.com/) and configure the whistle rule:

m.baidu.com js://{vConsole.js}
Copy the code

The effect is shown below:

Note: vConsole and Weinre cannot be used together

Whistle has many more applications and more to come. To learn more, visit Whistle’s Github at github.com/avwo/whistl… If you have any questions or suggestions, please make an issue or PR.