Android WebView调试利器之 Chrome DevTools

前言

Android开发时不时需要与H5交互这个时候如果没有能调试的工具效率简直是极低，我们项目就有一个活动页面需要与H5交互，当时还不知道有这么一个调试工具的时候只能用alert()(关键是这个问题他在本地运行是ok的在服务器才有问题这种问题最不好定位如果有这么一个工具那简直是So Easy)。当我觉得效率这么低的情况下，我在想是不是应该会有调试工具呢？（因为IOS有）
所以我就直接查google文档以下是官方文档

setWebContentsDebuggingEnabled

Enables debugging of web contents (HTML / CSS / JavaScript) loaded into any WebViews of this application. This flag can be enabled in order to facilitate debugging of web layouts and JavaScript code running inside WebViews. Please refer to WebView documentation for the debugging guide. The default is false.

启用对加载到此应用程序的任何WebView中的Web内容（HTML / CSS / JavaScript）进行调试。 可以启用此标志，以便于在WebViews中运行的Web布局和JavaScript代码的调试。 有关调试指南，请参阅WebView文档。 默认值为false。

我们看到这里查不到具体的用法，不过上面可以看到请参阅WebView文档那么下一步就看WebView documentation for the debugging guide.
了解到Android4.4或更高版本可以使用DevTools 可以在原生 Android 应用中调试 WebView 内容。

配置 WebViews 进行调试

必须从您的应用中启用 WebView 调试。要启用 WebView 调试，请在 WebView 类上调用静态方法 setWebContentsDebuggingEnabled。

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

此设置适用于应用的所有 WebView。

在 DevTools 中打开 WebView

在google浏览器中输入以下地址
chrome://inspect 页面将显示您的设备上已启用调试的 WebView 列表

上图有一个WebView远程调试也就是我起的标题，下面有一个inspect点击就进入到调试页面了如下图