Chrome 远程调试

1、华为手机:设置-关于手机-在版本上敲7下开启开发者模式。

在系统和更新-》开发人员选项-》USB调试选上。

把仅允电改为传输文件。

2、Chrome 浏览器上开新的标签输入   chrome://inspect 保证勾上

确保已经勾选了“Discover USB devices”。

3、在手机浏览器上打开你想调试的网页,在电脑上的Chrome浏览器的   chrome://inspect 刷新应该能看到了,点击“inspect”就可以调试了。

 

结果发现是上传手机图片过大报 “413 Request Entity Too Large” 将nginx 的加上:

server {

  client_max_body_size 20M;

}

完美的处理了这个事情,否则处理启也就太麻烦了。

 

 

远程调试是一种非常有用的技术,它允许开发者在电脑浏览器中调试运行在手机上的网页或应用。以下是使用 Chrome 进行远程调试的步骤:

  1. 确保手机和电脑连接到同一网络:这通常意味着它们需要连接到同一个Wi-Fi网络。

  2. 启用手机的开发者选项:

    • 对于 Android 设备,在“设置”中找到“关于手机”,然后连续点击“构建号”几次,直到出现“开发者模式”已启用的提示。
    • 对于 iOS 设备,你需要在设备的“设置”中启用“开发者模式”,或者使用第三方工具如Safari的Web检查器。
  3. 启用 USB 调试:

    • 在 Android 设备上,进入“开发者选项”,启用“USB调试”。
    • iOS 设备不支持通过 USB 调试,但可以通过 Wi-Fi 进行远程调试。
  4. 使用 USB 线连接手机到电脑:对于 Android 设备,使用 USB 数据线将手机连接到电脑。对于 iOS 设备,你可以通过 Wi-Fi 连接,跳过这一步。

  5. 在 Chrome 中打开远程调试:

    • 在电脑上打开 Chrome 浏览器。
    • 访问 chrome://inspect 页面。
    • 点击“Configure...”按钮,确保已经勾选了“Discover USB devices”(对于 Android)或设置了相应的远程调试端口(对于 iOS)。
  6. 启动远程调试会话:

    • 在 chrome://inspect 页面上,你应该能够看到你的设备列表。
    • 点击“inspect”链接,这将打开一个新的 Chrome 标签页,该标签页会连接到你的设备,并允许你使用 Chrome 的开发者工具进行调试。
  7. 在手机上打开你的网页或应用:确保在手机上打开你想要调试的网页或应用。

  8. 开始调试:

    • 在新打开的 Chrome 标签页中,你可以使用 Chrome 的开发者工具来检查元素、调试 JavaScript、查看网络请求、性能分析等。
    • 你甚至可以修改 CSS 或 JavaScript 代码,并在手机上实时看到变化。

请注意,iOS 设备的远程调试可能需要额外的配置,如安装一些特殊的工具或使用特定的服务。此外,不同的设备和浏览器版本可能会有不同的步骤,所以如果你遇到问题,最好查看最新的官方文档或搜索相关的教程。

posted @ 2024-10-20 21:15  三瑞  阅读(199)  评论(0编辑  收藏  举报