如何使用百度浏览器自带的开发者模式调试移动端H5页面？

百度浏览器其实自带了一套远程调试方案，不用额外装工具、不用折腾USB线，甚至连复杂的配置流程都不需要。只要手机和电脑连在同一个Wi-Fi下，手机端打开“远程调试”开关，就能直接在Chrome上调试手机上打开的H5页面——这套流程对前端开发来说非常实用。

整个过程分三步走：先在手机端开启远程调试，获取一个类似

的地址；然后在电脑上用Chrome浏览器访问这个地址，就能看到手机端打开的所有页面列表；最后点击目标页面的“inspect”按钮，调出完整的DevTools，效果跟调试PC网页完全一样——DOM、Console、Network、Elements随便用。

开启手机百度浏览器的远程调试功能

操作路径很直接：打开手机百度浏览器 → 点击右下角「我的」→ 左上角「设置」齿轮图标 → 「高级设置」→ 「开发者选项」→ 开启「启用远程调试」。

打开之后，页面上会显示一串以

开头的地址，这就是待会儿电脑要访问的调试入口。注意：这个地址每次重启浏览器都可能变化，而且只在当前Wi-Fi网络下有效——换网之后需要重新获取。

电脑端用Chrome访问调试页面

在Windows或macOS电脑上，直接用Chrome浏览器（必须是Chrome 59以上版本）访问手机上显示的地址，比如 http://192.168.1.105:9222。页面会列出所有已打开的移动端标签页，每个条目右侧都有一个“inspect”链接。点击它，就会弹出Chrome DevTools窗口，DOM结构、Console输出、Network请求、Elements样式编辑全部可用——跟在本地调试网页没什么区别。

这一步有个关键前提：

。因为百度浏览器移动端虽然基于Chromium内核，但它的远程调试协议只兼容Chrome DevTools前端。如果用其他浏览器打开那个地址，通常会显示空白或报错。

在手机上触发目标H5页面并定位到对应调试项

第一步：确保手机百度浏览器里已经打开了你要调试的H5页面（比如一个活动页或登录页），并且页面没有被切换到后台；

第二步：刷新电脑端的 http://192.168.x.x:9222 页面，让标签列表更新；

第三步：找到标题匹配的页面条目（例如“618大促首页”），确认URL域名和路径正确无误；

第四步：点击右侧的“inspect”，DevTools会自动连接并同步加载当前页面的HTML与JS上下文。

如果点开之后DevTools空白或者报错“Connection closed”，大概率是手机页面已经被切走，或者百度浏览器的进程被系统回收了。解决办法很简单：回到手机端重新点开那个H5页面，再试一次就行。