这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天

本篇文章主要讲述了PC 端和移动端的开发调试。重点讲述了开发调试的方法和常用的工具。

一、Bug与Debug

1.Bug的产生

2.前端Debug的特点

• 多平台：浏览器、Hybrid、 Nodels、 小程序、桌面应用等。
• 多环境：本地开发环境、线上环境。
• 多工具：Chrome devTools、Charles、 Spy-Debugger、Whistle、vConsole等。
• 多技巧：Console、BreakPoint、sourceMap、代理等。

二、Chrome DevTools

1、动态修改元素和样式

• 点击.cls开启动态修改元素的class

• 输入字符串可以动态的给元素添加类名

• 勾选/取消类名可以动态的查看类名生效效果

• 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览

• Computed下点击样式里的箭头可以跳转到styles面板中的css规则

可以用以下两种方式强制激活伪类： 第一种：选中具有伪类的元素，点击: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

区域一：页面资源文件目录树

区域二：代码预览区域

区域三：Debug工具栏

• 从左到右依次为
• 暂停（继续）
• 单步跳过
• 进入函数
• 跳出函数
• 单步执行
• 激活（关闭）所有断点
• 代码执行异常处自动

区域四：断点调试器

Break Point与Watch

• 使用关键字debugger 或代码预览区域的行号可以设置断点

• 执行到断点处时代码暂停执行

• 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点

• 暂停状态下，鼠标 hover变量可以查看变量的值

• 在调试器Watch右侧点击＋可以添加对变量的监控，查看该变量的值

Scope 和 Call Stack

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

Source Map

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

这里可以用Source Map调试，下面介绍一下Source Map：

• mappings字段存储了源文件和Source Map的映射：英文，表示源码及压缩代码的位置关联；逗号，分隔一行代码中的内容；分号，代表换行。

4.NetWork

NetWork由下面几个区域组成：

• 区域1:控制面板
• 区域2:过滤面板
• 区域3:概览区域
• 区域4: Request Table面板
• 区域5:总结面板
• 区域6:请求详细面板

5.Application

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

• Local Storage
• Session Storage
• IndexedDB
• Web SQL
• Cookie

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

6.Performance

Performance由下面几个区域组成：

• 区域1：控制面板

• 区域2：概览面板

  FPS：每秒帧数

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

  NET：各个请求花费时间

• 区域3：线程面板

  Frames：帧线程

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

  Raster：Raster线程，负责完成某个layer或者某些块（tile）的绘制

• 区域4：统计面板

7.Lighthouse

下面对核心Web指标进行介绍：

Largest Contentful Paint (LCP) :最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。

First Input Delay (FID) :首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。

Cumulative Layout Shift (CLS):累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少。

三、移动端H5调试

1.真机调试

ISO

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

注意：没有iPhone设备可以在Mac AppStore安装Xcode使用其内置的iOS模拟器

Andriod

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

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

2.VConsole

• 日志(Logs) :console. log|info|error|..
• 网络(Network): XMLHttpRequest,Fetch, 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

执行命令 node --inspect=8888 index.js

chrome浏览器访问服务

点击绿色 node 图标打开 node 调试面板（在chrome://inspect/#devices中配置network target）

在node调试面板中使用断点调试

2.Inspector Protocol + VS Code

1. VS Code点击运行
2. 添加配置
3. 启动调试
4. 添加断点
5. 查看变量、堆栈

五、常用开发调试技巧

1.线上即时修改Overrides

1. 打开Sources面板下的的Overrides
2. 点击Select folders for Overrides。选择一个本地的空文件夹目录
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选择第二步的文件。

五、总结

今天通过对开发调试知识的学习，我对开发调试有了基本的了解，学会了使用一些开发工具进行开发调试，对开发调试的流程也大体上有了一个认识，同样通过学习，我发现PC端和移动端调试的区别，在PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性。这点在以后开发中也是我们需要注意的地方。