如果USB连接成功,这时候我们可以看到移动设备的型号和设备上运行的页面和允许调试的WebView列表。找到需要调试的目标页面,点击inspect即可打开DevTools,点击reload可重新加载当前的调试页面,点击focus tab可将标签页置顶,close为关闭当前页面。更可以通过在输入框中键入网址新开一个页面。
点击inspect打开DevTools后,你可以选中页面中的DOM元素,同时设备中对应元素也高亮显示,也可使用DevTools中的Inspect Element 选中目标元素,可以实时与移动设备页面交互,方便的定位问题所在,进行代码调试。
在输入框中输入一个新的网址,点击Opoen可打开你想要调试的新页面。
说明:由于Chrome版本不同,DevTools也可能有些差别,比如我的Chrome38.0.2125.104 m版竟然没有打开新页面的url输入框,升级到v39后恢复正常,知道原因的欢迎留言。
1. DevTools窗口使用F5快捷键(CMD+R for Mac)重新加载页面
2. 使用Network面板可以实时观察页面在手机实际网络环境中资源的加载情况。
3. Timeline面板可以用来分析页面渲染和CPU使用情况,通常情况下移动设备的性能会比电脑上要低一些。
4. 在DevTools的Console控制台中编写脚本执行,会同步表现在移动设备中检查的页面。
5. 如果要调试本地搭建的服务器程序,需要用到端口转发和虚拟主机映射,以使设备上可以呈现你本地环境下的页面内容。
调试WebView需要满足安卓系统版本为Android 4.4+已上。并且需要再你的APP内配置相应的代码,在WebView类中调用静态方法setWebContentsDebuggingEnabled,如下:
[java]