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.+"
                    }
                }
            }
        ]
    }
  • 运行launch project dbug 命令
...全文
259 6 收藏 2
写回复
2 条回复
切换为时间正序
请发表友善的回复…
发表回复

专业

回复
IMCoCo1 秀才 09-10

厉害了

回复
相关推荐
发帖
Gauss松鼠会
创建于2021-07-06

500

社区成员

汇集数据库的爱好者和关注者,大家共同学习、探索、分享数据库前沿知识和技术,像松鼠一样剥开科学的坚果;交流Gauss及其他数据库的使用心得和经验,互助解决问题,共建数据库技术交流圈。
帖子事件
创建了帖子
2021-09-10 15:46
社区公告

欢迎大家同时关注Gauss松鼠会专家酷哥。

https://www.zhihu.com/people/ku-ge-78-98