移动端真机调试

葡萄88
510 阅读7分钟

调试方法

Chrome调试

在chrome上既可以调试Android也可以调试IOS的网页内容,但是调试Android和IOS略微不同,IOS需要借用适配器才能在chrome中调试

注意:真机设备要保证和PC在同一局域网下

  • 打开chrome界面

chrome_inspect.png

  • 连接后调试掘金移动端界面

chrome_juejin.png

Android

  1. 在Android设备上，打开"设置" -> "关于手机" -> "软件信息"，然后连续点击"构建号"7次以启用"开发者选项"。
  2. 返回到"设置"菜单，你应该能看到一个新的"开发者选项"菜单。打开它，然后启用"USB调试"选项。
  3. 使用USB线连接你的Android设备和你的开发机。
  4. 在你的开发机上，打开Chrome浏览器，然后在地址栏输入 chrome://inspect并回车。
  5. 在"chrome://inspect/#devices"页面，你应该能看到你的Android设备和设备上打开的Chrome标签页列表。点击你想要调试的页面旁边的"inspect"链接。
  6. 此时，一个新的Chrome DevTools窗口会打开，你可以在这里进行调试。

IOS(安装RemoteDebug iOS Webkit Adapter适配器)

  1. 安装RemoteDebug iOS WebKit Adapter

    npm install -g remotedebug-ios-webkit-adapter

  2. 在你的iOS设备上，打开"设置" -> "Safari" -> "高级"，然后启用"Web检查器"。

  3. 使用USB线连接你的iOS设备和你的开发机。

  4. 在终端窗口中运行以下命令以启动RemoteDebug iOS WebKit Adapter

    remotedebug_ios_webkit_adapter --port=9000

  5. 打开Chrome浏览器，然后在地址栏输入 chrome://inspect并回车。

  6. 点击"Configure"按钮，然后在弹出的对话框中添加 localhost:9000，然后点击"Done"。

  7. 在"chrome://inspect/#devices"页面，你应该能看到你的iOS设备和设备上打开的Safari标签页列表。点击你想要调试的页面旁边的"inspect"链接。

  8. 此时，一个新的Chrome DevTools窗口会打开，你可以在这里进行调试

总结:

  • 优势：方便快捷，无需额外安装工具，可以模拟各种设备和视口尺寸，提供丰富的调试功能（如网络、性能、存储等）。
  • 劣势：模拟的环境可能与真实设备有所差异，不能完全替代真机测试

Safari调试(仅适用于MAC上调试ios)

iphone_dev_config.png

  1. 在你的iOS设备上，打开"设置" -> "Safari" -> "高级"，然后启用"网页检查器"。
  2. 使用USB线连接你的iOS设备和你的Mac。
  3. 在你的Mac上，打开Safari。
  4. 在Safari的"偏好设置"中，选择"高级"标签，然后在底部勾选"在菜单栏中显示'开发'菜单"。
  5. 打开"开发"菜单，你应该能看到你的iOS设备名。如果你的设备上有打开的Safari标签页，它们会在设备名下面的子菜单中显示。
  6. 选择你想要调试的标签页，此时，一个新的Web检查器窗口会打开，你可以在这里进行调试。 safari_debug.png

总结:

  • 优势：
    • 原生支持： Safari是Apple的产品，因此它对iOS设备有原生支持，可以提供最准确的调试环境。
    • 功能丰富： Safari的开发者工具提供了丰富的调试功能，包括元素检查、网络监控、性能分析、JavaScript调试等。
    • 无需额外安装： 如果你已经有了一个Mac和一个iOS设备，你不需要安装任何额外的软件就可以开始调试。
  • 劣势：
    • 平台限制： Safari只能在Mac上运行，这意味着如果你没有Mac，你就不能使用Safari进行调试。
    • 版本同步： 为了避免兼容性问题，你需要确保你的Mac上的Safari版本和你的iOS设备上的Safari版本相同或者接近。MAC版本过低也无法调试
    • 设备连接： 你需要使用USB线连接你的iOS设备和你的Mac，这可能会限制你的移动性。

vConsole、eruda等库调试

  1. 安装vConsole npm install vconsole

  2. 在你的项目中引入vConsole

    import VConsole from 'vconsole';
// 注意：vConsole主要用于开发和调试阶段，不建议在生产环境中使用。你可以通过环境变量或者其他方式来控制vConsole的启用和禁用
if (process.env.NODE_ENV === 'development') {
   new VConsole();
}

