Web调试技术（移动端） | 青训营笔记

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

一、本堂课重点内容：

1. 移动端H5调试
2. NodeJS调试
3. 常用开发调试技巧

二、详细知识点介绍：

2.1 移动端H5调试

真机调试

🌟IOS

1．使用Lightning 数据线将 iPhone与Mac 相连

2．iPhone 开启 Web 检查器（设置-＞Safari-＞高级—＞开启Web 检查器）

3．iPhone 使用 Safari 浏览器打开要调试的页面

4．Mac 打开 Safari 浏览器调试（菜单栏→开发—＞iPhone 设备名—＞选择调试页面）

5．在弹出的Safari Developer Tools 中调试

🌟Android

1．使用USB数据线将手机与电脑相连

2．手机进入开发者模式，勾选USB调试，并允许调试

3．电脑打开 Chrome 浏览器，在地址栏输入：chrome：／inspect／＃devices 并勾选 Discover USB devices 选项

4．手机允许远程调试，并访问调试页面

5．电脑点击 inspect 按钮

6．进入调试界面

VConsole

使用代理工具调试

原理：

• 电脑作为代理服务器

• 手机通过HTTP 代理连接到电脑

• 手机上的请求都经过代理服务器

以Charles为例：

1．安装 Charles

2．查看电脑IP和端口

3．将IP、端口号填入手机HTTP代理

4．Charles 允许授权

5．使用SwitchHosts！软件给 Mac 电脑配 Hosts

6．手机访问开发环境页面

常用代理工具

2.2 Node.JS调试

执行命令：node --inspect=8888 index.html

chrome浏览器访问服务

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

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

2.3 常用的开发调试技巧

线上及时修改Overrides

1．打开 Sources 面板下的的Overrides

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

3．允许授权

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

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

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

启用本地source map

使用代理工具Mock数据

三、引用参考：

• 课程课件
• ……