前端调试技巧

举报
前端小盆友 发表于 2021/02/25 20:15:15 2021/02/25
【摘要】 Chrome调试工具 箭头 & Elements 箭头: 用于在页面选择一个元素来审查和查看它的相关信息。 Elements 内容:样式计算属性事件监听将Ancestors和Framework Listeners两个checkbox取消选中可以看到 选择dom绑定的事件。DOM breakpoints在Chrome开发者工具里,选中想要监控的DOM元素,点击右键,选择Break on->A...

Chrome调试工具

image.png

箭头 & Elements

箭头: 用于在页面选择一个元素来审查和查看它的相关信息。
Elements 内容:
  • 样式
    image.png

  • 计算属性
    image.png

  • 事件监听

将Ancestors和Framework Listeners两个checkbox取消选中可以看到 选择dom绑定的事件。

image.png

  • DOM breakpoints

  • 在Chrome开发者工具里,选中想要监控的DOM元素,点击右键,选择Break on->Attributes modifications:
    image.png

  • 之后在DOM Breakpoints的tab里能看到对应的断点

  • 然后回到Chrome里鼠标悬停百度一下,Chrome开发者工具的调试器就会自动在DOM的属性发生变化的地方停下来:
    image.png

  • 从调试器的调用上下文能了解到是上图第118行的className 改变了导致DOM断点的触发。

  • Properties

改选项卡里面可以看到 选择dom对象,及类的继承链。
image.png

设备模拟器

模拟移动屏幕,或者一些其它的像素比例的屏幕。
image.png

Console控制台

控制台打印, 执行脚本。
image.png

Sources

image.png

NetWork

image.png

Performance

image.png

Memory: 内存快照

image.png

Vscode内代码调试

调试环境配置

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

参数说明:

{
"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

image.png

  • 配置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 命令
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。