前端Debug的特点

• 多平台（浏览器、NodeJS、小程序、桌面应用...）

• 多环境（本地开发环境、线上环境）

• 多工具（Chrome devTools、Chaarles..）

• 多技巧（Console、BreakPoint、sourceMap、代理）

PC 端调试

开发者工具 devtools

元素 Element

动态修改元素和样式

点击 .cls 动态修改元素的 class ，输入字符串可以动态的给元素添加类名，勾选/取消类名可以动态的查看类名生效效果

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

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

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

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

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

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

  • 选中具有伪类的元素，点击:hov

  • DOM树右键菜单，选择Force State

控制台 Console

• console.log //用于输出普通信息

• console.info //用于输出提示性信息

• console.error //用于输出错误信息（红色）

• console.warn //用于输出警示信息（黄色）

• console.debug //用于输出调试信息（蓝色）

console 对象的上面5种方法，都可以使用 printf 风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。

源代码 Source

• 区域①：页面资源文件目录树

• 区域②：代码预览区域

• 区域③：Debug 工具栏，从左到右依次为

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

• 区域④：断点调试器

网络 Network

1. Controls 控制 Network 的外观和功能。
2. Filters 控制 Requests Table 具体显示哪些内容。
3. Overview 显示获取到资源的时间轴信息。
4. Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。
5. Summary 显示总的请求数、数据传输量、加载时间信息。

性能 Performance

• 区域①：控制面板

• 区域②：概览面板

  • FPS：每秒帧数
  • CPU：处理各个任务花费的时间
  • NET：各个请求花费的时间

• 区域③：线程面板

  • Frames：帧线程
  • Main：主线程，负责执行 JavaScript ，解析 HTML/CSS ，完成绘制
  • Raster：Raster 线程，负责完成某个 layer 或者某些块（tile）的绘制

• 区域④：统计面板

应用程序 Application

Application 面板展示与本地存储相关的信息

• Local Storage
• Session Storage
• IndexedDB
• Web SQL
• Cookie

点击左侧 Application 下的 Stroage 面板中的 Clear Site Data（清除网站数据） 可以清除网页的本地存储数据