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

前端开发调试之移动端调试

真机调试

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 是由腾讯开发的一个轻量、可拓展、针对手机网页的前端开发者调试面板，专为手机 web 页面量身设计，帮助开发者更为便捷地进行开发调试工作

特性

查看日志（Logs）： console.log | info | error
查看网络（Network）请求：XMLHttpRequest，Fetch，sendBeacon
节点（Element）：HTML 节点树
存储（Storage）：Cookies，LocalStorage，SessionStorage
手动执行 JS 命令行
自定义插件

使用代理工具调试

常用的代理工具：

Charles、Fiddler、spy-debugger、Whistle等

原理：

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

以 Charles 为例：

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

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

NodeJS 调试

Inspector Protocol+Chrome Protocol

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

用 VSCode 运行调试

常用开发调试技巧

线上即时修改 Overrides

位于 sources 面板下的 Overrides

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

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

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

浏览器向代理服务器发起请求，代理服务器转发请求与响应

启用本地sourceMap

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

使用代理工具Mock数据

后端没有 mock 数据的时候可以自己模拟

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

小黄鸭调试大法

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

前端开发调试之移动端调试 | 青训营笔记