Home > Development Tools > VSCode > How to debug js with vscode

How to debug js with vscode

藏色散人
Release: 2019-12-17 10:51:22
Original
3730 people have browsed it

How to debug js with vscode

How does vscode debug js?

When debugging JavaScript code, there are two relatively simple methods.

1. Use Chrome and other browsers to debug

2. Configure the JavaScript running environment in vscode

This article mainly introduces the second method

Configuration steps:

1. Download and install Node.js (Node.js is a running environment for JavaScript)

You can find this on the Node.js official website or the Chinese website

2 .Configure vscode

Click the "Debug" button in vscode to open the launch.json file (or use Ctrl Shift P to enter launch.json)

Add

"version": "0.2.0",
    "configurations": [{
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/1.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": null,
            "runtimeArgs": ["--nolazy"],
            "env": { "NODE_ENV": "development" },
            "externalConsole": false,
            "preLaunchTask": "",
            "sourceMaps": false,
            "outDir": null
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858
        }
    ]
Copy after login

Note : ${workspaceRoot} is the absolute path of the current program work.

3. Debugging

Create a new js file, change 1.js in the program in launch.json to the file name you want to debug, and put the changed file under the absolute path

(function name(params) {
    console.log("message");
})();
Copy after login

Use F5 to debug and get

node --debug-brk=37692 --nolazy Untitled-1.js
Debugger listening on [::]:37692
message
Copy after login

Debugging successful

Related recommendations: vscode tutorial

The above is the detailed content of How to debug js with vscode. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template