前端必须知道的开发调试知识 | 青训营笔记今天学习了开发调试的一些知识点 1. Bug 与 Debug 1.1 Bu

这是我参与【第四届青训营】笔记创作活动的第 8 天，今天学习了 开发调试 的一些知识点

1. Bug 与 Debug

1.1 Bug 的产生

第一个Bug

First actual case of bug beging foundFirst actual c being found

bug or feature

That's not a bug, it's a feature request

Node Code, No Bug

1.2 前端 Debug 的特点

多平台

浏览器、Hybrid、NodeJs、小程序、桌面应用......
多环境

本地开发环境、线上环境
多工具

Chrome devTools、Charles、Spy-Debugger、Whistle、VConsole......
多技巧

Console、BreakPoint、SourceMap、代理 ......

2. Chrome DevTools

2.1 动态修改元素和样式

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

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

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

DOM 树右侧菜单，选择 Force State

2.2 Console

console.log
console.warn
console.error
console.debug
console.info
console.table
- 具象化的展示 JSON 和数组数据
console.dir
- 通过类似文件树的方式展示对象的属性
占位符
- 给日志添加样式，可以突出重要的信息
- %s: 字符串占位符
- %o: 对象占位符
- %c: 样式占位符
- %d: 数字占位符

2.3 Sorce Tab

区域1

页面资源文件目录树

区域2

代理预览区域

区域3

Debug 工具栏，从左到右依次为

暂停（继续）

单步跳过

进入函数

跳出函数

单步执行

激活（关闭）所有断点

代码执行异常处自动

区域4

断点调试器

2.3.1 Break Point 与 Watch

使用关键字 debugger 或代码预览区域的行号可以设置断点
执行到断点处时代码暂停执行
展开 BreakPoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
暂停状态下，鼠标 hover 变量可以查看变量的值
在调试器 Watch 右侧点击 + 可以添加对变量的监控，查看该变量的值

2.3.2 Scope 与 Call Stack

展开 Scope 可以查看作用域列表（包含闭包）
- 闭包可以参考 👉 资料
展开 Call stack 可以查看当前 javaScript 代码的调用栈
- 关于调用栈可以参考 👉 资料

2.3.3 压缩后的代码如何调试

前端代码天生具有“开源”属性，出于安全考虑，JavaScript 代码通常会被压缩，压缩后的代码只有一行，变量使用'a','b'等替换，整体变得不可阅读。那么压缩后的代码如何调式呢？

Source Map

如图

mappings 字段存储了源文件和 Source Map 的映射

英文，表示源码及压缩代码的关键位置。

逗号，分隔一行代码中的内容。

分号，代表换行

映射见： 👉 资料

Source Map 标准： 👉 资料

思考题:

既然 Source Map 可以映射源码，那压缩后的代码不就又安全了吗？

2.3.4 NetWork

区域1：控制面板

区域2：过滤面板

区域3：概览区域

区域4：Requeset Table 面板

区域5：总结面板

区域6：请求详情面板

2.3.5 Application

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

localStorage
Session Storage
IndexedDB
Web SQL
Cookie

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

2.3.6 Performance

区域1：控制面板

区域2：概览区域

FPS：每秒帧数

CPU：处理各个任务花费的时间

NET：各个请求花费时间

区域3：现成面板

Frames:帧线程

Main：主线程，负责执行 JavaScript,解析 HTML / CSS，完成绘制

Raster：Raster 线程，负责完成某个 alyer 或者某些快（title）的绘制

区域4：统计面板

2.3.6.1 运用示例

页面卡顿 => 查看 FPS 指标 => 寻找性能瓶颈 => 优化代码

👉 项目地址

2.3.7 Lighthouse

核心 Web 指标

3. 移动端 H5 调试

3.1 真机调试

3.1.1 iOS

使用 Lightning 数据那将 iPhone 与 Mac 相连
iPhone 开启 Web 检查器（设置 -> Safari -> 高级 -> 开启 Web 检查器）
iPhone 使用 Safari 浏览器打开要调试的页面
Mac 打开 Safari 浏览器调试（菜单栏 -> 开发 -> iPhone 设备名 -> 选择调试页面）
在弹出的 Safari Developer Tools 中调试

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

3.1.2 Android

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