


VSCodeEpic update, you can seamlessly debug the browser. The following article will take you to understand this function, see how to use it, and briefly analyze the principle. I hope it will be helpful to you!
2021-07-16 Microsoft published a blog specifically introducing this feature, VSCODE is awesome!
Prior to this, if you want to debug chrome or edge in vscode, you need to use Chrome Debugger or the Microsoft Edge Debugger extension, two vscode extensions.
And more importantly, it can only provide the most basic console functions. Others such as network and element cannot be viewed. We still need to view it in the browser. [Recommended learning: "vscode tutorial"]
What is this function
After the update, we can open directly in vscode link
in chrome or edge, andcomplete almost all common debugging functions such as viewing element, network, etc. directly within vscode.
Effect screenshot:
(edge devtools)
(debug console)
How to use
Use The method is very simple. You only need to press F5 in the front-end project to trigger debugging and perform simple configuration. Here is a lauch.json configuration for everyone. 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}" } ] }
Everyone needs to modify parameters such as url and webRoot according to their own situation.
Principle
The principle is actually similar to the chrome debugger extension principle. It is also based on Chrome's devtool protocol to establish a websocket link. Interact by sending formatted json data, so that vscode can dynamically get some runtime information. For example, requests sent by the browser network thread and DOM node information.
You can get a lot of information through chrome devtool protocol, such as the network request mentioned above.
Since it is a two-way link established by websocket, it is easy to change the dom in VSCODE and trigger browser modifications. We only need to operate in VSCODE (websocket client) and then send a piece of JSON data to the browser (websocket server) through websocket. The browser will perform some operations based on the received JSON data. In terms of effect, it is no different from the user's direct manual operation in the browser.
It is worth noting that there are many clients for the chrome devtool protocol, not just the NodeJS client, but also Python, Java, PHP and other clients. For more programming-related knowledge, please visit:Introduction to Programming! !
The above is the detailed content of VSCode can seamlessly debug the browser. Let's take a look at the usage and principle analysis!. For more information, please follow other related articles on the PHP Chinese website!

2022年了,该学会用VSCode debug了!下面本篇文章手把手带大家会习VSCode debug,希望对大家有所帮助!

本篇是VSCode配置文章,手把手教大家怎么在VSCode中配置使用 Geant4 和 Root,希望对大家有所帮助!

本篇文章扒拉一下vscode Prettier的选项,总结分享16个让你的代码变漂亮的属性,希望对大家有所帮助!

“工欲善其事,必先利其器!”,vscode作为前端开发的重要工具,其插件能大幅提升战斗力,精心收集12个插件,总有几款你还未曾拥有。

VSCode中如何开发uni-app?下面本篇文章给大家分享一下VSCode中开发uni-app的教程,这可能是最好、最详细的教程了。快来看看!

VScode中怎么开发置C/C++?怎么配置C/C++环境?下面本篇文章给大家分享一下Windows系统下VScode配置C/C++环境图文教程,希望对大家有所帮助!


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Atom editor mac version download
The most popular open source editor
