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

前端必须知道的开发调试知识

01Bug 与Debug

First bug：First actual case of bug begin foundFirst actual c begin found.

01-2 前端 Debug 的特点

01.多平台

浏览器、Hybrid、NodeJs、小程序、桌面应用等

02.多环境

本地开发环境、线上环境

03.多工具

Charles、Spy-Debugger、 Chrome devTools、 Whistle、vConsole

04.多技巧

Console、BreakPoint、sourceMap、代理等

02 Chrome DevTools

1.元素-Elements

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

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

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

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

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

激活伪类：

选中具有伪类的元素，点击：hov

DOM树右键菜单，选择Force State（强制执行状态）

2.Console

console.log 打印普通日志

console.warn 打印警告

console.error 打印错误

console.debug 打印debug

console.info

console.table

具象化的展示 JSON 和数组数据

console.dir

通过类似文件树的方式展示对象的属性

占位符

给日志添加样式，可以突出重要的信息

%s:字符串占位符；%o:对象占位符；%c：样式占位符；%d：数字占位符

3.Sorce Tab

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

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

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

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

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

区域4：

Scope（作用域）：

展开 Scope 可以查看作用域列表

Call Stack （调用堆栈）：

展开 Call Stack 可以查看当前JavaScript代码的调用栈

XHR/fetch breakpoints （XHR/提取断点）：

发送请求时添加断点

DOM breakpoints

4.压缩后的代码如何进行调试？

前端代码天使具有“开源”属性，出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用‘a','b'等替换，整体变得不可阅读。

Source Map：

mappings 字段储存了源文件和 Source Map 的映射

英文，表示源码及压缩代码的位置关联逗号，分隔一行代码中的内容

5.NetWork

6.Performance

03.移动端H5调试

iOS ：

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

Android：

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

VConsole：

日志（Logs）
网络（Next work）
节点（Element）
储存（Storage）
手动执行JS命令行
自定义插件

使用代理工具调试：

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

以Charles 为例：

安装 Charles
查看电脑IP 和端口
将IP、端口号填入手机 HTTP 代理
Charles 允许授权
使用 SwitchHosts！软件给Mac电脑配Hosts
手机访问开发环境页面

04.Node.js 调试

05.常用开发调试技巧

线上即时修改 Overrides

1.打开 Sources 面板下的 Overrides

2.点击 Select folders for Overrides。选择一个本地的空文件夹目录

3.允许授权

4.在 page 中修改代码，修改完成后 command + s 保存

5.打开 devTools ，点击右上角的三个小点 - More tools - Changes，就能看到所有修改了

利用代理解决开发阶段的跨域问题

启用本地 source map

线上不存在 Souce Map 时可以使用 Map Local 网络映射功能来访问本地的 Source Map 文件。
使用代理工具 Mock 数据
1. 右键选中要 mock 数据的接口，选择 save response，保存文件到本地
2. 本地打开保存的文件，编辑想 mock 的数据并保存
3. 右键选中第一步的接口，选择 Map Local，Local Path 选择第二步的文件。
小黄鸭调试大法

传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌面上放这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。

--《程序员修炼之道》

Web 调试技术 | 青训营笔记