Shulou(Shulou.com)06/02 Report--

In this issue, Xiaobian will bring you about the use of VSCode seamless debugging browser and what is the principle. The article is rich in content and analyzed and described from a professional perspective. After reading this article, I hope you can gain something.

VSCode epic update, you can seamlessly debug the browser. The following article will take you to understand this function, see how to use it, and the principle analysis, I hope to help you!

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

Before that, you needed Chrome Debugger or the Microsoft Edge Debugger extension to debug chrome or edge in vscode.

And more importantly, it can only provide the most basic console functions, others such as network, element is not viewable, we still need to view it in the browser.

What is this function?

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

how to use

The way to use is very simple, you only need to press F5 in the front-end project to trigger debugging and simple configuration. Here we paste a lauch.json configuration, with it you can directly open the debugging 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}" } ]}

You need to modify url and webRoot parameters according to your own situation.

principle

The principle is similar to Chrome Debugger Extension. It is also based on Chrome's devtool protocol, which establishes websocket links. Interact by sending formatted json data so vscode can dynamically get some information at runtime. Such as requests sent by browser web threads and DOM node information.

You can get a lot of information through the chrome devtool protocol, such as the network request mentioned above.

Because it is a bidirectional link established by websocket, it is easy to trigger browser modifications by changing dom in VSCODE. We just need to operate in VSCODE (websocket client) and send a JSON data to the browser (websocket server) through websocket. The browser will perform some operations based on the received JSON data, and the effect is the same as that of the user directly manually operating in the browser.

It is worth noting that there are many clients for chrome devtool protocol, not only NodeJS client, Python, Java, PHP and other clients.

The above is what is the method and principle of using VSCode seamless debugging browser shared by Xiaobian. If there is a similar doubt, please refer to the above analysis for understanding. If you want to know more about it, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.