如何使用Chrome inspect 调试第三方H5页面？

浏览器通常使用 Android 原生的 Webview 内核，微信使用的是内置X5内核。微信使用 X5 内核主要是解决兼容性问题，理论上 Android 原生的 WebView 性能更强更快。我们可以通过微信TBS 调试页面启用原生 WebView 支持来查看，结合Chrome inspect可以方便定位并调试HTML5轻应用页面的问题。

TBS调试页设置

点击「查看版本信息」，内核版本信息显示 0 ，null 证明修改成功。

通过上述设置操作后，即可切换到系统WebView内核中，如果想利用Appium或者Airtest测试工具做App UI自动化，也能正常的获取到微信小程序，H5或者微信公众号菜单中H5页面元素。

Android端手机设置

手机的开发者权限默认是关闭的，此时多次点击版本号，如华为手机快速点击7次就会开启开发者模式。

接下来，打开 「设置」 - 「系统和更新 」- 「开发人员选项」，开启开发人员选项，再打开「 USB 调试」。（华为系统设置步骤，其他厂商自行百度）

注意要同时打开上图的这两个选项，否则USB调试又会关闭。

2

手机连接电脑

电脑上安装91手机助手或者360手机助手，一般手机都会由91或360手机助手自动安装驱动。手机驱动若未安装成功，根据机型到手机官网下载相应驱动。驱动安装成功后，将 Android 手机通过USB数据线连接到电脑上，这时候手机会提示 USB 连接方式，选择「传输文件」方式。

三

电脑端调试

1

打开Chrome inspect

打开电脑上的 chrome 浏览器，在地址栏中输入 chrome://inspect，可以在面板上看到连接的手机设备（如果没有显示手机设备，请检查电脑的Android环境，可能是 adb 有问题）。

选择要调试的页面，点击 inspect 按钮，点击之后将会打开一个包含浏览器调试控制台的新页面。

如果出现当前页面，就说明已正常。如果窗口能打开，但界面出不来，估计你被墙了，因为这个调试功能需要请求谷歌的接口，获取手机设备对应的调试包，解决方案就是科学上网，或者公司有时候开着科学上网，可以访问部分网站。如果出现白屏，还需要进行如下配置。

方法一：清除缓存

浏览器中访问 chrome://appcache-internals/#，会看到缓存界面，将所有条目 Remove。如果这个方法没有解决白屏问题，使用方法二。

方法二：hosts 文件中添加如下内容（方法二亲测有效）：

173.252.100.21 chrome-devtools-frontend.appspot.com

31.13.82.17 chrometophone.appspot.com

网上还有其他相关的方法，如下载其他版本的Chrome浏览器，可以尝试一下。

使用该调试技巧，调试移动端中自身开发的Hybrid APP、微信、QQ、抖音等打开的页面，就像在电脑Chrome调试一样方便。

敬请期待

---

ITester软件测试小栈（ID：ITestingA），专注于软件测试技术和宝藏干货分享，每周准时更新原创技术文章，每月不定期赠送技术书籍，愿我们在更高处相逢。喜欢记得星标⭐我，每周及时获得最新推送，第三方转载请注明出处。

ITester软件测试小栈

往期内容宠幸

1.Python接口自动化-接口基础(一)

---

2.Python接口自动化-接口基础(二)

---

3.Python接口自动化-requests模块之get请求

---

4.Python接口自动化-requests模块之post请求

---

5.Python接口自动化之cookie、session应用

---

6.Python接口自动化之Token详解及应用

---

7.Python接口自动化之requests请求封装

---

8.Python接口自动化之pymysql数据库操作

---

9.Python接口自动化之logging日志

---

10.Python接口自动化之logging封装及实战

想获取更多最新干货内容

快来星标 置顶 关注我

每周一、三、五 08:30见

<<  向右滑动查看下一张图片  >>

 后台 回复"资源"取干货

个人微信：Cc2015123

添加请注明来意 :)

真爱四连，BiuBiuBiu~