使用Chrome远程调试Android移动端WebView中的JS

最新推荐文章于 2025-10-22 10:09:31 发布

原创最新推荐文章于 2025-10-22 10:09:31 发布 · 1w 阅读

CC 4.0 BY-SA版权

文章标签：

33 篇文章

订阅专栏

本文介绍如何使用Chrome浏览器进行移动端网页的远程调试，包括准备工作、配置方法及常见问题解决技巧。

1. 前言

移动端网页开发，最头疼的就是调试了，谷歌Chrome支持远程连接Android设备，调试WebView中打开的页面。

Android开发环境（adb工具）

一个Android设备，在PC安装好驱动（如果需要），开启调试模式，开启调试模式的方法这里就不累赘了，使用USB链接到电脑

PC端安装Chrome浏览器

PC端有可以正常使用的VPN（据你的网络环境而定是否需要，这个大家都懂的）

PC中打开Chrome浏览器，在“菜单->更多工具->开发者工具”，或使用快捷键“Ctrl+Shift+I/F12"打开开发者界面，在调试面板中，点击右侧菜单按钮，在下拉菜单中“More tools->Remote devices”，打开远程设备界面，如下图所示：

连接接上远程设备，可以看到设备信息和调试加载的页面，如下图所示：

如果觉得上面的步骤太麻烦，有更简单的，在Chrome地址栏输入“chrome://inspect/#devices”，直接打开打开远程调试设备界面，这种方式打开的远程调试设备界面跟上面的不太一样，但是大致结构都差不多，有设备的名称，页面所在应用的包名等等信息，如下图：

在远程设备界面中点击“inspect”进行跟踪调试，打开跟中调试界面，如下图所示：

接下来，就可以尽情的调试测试了。

如果在准备工作无误的情况下，仍旧无法看到你的Android设备，请检查你PC的adb端口。查看adb的端口，使用adb start-server命令，可以看到端口，如果已经启动adb服务，先调用adb kill-server关闭服务。

获取到adb的端口后，添加到配置中。

如果是用上面一种方法打开远程设备界面的方式，在Settings里面的Port forwarding中，点击Add rule添加端口。

如果是用第二种方式（直接在地址栏输入地址）打开远程设备界面的，启用Discover USB devices，点击“Port forwarding...”按钮打开窗口添加端口，如下图所示：

在项目中，在Android4.4以后，需要WebView下设置，支持远程调试。否则无法看到调试应用的相关页面，无法进行调试。

if(android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

4.3 点击“inspect”出现白屏无法加载成功

此时你需要连接上VPN再打开。