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 进行远程调试的步骤:
-
确保手机和电脑连接到同一网络:这通常意味着它们需要连接到同一个Wi-Fi网络。
-
启用手机的开发者选项:
- 对于 Android 设备,在“设置”中找到“关于手机”,然后连续点击“构建号”几次,直到出现“开发者模式”已启用的提示。
- 对于 iOS 设备,你需要在设备的“设置”中启用“开发者模式”,或者使用第三方工具如Safari的Web检查器。
-
启用 USB 调试:
- 在 Android 设备上,进入“开发者选项”,启用“USB调试”。
- iOS 设备不支持通过 USB 调试,但可以通过 Wi-Fi 进行远程调试。
-
使用 USB 线连接手机到电脑:对于 Android 设备,使用 USB 数据线将手机连接到电脑。对于 iOS 设备,你可以通过 Wi-Fi 连接,跳过这一步。
-
在 Chrome 中打开远程调试:
- 在电脑上打开 Chrome 浏览器。
- 访问
chrome://inspect
页面。 - 点击“Configure...”按钮,确保已经勾选了“Discover USB devices”(对于 Android)或设置了相应的远程调试端口(对于 iOS)。
-
启动远程调试会话:
- 在
chrome://inspect
页面上,你应该能够看到你的设备列表。 - 点击“inspect”链接,这将打开一个新的 Chrome 标签页,该标签页会连接到你的设备,并允许你使用 Chrome 的开发者工具进行调试。
- 在
-
在手机上打开你的网页或应用:确保在手机上打开你想要调试的网页或应用。
-
开始调试:
- 在新打开的 Chrome 标签页中,你可以使用 Chrome 的开发者工具来检查元素、调试 JavaScript、查看网络请求、性能分析等。
- 你甚至可以修改 CSS 或 JavaScript 代码,并在手机上实时看到变化。
请注意,iOS 设备的远程调试可能需要额外的配置,如安装一些特殊的工具或使用特定的服务。此外,不同的设备和浏览器版本可能会有不同的步骤,所以如果你遇到问题,最好查看最新的官方文档或搜索相关的教程。