Web调试技术 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天

前端Debug

• 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用等
• 多环境：本地开发环境、线上环境
• 多工具：Chrome devTools、Charles、Spy-Debugger、Whictle VConsole
• 多技巧：Console、BreakPoint、sourceMap、代理等

Chrome DevTools

1. 动态修改元素和样式

• 点击.cls开启动态修改元素的class

• 输入字符串可以动态的给元素添加类名

• 勾选/取消类名可以动态的查看类名生效效果

• 点击具体的样式值（字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览

• Computed下点击样式里的箭头可以跳转到styles面板中的css规则

• 可以用以下2种方式强制激活伪类

  • 选中具有伪类的元素，点击:hov
  • DOM树右键菜单，选择Force State

3. Console

• console.log

• console.warn

• console.error

• console.debug

• console info

• console.table 具像化的展示JSON和数组数据

• console.dir 通过类似文件树的方式展示对象的属性

• 占位符 给日志添加样式，可以突出重要的信息 %s:字符串占位符;%o:对象占位符;%c:样式占位符;%d:数字占位符

5. Sorce table

• 区域1:页面资源文件目录树

• 区域2:代码预览区域

• 区域3: Debug工具栏从左到右依次为

  • 暂停（继续)
  • 单步跳过
  • 进入函数
  • 跳出函数
  • 单步执行
  • 激活(关闭）所有断点
  • 代码执行异常处自动

• 区域4

7. NetWork

• Application面板展示与本地存储相关的信息
• Local Storage
• Session Storage
• IndexedDB
• Web SQL
• Cookie

8. Application
9. Performance
10. Lighthouse

移动端H5调试

• 真机调试
• VConsole
• 代理工具调试

原理

电脑作为代理服务器，手机通过HTTP代理连接到电脑，手机上的请求都经过代理服务器

常用代理工具

• Charles：适合查看、控制网络请求，分析数据
• Fiddler：与Charles类似，适合windows平台
• spy-debugger：远程调试手机页面、抓包
• Whistle：基于Node实现的跨平台Web调试代理工具

Node.js调试

Inspector Protocol+Chrome Devtool

1. 执行命令：node --inspect=8888
2. chrome浏览器访问服务
3. 点击node打开node调试面板，在chrome://inspect/#devices 中配置network target
4. 在node调试面板中使用断点调试

Inspector Protocol+VS Code

• VS Code点击运行

• 添加配置

• 启动调试

• 添加断点

• 查看变量、堆栈