Chrome 前端调试技巧分享

{"name": "Attach to Chrome", // 调试环境名称"type": "pwa-chrome", //调试环境运行环境， 取值:  node   pwa-chrome 或其它自行安装的程序命令"request": "attach" | "launch", // attach模式: 监听一个启动进程    launch模式: 由vscode 来启动一个独立的debug进程  "url": "http://localhost:8080", // 服务地址  launch模式才会有"port": 9222, // 端口  attach才会有"webRoot": "${workspaceFolder}"  // 静态资源目录"cwd": "${workspaceFolder}/dist", // 指定程序启动调试的目录 ,当vscode启动目录不是项目根目录，并且调试npm script时非常有用"args": ["--no-install"],"outFiles": ["${workspaceFolder}/lib/**/*.js"], //指定 sourceMaps的位置"skipFiles": [    "<node_internals>/**/*.js",    "${workspaceFolder}/node_modules/**/*.js" ], //指定跳过单步调试的代码"preLaunchTask": "npm: build", // launch之前做的事情"stopOnEntry": true, //自动断点到第一行代码处"smartStep": true, //自动跳过未映射到源代码的代码}

{  "type": "node",  "request": "launch",  "name": "debug test",   "runtimeExecutable": "node",  "program": "${workspaceFolder}/code/debugger/test.js",  "restart": true,  "console": "integratedTerminal", "internalConsoleOptions": "neverOpen"
}

{	"type": "chrome",   "request": "launch",   "name": "launch project dbug",   "url": "http://localhost:8993/drs",   "webRoot": "${workspaceFolder}",   "preLaunchTask": "debug",   "sourceMapPathOverrides": {     "webpack://[name]/./*": "${webRoot}/*",     "webpack:///src/*": "${webRoot}/*",     "webpack:///*": "*",     "webpack:///./~/*": "${webRoot}/node_modules/*",   }}

{"version": "2.0.0",    "command": "npm",  // 运行命令的程序    "tasks": [        {            "label": "debug",  // Task 名称             "isBackground": true,            "type": "npm",            "script": "start",  // npm 要执行的 script 名称，对应 package.json 中的定义            "detail": "编译至开发环境",  // Task 的描述，在命令面板中显示            "group": "test",            "problemMatcher": {                "fileLocation": "relative",                "pattern": {                    "regexp": "^([^\\s].*)\\((\\d+|\\,\\d+|\\d+,\\d+,\\d+,\\d+)\\):\\s+(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$",                    "file": 1,                    "location": 2,                    "severity": 3,                    "code": 4,                    "message": 5                },                "background": {                    "activeOnStart": true,                    "beginsPattern": ".",                    "endsPattern": "Version: webpack.+"                }            }        }    ]}