「Web调试技术之PC端调试」 | 青训营笔记

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

在程序员的世界中，BUG 一词相信大家再熟悉不过了，作为一名前端，你应该掌握哪些开发调试知识。

Bug的产生

Debug

前端Debug的特点：

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

Chrome Devtools

Elements、Console、Source、Performance、Network

动态修改元素和样式

• 点击.cls开启动态修改元素的class
• 输入字符串可以动态的给元素添加类名
• 勾选/取消类名可以动态的查看类名生效效果
• 点击具体的样式值（字号、颜色、宽度高度等)以进行编辑，浏览器内容区域实时预览
• Computed下点击样式里的箭头可以跳转到styles面板中的css规则

强制激活伪类的两种方法：

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

Console（控制台）

左侧可以选择等级, 对日志进行分类查看

• console.log.

• console.warn

• console.error

• console.debug

• console.info

• console.table

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

• console.dir

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

• 占位符

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

Sorce Tab

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

区域2∶代码预览区域

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

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

区域4:断点调试器

NetWork

• 区域1:控制面板
• 区域2:过滤面板
• 区域3:概览区域
• 区域4: Request Table面板
• 区域5:总结面板
• 区域6:请求详情面板

Application

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

• Local Storage
• Session Storage
• lndexedDB
• Web SQL
• Cookie

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

Performance

区域1:控制面板

区域2:概览面板

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

区域3:线程面板

• Frames:帧线程
• Main:主线程，负责执行Javascript,解析HTML/CSs,完成绘制
• Raster: Raster线程，负责完成某个layer或者某些块(tile)的绘制。

区域4:统计面板