debugger for chrome 配置(调试js)

vscode真的什么插件都可以实现一些意想不到的功能呀,

调试js 是我们 进阶的一个必要途径,

如何调试js 呢, 在Chrome中那就不用说了, 那在vscode中呢,
这就需要我们借助插件来实现了, 但是插件,我们还需要配置好,才能在本地调试, 跟后端的几乎没有差别的效果,

---

在vscode的 run点击下拉箭头, 选择add ,即可添加配置

• 配置如下:

  1. 一个需要在html中调试的,
  2. 一个直接调试js文件的

{
    // 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": [
     
        {
            "type": "chrome",
            "request": "launch",  // 可以是attach和launch
            "name": "调试 Chrome",  // 此项配置的名字，显示在调试页的配置选择下拉框中。
            "url": "http://localhost:8088",  // chrome 自动启动时打开的网址(你开发环境的部署地址)。
            "webRoot": "${workspaceFolder}",  // 静态文件所在的本机目录(正常情况下就是项目根目录)。
            "sourceMaps": true
        },
        {
            "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    
        } 
    ]
}