Debugger for chrome调试 javascript代码

vscode 插件 debugger for chrome调试 javascript代码

1. vscode扩展商店下载 Debugger for chrome

   

2. 假设本地要调试的是demo文件夹下的demo.js 点击左边侧边栏的运行和调试

   

3. 因为本次只调试demo项目文件夹下的demo.js 选择添加配置(demo)

   

4. 配置打开的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
           }
       ]}
   

   注意修改上面的‘program’要修改成你要调试文件的路径

   例如我的：

   "program": "C:\\Users\\29502\\Desktop\\项目合集\\demo\\demo.js",
   

5. 进行调试

   demo.js添加断点 调试工具切换为谷歌浏览器

   

   按F5，根据上面的调试仪表就可以一步一步调试

参考文章：vscode断点调试js代码的设置