Chrome的前端调试技巧分享

GaussDB数据库举人 2021-09-10 15:46:53

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.+"
                }
            }
        }
    ]
}