Home Development Tools VSCode How to debug js with vscode

How to debug js with vscode

Dec 17, 2019 am 10:51 AM
vscode

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!

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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

vscode setting Chinese How to set vscode in Chinese vscode setting Chinese How to set vscode in Chinese Apr 15, 2025 pm 06:51 PM

By installing and enabling the Simplified Chinese Language Pack or Traditional Chinese Language Pack in the VS Code extension store, the VS Code user interface can be translated into Chinese, thereby enhancing the coding experience. In addition, themes, shortcuts, and code snippets can be adjusted to further personalize the settings.

vscode cannot install extension vscode cannot install extension Apr 15, 2025 pm 07:18 PM

The reasons for the installation of VS Code extensions may be: network instability, insufficient permissions, system compatibility issues, VS Code version is too old, antivirus software or firewall interference. By checking network connections, permissions, log files, updating VS Code, disabling security software, and restarting VS Code or computers, you can gradually troubleshoot and resolve issues.

How to solve the problem of not finding python module in vscode How to solve the problem of not finding python module in vscode Apr 15, 2025 pm 06:06 PM

The reason why VS Code cannot find the Python module may be: the Python interpreter is configured incorrectly and the correct interpreter needs to be manually selected. Missing a virtual environment, you can create a standalone Python environment using venv or conda. The environment variable PYTHONPATH does not contain the module installation path and needs to be added manually. Module installation errors, you can use pip list to check and reinstall the missing module. For code path issues, you need to carefully check the usage of relative and absolute paths.

How to run programs in terminal vscode How to run programs in terminal vscode Apr 15, 2025 pm 06:42 PM

In VS Code, you can run the program in the terminal through the following steps: Prepare the code and open the integrated terminal to ensure that the code directory is consistent with the terminal working directory. Select the run command according to the programming language (such as Python's python your_file_name.py) to check whether it runs successfully and resolve errors. Use the debugger to improve debugging efficiency.

What is vscode What is vscode for? What is vscode What is vscode for? Apr 15, 2025 pm 06:45 PM

VS Code is the full name Visual Studio Code, which is a free and open source cross-platform code editor and development environment developed by Microsoft. It supports a wide range of programming languages ​​and provides syntax highlighting, code automatic completion, code snippets and smart prompts to improve development efficiency. Through a rich extension ecosystem, users can add extensions to specific needs and languages, such as debuggers, code formatting tools, and Git integrations. VS Code also includes an intuitive debugger that helps quickly find and resolve bugs in your code.

What to do if vscode cannot save file What to do if vscode cannot save file Apr 15, 2025 pm 06:03 PM

VS Code Failed to save file: Permissions issue: Ensure that the user has read and write permissions to the file/folder. Insufficient disk space: Clean up disk space to free up storage space. File occupied: Close other programs that are using files. VS Code Extension Conflict: Disable suspicious extensions and re-enable them one by one to find out the culprit. VS Code's own problem: Restart, reinstall, or check for updates to troubleshoot software.

Is the vscode extension malicious? Is the vscode extension malicious? Apr 15, 2025 pm 07:57 PM

VS Code extensions pose malicious risks, such as hiding malicious code, exploiting vulnerabilities, and masturbating as legitimate extensions. Methods to identify malicious extensions include: checking publishers, reading comments, checking code, and installing with caution. Security measures also include: security awareness, good habits, regular updates and antivirus software.

vscode start front-end project command vscode start front-end project command Apr 15, 2025 pm 10:00 PM

The command to start a front-end project in VSCode is code. The specific steps include: Open the project folder. Start VSCode. Open the project. Enter the startup command code. in the terminal panel. Press Enter to start the project.

See all articles