利用Chrome开发者工具远程调试 - Web开发

TUhjnbcbe - 2021/2/25 16:29:00

扯犊子：今天是五一劳动节，依照惯例，祝大家节日快乐！目测魔都天气还不错，推送完这篇文章，我也要出去运（浪）动（荡）啦！蜗居可不是理想的好生活。但是话又说回来，Coding算不算劳动呢？哎，职业病又发作啦。之前写过一篇关于AndroidStudio断点调试技巧的文章，但都是针对Native代码的调试，对于Hybrid开发模式下的WebView却无从下手。幸运的是，PC中的Chrome浏览器提供的开发者工具能够帮助我们远程调试Android中的WebView加载的网页。

Android4.4(KitKat)开始，使用Chrome开发者工具可以帮助我们在原生Android应用中远程调试WebView网页内容。一起来看看怎么操作吧。

第一步，设置WebView调试模式。WebView类包含一个公共静态方法，作为Debug开关：

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

注意：这个方法兼容至Android4.4及更高版本，并且只需设置一次，便可应用于项目中的所有WebView，同时不受Manifest文件中debuggable属性的影响。

第二步，确保USB连接的前提下，打开PC中的Chrome浏览器，输入网址，打开页面：

chrome://inspect

DevTools页面的Devices菜单页自动显示当前连接的远程设备名和序列号，以及当前原生App打开的WebView的网页地址，如图：

点击对应网页下方的inspect选项便可以进入开发者工具页：

如图所示，网页显示内容和源代码、控制台等都可以看到，供安卓开发人员自由调试。

事实上，Chrome开发者工具也是H5开发人员开发手机端网页的调试利器。

打开PC中Chrome浏览器的开发者工具页面：设置-更多工具-开发者工具，或者直接在Chrome浏览器的任意网页上右键选择检查。在开发者工具按照下图方式中打开Remotedevices：

同样，确保PC通过USB连接手机设备的前提下，检查开启Remotedevices页面左侧Settings菜单中的DiscoverUSBdevices选项：

打开手机的Chrome浏览器App，在Remotedevices中选择对应的手机设备，便可以看到当前ChromeApp的版本信息，以及一个URL输入框：

在此，我们可以输入任意的Url地址，点击Open，便可同步打开手机Chrome上的网页，同时在Remotedevices出现对应的地址栏，点击即可进入前面介绍WebView时所看到的类似调试页。

更多有关ChromeDevTools的细节，请参考链接：ChromeDevToolsforMobile:ScreencastandEmulation。