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

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

三、移动端H5调试

01 真机调试

ios

1.使用Lightning 数据线将iPhone与Mac相连
2.iPhone开启web检查器（设置-> Safari ->高级->开启Web检查器)
3.iphone使用 Safari 浏览器打开要调试的页面
4.Mac打开 Safari浏览器调试(菜单栏—一>开发-> iPhone 设备名->选择调试页面)
5.在弹出的Safari Developer Tools中调试

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

Android

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

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

02 VConsole

日志(Logs): console.log|info|error..
网络(Network):XMLHttpRequest,Fetch, sendBeacon
节点(Element): HTML节点树
存储(Storage):Cookies,LocalStorage,SessionStorage
手动执行JS命令行
自定义插件

03 使用代理工具调试

原理:

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

以Charles为例:

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

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

四、NodejS 调试

01 Inspector Protocol + Chrome Devtool

02 Inspector Protocol +vsCode

五、常用开发调试技巧

01 线上即时修改Overrides

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

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

03 启用本地source map

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

04 使用代理工具Mock数据

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