非常好用的web前端远程调试工具

chrome://inspect/#devices是Chrome浏览器中用于访问开发者工具界面的 URL,用于远程调试Android 手机或平板电脑等设备以及 WebViews 和 Chrome 应用等其他目标。

2025-10-15 11:37:55

HTMLCSS命令行

chrome://inspect/#devices

这是一个用于 Google Chrome 浏览器的特殊地址,用于访问开发者工具界面的 URL,用于远程调试Android 手机或平板电脑等设备以及 WebViews 和 Chrome 应用等其他目标。

使用方式

在chrome浏览器中输入chrome://inspect/#devices地址。

打开chrome浏览器输入chrome://inspect/#devices

连接Android手机

要使用此功能调试 Android 设备的移动 Chrome 浏览器或应用的 WebView,使用USB连接android手机:

  1. 在 Android 设备上启用开发者选项。
  2. 在 Android 设备的开发者选项中启用 USB 调试。
  3. 通过USB 电缆将设备连接到计算机。
  4. 在计算机和设备上运行兼容版本的Chrome 浏览器。

在计算机上,导航到chrome://inspect/#devices并接受设备上的任何必要权限。

注意事项

  • 检查手机是否打开开发者模式,如果没有开启请先开启开发者模式
  • 检查手机是否允许USB调试功能。
  • android手机连接到电脑是否弹窗允许USB调试。
  • 一直连接不上手机可反复断开USB连接线直到出现允许调试窗口弹窗或者重启手机。

发现android手机目标

列出所有连接到计算机并配置用于调试的可发现远程目标(设备、WebView 等)

Android手机跟chrome浏览器进入可调试状态

点击inspect,进入调试窗口模式

点击inspect,连接到该站点进行调试

检查和调试

对于每个列出的目标,您可以点击“检查”链接来打开专用的 Chrome 开发者工具窗口。这允许您远程执行以下操作:

  • 检查并修改HTML(DOM)和CSS。
  • 设置断点并逐步执行JavaScript代码。
  • 查看控制台消息和网络活动。

调试窗口,可看见当前手机浏览器屏幕,元素,控制台,源代码等

评论

静谧以待,您的评论将是点睛之笔

撰写首个评论,启程你的前端奇妙之旅

is a Wiki for programming enthusiasts and professionals, organizing knowledge on programming.

Connect With Me

I have a fair amount of knowledge of Javascript, Typescript, VueJs, and Nuxt. If you have an interesting idea, either open source or paid let's connect.

Sent Mail
© 2024-2025 © . All rights reserved.