How to debug JS code in VScode?
Use VS code to debug JS, you need to install a plug-in, this plug-in is based on the browser you are using, different browsers correspond to the plug-in!
| Browser | Plug-in |
|---|---|
| Chrome | Debugger for Chrome |
| Firefox | Debugger for Firefox |
| Microsoft Edge | Debugger for Microsoft Edge |
These are the most commonly used browsers! I am using Debugger for Chrome, and I also used it in this demonstration, but it is the same!
Realize the opening of the preview interface in the station
In-compiler debugging is implemented, and it is meaningless not to open the preview in the compiler! In order to achieve a better development experience, we also need a plug-in!
Live Server is a browser preview plug-in, it can also realize real-time updates as the code changes continuously! I believe they have been used!
Specific steps
Download the Debugger for Chrome and Live Server plug-ins...
The first step: open debugging, select the debugging environment!
A configuration file will appear after creation
When we create it, we can't use it directly, because you will find that the port 8080 cannot be opened, and an error will occur first!
Step 2: Change the preview port number
Use the Live Server plug-in to open an html file and check the port number.
Open the launch.json configuration file to change the port number
Step 3: Run
Basically all functions can be realized
Open the browser preview in the editor
Find the settings, and then search for "open-in" in the search bar
