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

封幽清
167 阅读3分钟

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

一、本节课重点内容

在学习完 PC 端调试的内容之后后，我们将会进一步的学习前端开发的移动端调试，通过对理论详细拆解，我们逐步剖析在移动端调试中，真机与代理调试的过程步骤，并在课程最后学习与拓展有关常用工具的推荐的内容。

课程重点内容归纳总结如下所示：

  1. 真机调试
  2. 代理调试
  3. 常用工具

二、详细知识点介绍

真机调试 ios

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

Android

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

代理工具调试 原理:电脑作为代理服务器，手机通过HTTP代理连接到电脑

手机上的请求都经过代理服务器，以Charles 为例:

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

配置1：map remote setting 远程代理，把我们的资源代理到远程某个地方 image.png 配置2：map local setting 本地代理，把我们的资源代理到本地 image.png

常用的工具： image.png node的调试方式 1：浏览器调试 image.png 在浏览器的方式启动调试命令，打开浏览器，访问服务，打开调试面板（打开服务），返回到服务，打开，进行日志和断点调试，添加一个断点，继续执行。 node的调试方式 2： vscode调试 在vs界面运行，启动代码调试，添加断点，再启动服务。

  • VS Code点击运行
  • 添加配置
  • 启动调试
  • 添加断点
  • 查看变量、堆栈

线上即时修改Overrides：

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

image.png 使用代理工具mock数据： image.png

向别人解释代码也可以(推荐).

三、总结

本次课程我学到了各种移动端调试的方法，这些方法的使用打开了我的思路，从各方面入手，来对开发进行完善与优化，效率也大大的提升。

avatar
文章
阅读
粉丝