前端开发必须知道的开发调试知识
这是我参与「第四届青训营 」笔记创作活动的的第 10 天💪💪💪
前端 Debug 的特点
- 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用等
- 多环境：本地开发环境、线上环境
- 多工具：Chrome devTools、Charles...
- 多技巧：Console、Breakpoint、sourceMap、代理等
Chrome DevTools
Elements
动态修改元素的样式和格式
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>样式</title>
<style>
.box {
border: 2px solid black;
}
.box:hover {
box-shadow: 10px 5px 5px gray;
}
.small {
width: 100px;
height: 100px;
}
.big {
width: 200px;
height: 200px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.radius {
border-radius: 10px;
}
</style>
</head>
<body>
<div>
<div class="box small red"></div>
<div class="box big green"></div>
</div>
</body>
</html>
- 点击 .cls 开启动态修改元素的 class
- 输入字符串可以动态地给元素添加类名
- 勾选/取消类名可以动态地查看类名生成效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
可以用一下两种方式强制激活伪类：
- 选中具有伪类等元素，点击 :hov
- DOM 树右键菜单，选择 Force State
其他有趣操作：
点击 body 标签右键 capture node screenshot 可以获取网页的截屏
Console
示例代码：
console.log('Welcome to ByteDance!')
console.warn('Welcome to ByteDance!')
console.error('Welcome to ByteDance!')
console.debug('Welcome to ByteDance!')
console.info('Welcome to ByteDance!')
console.log('%s %o,%c%s', 'hello', {name: 'tom', age: 18}, 'font-size: 24px;color:red', 'Welcome to ByteDance!')
const goods = [
{
name: 'apple',
count: 300,
price: 10
},
{
name: 'banana',
count: 110,
price: 4
},
{
name: 'orange',
count: 30,
price: 7
}
]
左侧可以选择等级，对日志进行分类查看
-
console.log
打印一条日志
-
console.warn
打印一条警告
-
console.error
打印一条错误
-
console.debug
-
console.info
-
console.table
具像化地展示 JSON 和数组数据
-
console.dir
通过类似文件树的方式展示对象的属性
-
占位符
给日志添加样式，可以突出重要的信息
占位符 作用 %s 字符串占位符 %o 对象占位符 %c 样式占位符 %d 数字占位符
Sources
展示项目的源代码
Watch 与 Breakpoints
- 使用关键字 debugger 或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标 hover 变量可以查看变量的值
- 在调试器 Watch 右侧点击 + 可以添加对变量的监控，查看该变量的值
Scope 与 Call Stack
- 展开 scope 可以查看作用域列表（包含闭包）
- 展开 call stack 可以查看当前 JavaScript 代码的调用栈
Source Map
前端代码天生具有“开源”特性，出于安全考虑，JavaScript 代码通常会被压缩，压缩后的代码只有一行，变量使用 'a' 、'b' 等替换，整体变得不可阅读。
mappings 字段存储了源文件和 Source Map 的映射
英文，表示源码及压缩代码的位置关联
逗号，分隔一行代码中的内容
分号，代表换行
Network
Application
Application 面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexDB
- Web SQL
- Cookie
Performance
demo 链接 googlechrome.github.io/devtools-sa…
- 页面卡顿
- 查看 FPS 指标
- 寻找性能瓶颈
- 优化代码
Lighthouse
移动端 H5 调试
真机调试
VConsole
代理工具
NodeJS 调试
Inspector Protocol + Chrome Devtool
Inspector Protocol + VS Code
- VS Code 点击运行
- 添加配置
- 启动调试
- 添加断点
- 查看变量、堆栈
常用开发调试技巧
线上即时修改 Overrides
- 打开 Sources 面板下的 Overrides
- 点击 Select folders for Overrides，选择一个本地的空文件夹目录
- 允许授权
- 在 page 中修改代码，修改完成后 ⌘ + S 保存
- 打开 devTools，点击右上角的三个小点->More tools->Changes，就可以看到所有修改
