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

👋本文接着前端必须知道的开发调试知识（上）继续总结，分为部分：1. 移动端H5调试 2. Nodejs调试 3. 常用开发调试技巧

移动端H5调试

😁 真机调试 | 代理调式 | 常用工具

真机调试

ios

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

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

Android

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

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

使用代理工具调试

原理

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

以Charles为例

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

常用代理工具

Charles：适合查看、控制网络请求，分析数据（功能比较强大、常用、收费😁）
spy-debugger：远程调试手机贞面，抓包
Fiddler：与Charles 类似，适合windows平台
Whistle：基于Node实现的跨平台Web调试代理工具

Nodejs调试

Inspector Protocol+Chrome Devtool

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

2. chrome 浏览器访问服务

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

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

Inspector Protocol+VS Code

VS Code 点击运行
添加配置
启动调试
添加断点，再去访问服务
查看变量、堆栈

常用开发调试技巧

线上即时修改Overrides

打开Sources面板下的的Overrides
点击Select folders for Overrides。选择一个本地的空文件夹目录。
允许授权
在page中修改代码，修改完成后command+s保存
打开devTools，点击右上角的三个小点->More tools->Changes，就能看到所有修改了

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

如果我们使用webpack，里面有一个devServe，可以用devServe的相关配置做代理（实际上是启用node服务器，在里面做了转化），也可以用代理工具做到同样的效果

启用本地 Source map

线上不存在Source Map时，可以使用Map Local 网络映射功能来访问本地的 Source Map 文件。（使用代理工具）

配置好后，打开网页运行调试代码就可以看到没有被压缩的代码了

使用代理工具Mock 数据（常用）

😅 后端还没有准备好接口，但前端需要一些数据去渲染，这时候我们可以自己先 Mock ，Mock 开发完成之后再换成真实的数据

右键选中要mock 数据的接口，选择save response，保存文件到本地。
本地打开保存的文件，编辑想mock的数据并保存。
右键选中第一步的接口，选择Map Local，Local Path 选择第二步的文件。

小黄鸭调试大法

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

前端必须知道的开发调试知识（下）｜ 青训营笔记