• Scotland team
  • Author: Jonny

First, the origin of debugging technology

For every developer, bugs are not uncommon, and debugging is a daily occurrence. However, we can trace our roots back to the 1950s.

On September 9, 1947, Harvard University was testing the Mark II Aiken Repeater computer when a moth stuck to one of the relays, causing the computer to malfunction. Operators removed the moth and restored the computer to normal operation. They attached the moth to their journal and wrote at the end: “First actual case of bug being found.” It was the first real bug they found, and the first bug in the history of human computer software. They also came up with the word “debug” to describe the machine, which led to the development of computer debugging technology.

Chrome Developer Tools

For the Web front end, we use development debugging tools to view DOM structure, JS breakpoints and view and analyze login requests every day. The most familiar development debugging tools should be Devtools of Chrome and FireBug of Firefox.

Chrome Developer Tools is a Web application written in HTML, JavaScript, and CSS that is integrated into the browser. It is based on the remote debugging protocol and has the following relationship with the browser architecture:

As can be seen from the figure:

  • Remote debugging protocol is based on WebSocket, which is used to establish a fast data channel between DevTools and browser kernel
  • The browser has multiple tabs and provides each Tab with a separate Websocket Endpoint URI
  • Only one Tab can be viewed per DevTool instance, that is, only one Tab can be maintained

In fact, the Chrome Developer Tool not only opens directly on the current browser page, it acts as a client (open source) and can also be used to debug any browser that supports the remote debugging protocol.

Using document: developers.google.com/web/tools/c…

Github Repository: github.com/ChromeDevTo…

Remote Debugging Protocol

The remote debugging protocol Webkit was introduced in 2012 and is currently supported by all webKit-powered browsers. Remote debugging protocol based on WebSocket, using WebSocket to establish a fast data channel between the client (such as DevTools) and the browser kernel, Chrome DevTools is just an application case of Webkit remote debugging protocol.

  1. Communication mode and message structure: For all operations on each page, the remote debugging protocol divides it into different command domains, such as Browser, Dom, Debugger, and Network, each of which defines different commands and events. During the development and debugging process, the browser kernel and the remote client communicate by sending messages through WebSocket. Messages are basically divided into two formats, one containing Message ID and the other without Message ID, respectively representing two communication modes:
  • Request/Response: Just like an asynchronous call, the information is requested and the corresponding result is returned. Such a communication must have a Message ID, otherwise neither party can correctly determine the match between the request and the return.

  • Notification: Unlike the first mode, this mode is used when one party unilaterally notifies the other party of a message. Similar to the concept of events.

  1. To make Chrome Extension development easier, the Chrome Debugger API provides a higher level OF API — the Chrome Debugger API. This API hides the request ID and handles the binding of the request and its response, thus allowing sendCommand to process the result in the callback function call. Each command contains two parts: Request and response. The request part specifies the operation to be performed and the parameters required by the operation. The response part indicates the operation status, success or failure.

Take the Debugger Domain as an example.

  • The command structure is as follows:

  • The event structure is as follows:

Agreement document: chromedevtools. Making. IO/devtools – pr…

The Debugger API: developer.chrome.com/extensions/…

We can use DevTools to check the actual communication data between DevTools Extension and the browser kernel. The steps are as follows:

1. Open the experimental mode of developer tools:

  • Enter chrome://flags
  • Find Developer Tools Experiments
  • Change status to Enable
  • Restart the browser

2. Open the protocol monitoring TAB

  • Click on the menu icon in the upper right corner of DevTools to go to “Settings”, select “Experiments” TAB on the left, and check “Protocol Monitor”
  • Close DevTools and open it again. Click the menu icon in the upper right corner of DevTools. Then go to More Tools and select Protocol Monitor.

Then we can see:

Chrome remote debug mode:

We’ve already seen how Devtools interacts with the browser kernel using the remote debug protocol, but not only that, Chrome can also enable remote debug mode, allowing external clients that support remote debug protocols to debug it.

  1. Protocol Server:

First, open Chrome in remote debug mode:

./chrome --remote-debugging-port=9222

After that, the debugging data will be forwarded to the local port 9222. Enter localhost:9222/json in the browser to see:

We can see the corresponding Websocket URL of each TAB page, through which the connection can be established to communicate with the system kernel.

  1. Protocol client:

We can use Chrome built-in tools to establish a connection with it for debugging, the steps are as follows:

1) Open Chrome’s built-in client and enter:

http://localhost:9222

You can see the following interface:

2) Or in the Chrome ://inspect interface, we can see that the local browser can also be debugged as a remote device.

3) we can also use an external debugging tool, such as node program, vscode plug-in, through the 9222 port to obtain the json data of each page, and then communicate with websocket connection, to achieve a variety of rich development and debugging functions.

V. Mobile terminal remote debugging technology:

From this point of view, remote debugging in chrome and other browsers seems like a bit of a drag. I already have Devtools, so why bother to enable remote debugging and use another tool for debugging? Don’t worry, the remote debug mode really comes into play when it comes to debugging scenarios on mobile devices. Mobile devices have a running environment, but there is no suitable development and debugging environment, with the help of WebKit remote debugging mode, we can make it very convenient to view and debug mobile devices.

There are many kinds of mobile web remote debugging technologies, such as Weinre embedded scripts in the code will not say, we are based on the WebKit remote debugging protocol way to explain. As we know from the above, json data will be sent to the debugging port (localhost:9222) after the remote debugging mode is enabled in Chrome on the mobile terminal. For security reasons, Chrome limits that only local localhost data can be sent to the specified IP address. In this case, you need to bind the data of port 9222 on the mobile terminal to the PC in some way, so that the PC can use the local port on the PC to debug the mobile terminal.

1. Port binding mode:

  • Wired (USB cable) : webKit-based mobile browser. After enabling the remote debugging function of the browser, connect to the PC through USB, and then bind the port through ADB:

adb forward tcp:9222 localabstract:chrome_devtools_remote

  • Wireless (network) : Port forwarding is performed over SSH. This mode is suitable for mobile terminals that support SSH login.

Log in to remote cloud host B1 on local host A1 and perform local port forwarding. SSH -l 2000:localhost:3000 [email protected].*.*

Debug server script (Node program) :

In 2016, Node made developer Tools of the Chrome browser its official debugging tool, making It easier for developers to debug Node scripts using the GUI. The debugging mode is as follows:

node --inspect --debug-brk index.js

Then you can see the debug entry for app.js via Chrome ://inspect. When you open it, you’ll see a custom version of Devtools with only four tabs, removing the parts that are not relevant to server script debugging.

It can be found that the principle of Node script debugging is similar to chrome JS script. Its built-in V8 supports remote debugging protocol. After debugging is enabled, devTools client establishes a connection with it through Websocket for communication.

Six, summarized

So far, we’ve covered the communication principles behind local and remote debugging. As a powerful universal protocol, remote debugging protocol supports communication between different servers or clients.

Browser debugging, in fact, the final landing engine: rendering engine and JavaScipt engine. For CSS modifications, JS breakpoints, how to implement to the rendering engine, context switching, function call stack tracing, there is much more to discover.