2021-07-16 Microsoft has published a blog dedicated to this feature, VSCODE awesome!

Previously, if you want to debug chrome or edge in vscode, you need to use the chrome Debugger or the Microsoft edge Debugger extension.

And more importantly, it only provides the most basic console functions, others such as Network, Element is not viewable, we still need to view in the browser.

What is this function

After the update, we can open link in chrome or edge directly in vscode and perform almost all common debugging functions such as viewing elements, networks, etc., directly in vscode.

Effect screenshot:

(edge devtools)

(the debug console)

How to use

It is very simple to use, just press F5 in the front end project to trigger debugging and simple configuration. Here’s a copy of the Lauch. json configuration that you can use to start debugging your browser.

{
  "version": "0.2.0"."configurations": [{"type": "pwa-msedge"."request": "launch"."name": "Launch Microsoft Edge and open the Edge DevTools"."url": "http://localhost:8080"."webRoot": "${workspaceFolder}"}}]Copy the code

You need to modify parameters like URL and webRoot to suit your needs.

The principle of

The principle is similar to the chrome Debugger extension. Also based on Chrome devtool protocol, establish websocket links. Interact by sending formatted json data so vscode can get some runtime information on the fly. Such as requests from browser network threads and DOM node information.

You can get a lot of information via Chrome DevTool Protocol, such as the network request mentioned above.

Since websocket establishes bidirectional links, it is also easy to trigger browser changes such as dom changes in VSCODE. We just need to operate in VSCODE (WebSocket Client) and send a JSON data through webSocket to the browser (WebSocket Server). The browser does something based on the JSON data it receives, just as the user does manually in the browser.

Note that Chrome DevTool Protocol has many clients, not only NodeJS clients, but also Python, Java, PHP and other clients.

More and more

  • Easier browser debugging with Developer Tools integration in Visual Studio Code
  • vscode-js-debug
  • chrome devtools-protocol
  • Microsoft Edge (Chromium) DevTools Protocol overview