这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
以下为今日课上笔记内容
前端必须知道的开发调试知识
一.Bug与 Debug
1.Bug的产生
2.前端 Debug的特点 1）多平台
- 浏览器、Hybrid、NodeJs、小程序、桌面应用等
2）多环境
- 本地开发环境、线上环境
3）多工具
- Chrome devTools、Charles、Spy-Debugger、Whistle、VConsole
4）多技巧
- Console、BreakPoint、sourceMap、代理等
二.Chrome DevTools
1.动态修改元素和样式
- 点击 cls 开启动态修改元素的 class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
- Computed 下点击样式里的箭头可以跳转到 styles面板中的 css 规则
可以用以下 2 种方式强制激活伪类
- 选中具有伪类的元素，点击: 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: 数字占位符
可以选择等级，对日志进行分类查看
区域1: 页面资源文件目录树
区域2: 代码预览区域
区域3: Debug 工具栏
从左到右依次为
- 暂停 (继续)
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活 (关闭)所有断点代码执行异常处自动
区域4: 断点调试器
1）BreakPoints Watch
- 使用关键字 debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标 hover 变量可以查看变量的值
- 在调试器 Watch 右侧点击 +可以添加对变量的监控，查看该变量的值
2）Scope 与 Call Stack
展开 Scope 可以查看作用域列表(包含闭包)
展开 Call Stack 可以查看当前javaScript 代码的调用栈
- 关于调用栈可以参考developer.mozilla.org/en-US/docs/… stack
压缩后的代码如何调试?
前端代码天生具有“开源”属性，出于安全考虑，上线之前 JavaScript 代码通常会被压缩，压缩后的代码只有一行，变量使用“a、"b” 等替换，整体变得不可阅读。那么压缩后的代码如何调试呢?
3)Source Map
mappings 字段存储了源文件和Source Map 的映射
- 英文，表示源码及压缩代码的位置关联
- 逗号，分隔一行代码中的内容。
- 分号，代表换行。
映射见
source Map 标准
4）NetWork
区域1: 控制面板
区域2: 过滤面板
区域3: 概览区域
区域4: Request Table 面板
区域5: 总结面板
区域6: 请求详情面板
5）Application
Application 面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
点击左侧 Application 下的Stroage 面板中的 Clear Site Data可以清楚网页的本地存储数据
6）Performance
区域1: 控制面板
区域2: 概览面板
- FPS:每秒顿数
- CPU:处理各个任务花费的时间
- NET:各个请求花费时间
区域3: 线程面板
- Frames :帧线程
- Main:主线程，负责执行Javascript,解析HTML/CSs,完成绘制
- Raster: Raster线程，负责完成某人layer或者某些块(tile)的绘制。
区域4: 统计面板
Performance 运用 示例
googlechrome.github.io/devtools-sa…
7)Lighthouse
三.移动端 H5.调试
1.真机调试
ios
1）使用 Lightning 数据线将 iPhone 与 Mac 相连
2）iPhone 开启 Web 检查器 (设置 -> Safari -高级 -> 开启 Web 检查器
3）iPhone 使用 Safari 浏览器打开要调试的页面
4）Mac 打开 Safari 浏览器调试(菜单栏-> 开发> iPhone 设备名-> 选择调试页面
5）在弹出的 Safari Developer Tools 中调试
Android 1）使用 USB 数据线将手机与电脑相连
2）手机进入开发者模式，勾选 USB 调试，并允许调试
3）电脑打开 Chrome 浏览器，在地址栏输入: chrome://inspect/#devices 并勾选 Discover USB devices 选项
4）手机允许远程调试，并访问调试页面
5）电脑点击 inspect 按钮
6）进入调试界面
直接使用手机扫码查看，体验更佳
2.VConsole
- 日志(Logs):console.loginfoerror
- 网络(Network):XMLHttpRequest,etch,sendBeacon
- 节点(Element): HTML 节点树
- 存储(Storage): Cookies, LocalStorage,SessionStorage
- 手动执行 JS 命令行
- 自定义插件
3.使用代理工具调试
原理
- 电脑作为代理服务器
- 手机通过 HTTP 代理连接到电脑
- 手机上的请求都经过代理服务器
以 Charles 为例
1）安装 Charles
2）查看电脑IP 和 端口
3)将IP、端口号填入手机 HTTP 代理
4)Charles 允许授权
5)使用 SwitchHosts!软件给 Mac 电脑配 Hosts
6)手机访问开发环境页面
4.代理工具
四.Nodejs 调试
1.Inspector Protocol + Chrome Devtool
2.Inspector Protocol + VS Code
VS Code 点击运行
添加配置
启动调试
添加断点
查看变量、堆栈
五.常用开发调试技巧
1.线上即时修改Overrides
1)打开 Sources 面板下的的Overrides
2）点击 Select folders forOverrides。选择一个本地的空文件夹目录。
3)允许授权
4）在 page 中修改代码，修改完成后 command +s 保存
5）打开 devTools，点击石上角的三个小点 -> More tools -> Changes，就能看到所有修改了
2.利用代理解决开发阶段的跨域问题
3.启用本地-source map
线上不存在 Source Map 时可以使用 Map Local 网络映射功能来访问本地的 SourceMap 文件。
4.使用代理工具 Mock 数据
1）右键选中要 mock 数据的接口，选择save response，保存文件到本地。
2）本地打开保存的文件，编辑想mock 的数据并保存。
3）右键选中第一步的接口，选择Map Local，Local Path 选择第二步的文件。
5.小黄鸭调试大法
传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌 上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快 就将问题定位修复了。
