这是我参与「第四届青训营」笔记创作活动的的第10天

一.bug

1-1.bug的产生

1-2.前端bug的特点

1）多平台：浏览器、nodejs、桌面应用

2）多环境：本地开发环境、线上开发环境

3）多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole

4）多技巧：Console、BreakPoint、SourceMap、代理

二.Chrome devtools

2-1.动态修改元素和样式

网页对应的元素、页面dom元素，可修改元素样式，可修改想要调试的样式和类名

2-2.console

对应的用来展示日志的界面

日志技巧：

console.log：正常日志，黑色

console.warn：在信息传递之前会打印出一个三角形的警告符号。

console.error：在信息传递前打印出一个危险符号。

console.debug：

console.info：提示信息

console.table：具象化展示json和数组数据，把传递给它的输入格式化为表格，然后在表格表示之后记录输入对象。

console.dir：通过类似文件树的方式展示dom中各种属性

2-3.sources

展示项目源代码

2-3-1.Break Point与watch

Break Point 是存放所有调试断点的列表，Watch 则是观察变量值的变化

2-3-2.Scope与Call Stack

展开 Scope 可以查看作用域列表（包含闭包）
展开 Call Stack 可以查看当前 javaScript 代码的调用栈

2-3-3.压缩后的代码如何调记？

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

2-3-4.Source Map

2-4.Network

2-5.Application

2-6.Performance

2-6-1.Performance运行实例

2-7.Liaghthouse

三.移动端H5调试

3-1.真机调试

iOS

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

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

Android

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

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

3-2.vconsole

3-3使用代理工具调试

原理

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

以 Charles 为例

安装 Charles
查看电脑 IP 和端口
将 IP、端口号填入手机 HTTP 代理
Charles 允许授权（默认情况下，Charles 无法抓取https的请求，需要安装证书）
使用 SwitchHosts！软件给 Mac 电脑配 Hosts
手机访问开发环境页面

3-4.常见代理工具

四.Nodejs调试

4-1.Inspector Protocol+Chrome Devtool

4-2.Inspector Protocol + VS Code

五.常用开发调试技巧

5-1.线上即时修改Overrides

我们平时在 Source 面板在线修改调试代码，会实时更新效果，但浏览器一刷新之前修改的全部恢复原样，这样子调试代码效率就很低，只能浏览器调试改点，代码跟着改点很麻烦。为了解决这个问题，我们可以使用 Overrides 保存线上修改后的文件，并能清晰看出改动了哪些地方，最后修改代码也方便。

5-2.运用代理解决开发阶段的跨域问题

5-3.启用本地Source Map

线上环境的代码是打包压缩的，且没有 source map 文件，排查定位问题不方便，这时可以使用 Charles，配置 Map Local，将线上环境代理到本地，运行本地文件，本地有 source map就能快速定位到问题啦。

5-4.使用代理mock数据

1.右键选中要mock数据的接口，选择save response，保存文件到本地

2.本地打开保存的文件，编辑想mock的数据并保存

3.右键选中第一步的接口，选择Map Local，Local Path选择第二步的文件

前端必须知道的开发调试知识 | 青训营笔记