这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天，今天学习的是Web调试技术，将学习的内容记录下来，以便时时巩固记忆。

主要学习内容

• PC端调试技术
• 移动端调试技术

Bug与Debug

前端Debug的特点：

1. 多平台：可以在浏览器、Hybrid、NodeJS、小程序、桌面应用上进行。
2. 多环境：本地开发环境和线上环境都可以。
3. 多工具：Chrome devTools、Charles、Spy-Debugger等。
4. 多技巧：Console、BreakPoint、代理等。

Chrome DevTools

Element:

动态修改元素和样式

非伪类： 通过点击.cls来对类的样式值包括字号、颜色、宽度高度等进行编辑。

伪类： 伪类需要激活，可以用以下两种方式强制激活伪类。 选中具有伪类的元素，点击：hov DOM树右键菜单，选择Force State

Console:

console.table: 具象化的展示JSON和数组数据。

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

占位符： 给日志添加样式，可以突出重要的信息。

Scope与Call Stack：

展开Scope可以查看作用域列表（包含闭包）。

展开Call Stack可以查看当前javaScript代码的调用栈。

移动端H5调试

使用代理工具调试：

原理：

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

以Charles为例：

• 安装Charles
• 查看电脑IP和端口
• 将IP、端口号填入手机HTTP代理
• Charles允许授权
• 使用SwitchHosts!软件给Mac电脑配Hosts
• 手机访问开发环境页面

常用的开发调试技巧

• 线上及时修改Overrides。
• 利用代理解决开发阶段的跨域问题。
• 启用本地source map：线上不存在Source Map时可以使用Map Local网络映射功能来访问本地的Source Map文件。
• 使用代理工具Mock数据。

今天的内容就写到这里，因为对前端调试了解的不是很多，后续通过学习再补充相关知识。