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 命令