前端调试技巧调试技巧，在任何一项技术研发中都可谓是必不可少的技能。本文详细讲解了在Chrome调试工具的调试技巧

Chrome调试工具

箭头 & Elements

箭头：用于在页面选择一个元素来审查和查看它的相关信息。
Elements 内容：

样式

计算属性
事件监听
将Ancestors和Framework Listeners两个checkbox取消选中可以看到选择dom绑定的事件。
DOM breakpoints
在Chrome开发者工具里，选中想要监控的DOM元素，点击右键，选择Break on->Attributes modifications:
之后在DOM Breakpoints的tab里能看到对应的断点
然后回到Chrome里鼠标悬停百度一下，Chrome开发者工具的调试器就会自动在DOM的属性发生变化的地方停下来:
从调试器的调用上下文能了解到是上图第118行的className 改变了导致DOM断点的触发。
Properties
改选项卡里面可以看到选择dom对象，及类的继承链。

设备模拟器

模拟移动屏幕，或者一些其它的像素比例的屏幕。

Console控制台

控制台打印，执行脚本。

Sources

NetWork

Performance

Memory: 内存快照

Vscode内代码调试

调试环境配置

在.vscode / launch.json 文件夹为配置文件。（可以快捷键ctrl + p 然后输入 debug 进行快速配置）

参数说明：

{
"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, //自动跳过未映射到源代码的代码
}

单个JS调试

添加如下配置到launch.json 选择test.js F5 debug模式运行

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

}

项目调试

安装插件：Debugger for Chrome

配置launch.json

{ "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/*", } }
配置debug命令

{ "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.+" } } } ] }
运行launch project dbug 命令