The new version of VS Code uses the old Chrome Debugger (same for Node Debugger)

# 1. Install legacy debugger

Since the new version of VS Code does not allow the direct installation of deprecated plug-ins in the application, we need to install it by manually installing the vsix file.


Click `Marketplace` on the plugin description page to jump to the plugin download page


Then click `Download Extension` on the right side of the open page to download the plugin vsix file and save it locally


Then drag the vsix file into VS Code to complete the installation


# 2. Modify the configuration

Modify `.vscode/launch.json` to add

“`json

“type”: “chrome”

“`

change to

“`json

“type”: “legacy-chrome”

“`


Then you can happily use the old version of Debugger.

Related Links:

https://ift.tt/zotIgML

#Why

**The new JavaScript Debugger works great but has many problems. **Speaking of the bugs I encountered in my actual project development has made me choose to give up using it, not to mention the more numerous Source Map-related bugs on GitHub, which seriously affect the development efficiency. .

1. The console captures the entire browser

The old version of Debugger will only capture the tab you open for debugging and development, while the new version of Debugger will capture the entire browser, so when you go to Baidu and Google to check information in the same browser instance used for debugging, the following scenarios will occur, The debug console capture prints a bunch of stuff unrelated to your actual project.


2. Breakpoints capture the entire browser

The same as the first point, once you open some anti-debugging webpages while checking the data, the following scenario will happen. Your entire VS Code will be stuck by the endless debugger until you turn off the anti-debugging webpages. .


3. window.open will freeze the current page

Not only the UI, but also all threads such as requests will get stuck, just like hitting a breakpoint. The currently available solution is that every time you press F12 to open or close the developer panel, it will unfreeze, and F5 refresh will be invalid, because the request will always hang, causing the page to keep loading in circles.


4. The code location of the error stack information cannot be clicked to jump

Unable to quickly jump to the corresponding code location based on the error message


And in the old version it was like this, Ba Shi is very


5. The breakpoint is not hit, the breakpoint hits crookedly, and the hit is floating

Of course, breakpoints and Source Map problems are common problems, even if there are many old versions, but what I want to express is that my old version has almost zero configuration, but the new version requires all kinds of inexplicable Mapping and Overrides. The same code, the same Source Map, the plug-ins are all from MS, and the most important thing is the same configuration. When I used the new version for the first time, the breakpoints could not be hit and were floating around. After a period of time, the second time just fine? And the new version at that time was already non-Preview, how dare you use so many high-frequency and unstable bugs?

6. There are many non-individual general problems

In the community, there have been many encounters with intelligent prompts, breakpoint debugging, and terminals, and these types of problems are all problems that affect development.