前端必须知道的开发调试知识（二）

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

移动端 H5 调试

真机调试

• ios

  • 使用Lightning 数据线将iPhone与Mac相连
  • iPhone开启Web检查器(设置 -> Safari -> 高级 -> 开启Web检查器)
  • iPhone使用Safari浏览器打开要调试的页面
  • Mac打开 Safari浏览器调试(菜单栏 -> 开发 -> iPhone设备名 -> 选择调试页面)
  • 在弹出的Safari Developer Tools中调试
  • 没有iPhone设备可以在Mac AppStore安装Xcode使用其内置的ios模拟器

• Android

  • 使用USB数据线将手机与电脑相连
  • 手机进入开发者模式。勾选USB调试。并允许调试
  • 电脑打开Chrome浏览器，在地址栏输入: chrome://inspect/1devices并勾选Discover USB devices选项
  • 手机允许远程调试，并访问调试页面
  • 电脑点击inspect 按钮8622
  • 进入调试界面
  • 一般不推荐，直接使用手机扫码查看体验更佳

• VConsole -

使用代理工具调试

• 原理

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

• 以Charles为例

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

常用代理工具

Nodejs调试

Inspector Protocol+Chrome Devtool

Inspector Protocol + VS Code

常用开发调试技巧

线上及时修改Override

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

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

• 浏览器本身有一个 同源策略 ，不同源的请求会产生跨域问题，即协议、ip、端口号这三者有任何一个不同,就会产生跨域问题

启用本地source map

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

使用代理mock数据

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

小黄鸭调试大法！

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