欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vscode断点调试js代码的设置

程序员文章站 2022-07-14 09:25:21
...

QQ群招募中646258285(招募中,没几个人说话),
需要交流的朋友可以直接加我微信( DntBeliv )或QQ( 1121864253 )


vscode可以运行多种代码,需要安装插件code runner,然后点击右上角三角运行即可:
vscode断点调试js代码的设置
vscode也可以直接调试js代码,如下:
vscode断点调试js代码的设置
但通常我们需要同时调试HTML和js,此时我们使用chorme调试html,其自带的调试js,方法如下:

  1. VSCode 上装插件:Debugger for Chrome
  2. 修改launch.json
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    
    "version": "0.2.0",
    "configurations": [{
            "name": "谷歌浏览器", //运行html文件,用谷歌浏览器打开
            "type": "chrome",
            "request": "launch",
            "url": "${file}",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "nodeLauch", //单独调试js,即可以直接运行js
            "type": "node",
            "request": "launch",
            "program": "${file}", //这个配置成你要调试的文件、${file}当前打开的文件
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "console": "internalConsole",
            "preLaunchTask": "",
            "sourceMaps": false,
            "outDir": null
        }
    ]
}

然后选择不同的调试方式进行调试:
vscode断点调试js代码的设置

相关标签: web前端