---

前言

仅以此文章记录学习。

---

PC web端

一、 前端Debug的特点

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

二、 前端Debug的方式

1. 浏览器动态修改元素和样式

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

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

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

2. Console

• console.log：输出一条信息
• console.warn：输出警告信息，信息最前面加一个黄色三角
• console.error：输出错误信息到控制台
• console.debug：输出“调试”级别的消息
• console.info：输出一条信息
• console.table：具像化的展示 JSON 和 数组数据
• console.dir：通过类似文件树的方式展示对象的属性
• 占位符给日志添加样式，可以突出重要的信息%s: 字符串占位符，%o: 对象占位符: %c: 样式占位符，%d: 数字占位符

3. Sorce Tab

• 区域1: 页面资源文件目录树
• 区域2: 代码预览区域
• 区域3: Debug 工具栏

从左到右依次为

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

• 区域4: 断点调试器

4. NetWork

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

5. Application

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

• Local Storage 本地存储
• Session Storage 会话存储
• IndexedDB
• Web SQL
• Cookie
  

6. Performancee

可以通过这个工具去找到页面卡顿的原因

示例：https://googlechrome.github.io/devtools-samples/jank/

7. Lighthouse

怎么说呢。。优化神器

移动端调试

IOS

1. 使用 Lightning 数据线将 iPhone 与 Mac 相连
2. iPhone 开启 Web 检查器 (设置-> Safari ->高级-> 开启 Web 检查器)
3. iPhone 使用 Safari 浏览器打开要调试的页面
4. Mac 打开 Safari 浏览器调试 (菜单栏一>开发>iPhone 设备名-> 选择调试页面)
5. 在弹出的 Safari Developer Tools 中调试

没有 iPhone 设备可以在 Mac Appstore 安装 Xcode 使用其内置的ios 模拟器

Android

1. 使用 USB 数据线将手机与电脑相连
2. 手机进入开发者模式，勾选 USB 调试，并允许调试
3. 电脑打开 Chrome 浏览器，在地址栏输入: chrome://inspect/#devices 并勾选 Discover USB devices 选项
4. 手机允许远程调试，并访问调试页面
5. 电脑点击 inspect 按钮
6. 进入调试界面

直接使用手机扫码查看，体验更佳

通过代理工具调试

原理:

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

常用代理工具：

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