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

一、本堂课重点内容

• 真机调试
• NodeJS调试
• 常用调试技巧

二、详细知识点介绍

真机调试

iOS

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

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

Android

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

可以直接使用手机扫码查看

VConsole工具

一个轻量、可拓展、针对手机网页的前端开发者调试面板。

vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。

现在 vConsole 是微信小程序的官方调试工具。

使用代理工具调试

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

如Charles，默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书。

还有Fiddler、spy-debugger、Whistle等

NodeJS调试

Inspector Protocol+Chrome Protocol

• 执行node --inspect=8888 index.js
• Chrome浏览器访问服务localhost:8888
• 点击绿色node图标打开node调试面板（在chrome://inspect/#devices中配置network target）
• 在node调试面板中使用断点调试

然后使用Chrome的Devtools进行调试。

用VSCode也可以。

常用开发调试技巧

线上即时修改Overrides

位于sources面板下的Overrides

• 点击select folders for overrides，选择一个空的本地文件夹
• 允许授权
• 在page中修改代码，修改完成后保存
• 打开devtools，点击右上角的三个点-more tools-changes即可看到所有修改

现代开发一般使用热更新，而不再使用这种方式。

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

本地开发时key通过设置代理解决浏览器跨域无法访问的问题，部署上线时一般通过Nginx配置解决跨域问题。

启用本地sourceMap

部署上线时不会部署sourceMap，可以设置代理启用本地的sourceMap，在代理工具中设置，若是访问远程的sourceMap，则映射到本地的sourceMap。

使用代理工具Mock数据

后端没有mock数据的时候可以通过前端模拟。

在Charles工具中：

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

三、课后个人总结

本节课学习了移动端前端调试的方式，NodeJS调试方式和常用开发调试技巧。当前的前端开发不仅要适配PC端页面，还要适配移动端页面，以满足多种用户的需求，同时随着JS全栈技术的兴起，NodeJS的调试也至关重要。本节课还介绍了几种常用开发调试技巧，是实际工程实践过程中的重要经验，值得之后继续学习研究。

四、参考链接

vConsole: 一个轻量、可拓展、针对手机网页的前端开发者调试面板 (gitee.com)

‍​⁢⁢⁡‍⁢⁣⁢‬​​​⁡‌‍​‬‬⁤⁤​⁢⁢⁤‍⁤⁤⁤⁤‌‬​⁣‬​‌⁣⁡⁣⁣‍‍‬‌前端必须知道的开发调试知识.pptx - 飞书云文档 (feishu.cn)