前端必须知道的开发调试知识 | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第11天
1. BUG和DEBUG
（1）BUG的产生
（2）前端DEBUG的特点
- 多平台
- 多工具
- 多环境
- 多技巧
2. 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:数字占位符
(3)Sorce Tab
a.
b. Break Point 与 Watch
- 使用关键字 debugger 或 代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标 hover 变量可以查看变量的值
- 在调试器Watch 右侧点击+可以添加对变量的监控，查看该变量的值
c. 压缩后的代码如何调试？
前端代码天生具有“开源”属性，出于安全考虑，Ja avaScript 代码通常会被压缩，压缩后的代码只有一行，变量使用 'a'、'b'等替换，整体变得不可阅读。那么压缩后的代码如何调试呢?
Sorce Map
d. Net Work
e. Application
f. Performance
g. Lighthouse
3. 移动端H5调试
（1）真机调试
a. IOS
- 使用 Lightning 数据线将 iPhone 与 Mac 相连
- iPhone 开启 Web 检查器(设置-> Safari ->高级->开启 Web检查器)
- iPhone 使用 Safari 浏览器打开要调试的页面
- Mac 打开 Safari浏览器调试(菜单栏->开发->iPhone 设备名->选择调试页面)
- 在弹出的 Safari Developer Tools 中调试
没有iPhone 设备可以在Mac App Store 安装Xcode使用其内置的 iOs 模拟器
b. Android
- 使用USB 数据线将手机与电脑相连
- 手机进入开发者模式，勾选 USB 调试，并允许调试
- 电脑打开 Chrome 浏览器，在地址栏输入:chrome://inspect/#devices 并勾选 Discover USB devices 选项
- 手机允许远程调试，并访问调试页面
- 电脑点击inspect 按钮
- 进入调试界面
直接使用手机扫码查看，体验更佳
(2) VConsole
(3) 使用代理工具调试
原理:
- 电脑作为代理服务器
- 手机通过 HTTP 代理连接到电脑
- 手机上的请求都经过代理服务器
以Charles 为例:
- 安装 Charles
- 查看电脑IP 和 端口 到HTTPS 的请求，需要安装证
- 将IP、端口号填入手机 HTTP 代理 书。
- Charles 允许授权
- 使用 SwitchHosts!软件给 Mac 电脑配 Hosts
- 手机访问开发环境页面
默认情况下，Charles 无法抓取
4. Nodejs调试
（1）Inspector Protocol + Chrome DevTool
（2）Inspector Protocol + VS Code
5. 常用开发调试技巧
（1）线上即使修改Overrides
- 打开 Sources 面板下的的Overrides
- 点击 Select folders for Overrides。选择一个本地的空文件夹目录。
- 允许授权
- 在page 中修改代码，修改完成后command+s保存
- 打开devTools，点击右上角的三个小点->More tools ->Changes，就能看到所有修改了
(2)利用代理解决开发阶段的跨域问题
（3）启用本地 sorce map
线上不存在sorce map时可以使用Map Local映射功能来访问本地的Sorce Map 文件
（4） 使用代理工具Mock数据
- 右键选中要 mock 数据的接口，选择save response，保存文件到本地。
- 本地打开保存的文件，编辑想 mock 的数据并保存。
- 右键选中第一步的接口，选择Map Local,Local Path 选择第二步的文件。
课后总结
本节课学到了很多调试大法很实用！
