安卓edge://inspect 和 chrome://inspect调试移动设备上的网页

edge://inspectchrome://inspect 是用于调试浏览器中运行的网页和移动设备上的网页的工具。这两个工具分别属于 Microsoft Edge 和 Google Chrome 浏览器。以下是它们的详细介绍:

chrome://inspect

如果是直接使用数据线调试,则只需要执行下面的第一步和第二步 "1.启用 USB 调试 :2.连接设备:",

电脑打开Chrome访问 chrome://inspect或打开 Microsoft Edge 访问edge://inspect

如果等10秒调试界面无反应,拔掉再连接数据线试试


在安卓设备上使用 chrome://inspectedge://inspect 进行远程调试,需要确保设备和计算机之间的正确配置。以下是详细的步骤:

使用 chrome://inspect 进行远程调试

前提条件
  1. 安卓设备:确保设备已连接到与计算机相同的 Wi-Fi 网络。

  2. USB 调试:确保设备已启用 USB 调试模式。

  3. Chrome 浏览器:确保设备上安装了最新版本的 Google Chrome 浏览器。

  4. 启用 USB 调试

    • 打开安卓设备的"设置"。
    • 进入"关于手机"或"关于平板电脑"。
    • 连续点击"版本号"七次,直到看到"您已处于开发者模式"的提示。
    • 返回"设置"主菜单,进入"系统" -> "开发者选项"。
    • 启用"USB 调试"。
  5. 连接设备

    • 使用 USB 数据线将安卓设备连接到计算机。
    • 在设备上允许 USB 调试(如果弹出提示)。
  6. 在计算机上启用端口转发

    • 打开命令提示符(Windows)或终端(macOS/Linux)。

    • 输入以下命令以启用端口转发:

      复制代码
      adb tcpip 9222
    • 断开 USB 连接,确保设备仍然连接到同一 Wi-Fi 网络。

  7. 获取设备 IP 地址

    • 在安卓设备上打开"设置" -> "关于手机" -> "状态" -> "IP 地址"。
    • 记下设备的 IP 地址,例如 192.168.1.100
  8. 启动 Chrome 远程调试

    • 在设备上打开 Chrome 浏览器。
    • 访问 chrome://inspect
    • 点击"Port forwarding"下的"Add rule"。
    • 输入设备的 IP 地址和端口,例如 192.168.1.100:9222
    • 点击"Add"。
  9. 在计算机上访问远程调试页面

    • 打开计算机上的 Chrome 浏览器。
    • 访问 http://192.168.1.100:9222
    • 现在你应该能看到设备上正在运行的 Chrome 浏览器实例。
    • 点击"inspect"链接以打开 DevTools 进行调试。

注意事项

  • ADB 工具:确保计算机上已安装 Android Debug Bridge (ADB) 工具。可以通过 Android SDK Platform-Tools 下载。
  • 防火墙设置:确保防火墙没有阻止端口 9222 的通信。
  • 网络连接:确保设备和计算机在同一 Wi-Fi 网络下,以避免网络问题。

通过以上步骤,你可以在安卓设备上使用 chrome://inspectedge://inspect 进行远程调试,从而更方便地调试移动设备上的网页应用。

相关推荐
猩猩程序员13 小时前
Vercel 推出 Agent 框架 Eve:让 AI Agent 像写 Web 应用一样简单
前端
爱读源码的大都督13 小时前
Claude Code源码分析(三):为什么系统提示词中需要有tools呢?
前端·人工智能·后端
爱勇宝13 小时前
Claude Code 被曝暗藏“隐形检测”代码:封代理不是最可怕的,可怕的是你根本不知道它在干什么
前端·后端·程序员
小牛不牛的程序员14 小时前
我用 Claude Code 半天撸完了一个完整网站,AI 编程到底提升了多少效率?
前端
东风破_14 小时前
JavaScript 面试常考的字符串算法:从反转字符串到回文判断
前端·javascript
ITOM运维行者14 小时前
从零搭建企业级服务器监控体系:踩坑实录与架构设计
前端·后端
monologues14 小时前
深入 Vue 3 源码:响应式系统的精妙设计与编译优化
前端
hunterandroid14 小时前
Paging 3 分页:从手动分页到声明式加载
前端
用户40993225021214 小时前
Vue状态管理入门第四章:组合式store和SSR风险
前端·vue.js·后端
Csvn14 小时前
CSS :has() 选择器实战:没有它之前我们写了多少冗余 JS
前端·css