在项目里安装了vconsole之后就可以利用它来对手机端的web进行调试了

vconsole_open.png

vconsole_debug.png

  • 总结
    • 优势：
      • 易于安装和使用： vConsole可以通过npm或yarn轻松安装，并且在项目中的使用也非常简单。
      • 无需额外设备： vConsole直接在移动设备的浏览器中运行，无需连接到电脑或使用其他调试工具。
      • 功能丰富： vConsole提供了丰富的调试功能，包括查看console日志、网络请求、localStorage和cookies等。
    • 劣势：
      • 可能影响页面布局： vConsole的控制台界面可能会覆盖页面的一部分，影响页面布局。
      • 安全性问题： 如果在生产环境中启用vConsole，可能会暴露敏感信息，因此需要确保只在开发和调试阶段使用。
      • 调试能力有限： 相比于桌面浏览器的开发者工具，vConsole的调试能力有限。例如，它无法进行性能分析或JavaScript断点调试。

Whistle抓包

  1. 安装Whistle npm install -g whistle
  2. 启动Whistle。在终端中运行以下命令： W2 start
  3. 在你的移动设备上，设置HTTP代理。代理服务器地址设置为你的开发机的IP地址，端口设置为Whistle的端口（默认为8899）
  4. 打开Whistle的web界面。在你的开发机的浏览器中，输入 http://localhost:8899并回车
  5. 在Whistle的web界面中，你可以设置规则来拦截和修改HTTP请求和响应。
  6. 注意：在进行真机调试时，确保你的移动设备和你的开发机在同一个局域网内，以便你的移动设备可以访问到你的开发机的IP地址。

whistle.png

  • 总结
    • 优势
      • 功能丰富： Whistle提供了丰富的网络调试功能，包括请求拦截和修改、模拟服务器响应、https抓包等。
      • 跨平台： Whistle是基于Node.js的，因此它可以在任何支持Node.js的平台上运行，包括Windows、Mac和Linux。
      • 易于安装和使用： Whistle可以通过npm轻松安装，并且使用也相对简单。
    • 劣势
      • 网络依赖： Whistle需要在网络环境中运行，如果网络环境不稳定，可能会影响调试效果。
      • 配置复杂： Whistle的规则配置相对复杂，需要一定的学习成本。
      • 安全性问题： Whistle的调试信息通过网络传输，如果网络环境不安全，可能会暴露敏感信息

Weinre调试

  1. 安装Weinre npm install -g weinre
  2. 启动Weinre服务器 weinre --boundHost -all-
  3. 在你的网页中引入Weinre的客户端脚本。将以下代码添加到你的HTML文件的 <head>标签中, 其中，[your-ip-address]应替换为你的开发机的IP地址。 <script src="http://[your-ip-address]:8080/target/target-script-min.js#anonymous"></script>
  4. 打开Weinre的web界面。在你的开发机的浏览器中，输入 http://localhost:8080并回车
  5. 在Weinre的web界面中，你应该能看到你的网页已经连接到Weinre服务器。点击你的网页，然后你可以在右侧的面板中进行调试

weinre.png

  • 总结
    • 优势
      • 跨平台： Weinre是基于Web的，因此它可以在任何支持Web的设备上运行，包括iOS、Android、Windows Phone等。
      • 无需额外设备： Weinre直接在移动设备的浏览器中运行，无需连接到电脑或使用其他调试工具。
      • 易于安装和使用： Weinre可以通过npm轻松安装，并且在项目中的使用也非常简单。
    • 劣势
      • 调试能力有限： 相比于桌面浏览器的开发者工具，Weinre的调试能力有限。例如，它无法进行性能分析或JavaScript断点调试。
      • 网络依赖： Weinre需要在网络环境中运行，如果网络环境不稳定，可能会影响调试效果。
      • 安全性问题： Weinre的调试信息通过网络传输，如果网络环境不安全，可能会暴露敏感信息。

总结

方法优势/劣势推荐度
Chrome调试方便快捷，无需额外安装工具,功能强大,便于调样式,不能完全模拟真机🌟🌟🌟🌟🌟
vConsole、eruda等库调试易于安装和使用,功能丰富,但调试能力有限🌟🌟🌟🌟
Whistle抓包Whistle提供了丰富的网络调试功能,但是不能调试移动端样式,配置复杂,比较适用于需要网络代理等特定场景使用🌟🌟🌟🌟
Weinre调试易于安装和使用,但是调试能力有限,不稳定🌟🌟🌟
avatar
文章
阅读
粉丝