如何通过Windows 11 PC连接安卓手机使用Web开发者工具排查前端问题？

一、开启Pixel的USB调试权限 #

• 打开手机「设置」→「关于手机」，连续点击「版本号」7次，解锁开发者选项
• 返回设置主界面，进入「开发者选项」，开启「USB调试」，部分新款Pixel需额外开启「USB调试（安全设置）」，确保允许通过USB访问隐私数据
• 用USB数据线将Pixel连接到电脑（Windows/Mac通用）

二、用桌面Chrome/Edge调试Web控件内的页面 #

• 打开电脑端Chrome或Edge，在地址栏输入 chrome://inspect（Edge为 edge://inspect）
• 页面会自动识别已连接的Pixel设备，找到内网系统Web控件对应的页面（未显示则点击「刷新」按钮）
• 点击页面右侧的「inspect」，即可调出和桌面浏览器一致的调试面板，包含Elements、Network、Console等标签

三、针对性排查文件上传按钮问题 #

• 排查页面加载阶段的JS错误：打开Console标签，刷新页面，查看红色错误提示，重点关注与文件上传、DOM操作相关的报错
• 追踪上传按钮的事件逻辑：
  1. 在Elements标签页，用左上角的元素选择器点击上传按钮，定位到对应HTML节点
  2. 右侧「Event Listeners」面板中，查看绑定在该元素上的click、change等事件，点击事件对应的函数链接，跳转至Sources标签查看代码细节
  3. 在关键代码行设置断点，点击上传按钮，逐行调试定位执行异常点
• 检查Network请求状态：点击上传按钮时切换到Network标签，确认是否有相关请求发起，或是否存在4xx/5xx等错误状态码
• 验证原生文件选择功能：临时添加一段纯HTML测试代码 <input type="file"> 到Web控件中测试，如果原生按钮也无法使用，可能是Web控件配置问题；若正常，则是业务代码存在Pixel专属的兼容性问题

内容的提问来源于stack exchange，提问作者Teckyhead