Chrome调试工具
箭头 & Elements
箭头: 用于在页面选择一个元素来审查和查看它的相关信息。
Elements 内容:
- 样式
- 计算属性
- 事件监听
将Ancestors和Framework Listeners两个checkbox取消选中可以看到 选择dom绑定的事件。
- DOM breakpoints
- 在Chrome开发者工具里,选中想要监控的DOM元素,点击右键,选择Break on->Attributes modifications:
- 从调试器的调用上下文能了解到是上图第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 命令