使用Chrome DevTools调试安卓设备WebView页面

为什么

给前端工程师调试提供便捷,可以直接通过连接Android手机进行WebView的网页调试。

使用工具

  • Opera Mobile 可以借助其推出的跨设备跨平台桌面开发者工具Opera Dragonfly 实现远程调试;
  • iOS Safari 可以开启Web检查器在 Mac OS X系统中实现远程调试
  • Android 4+已上系统的 Chrome for Android可以 配合 ADB(Android Debug Bridge)实现桌面远程调试
  • 桌面版Chrome 32+已经支持免安装ADB即可实现远程调试移动设备页面WebView

本篇主要说一下Chrome RemoteDebugging 的方法,即上面所说的第四种方式,不需要安装ADB插件。

上图展示

《使用Chrome DevTools调试安卓设备WebView页面》 image.png

实际操作

一、手机端打开USB调试并连接PC,点击确定进行调试

《使用Chrome DevTools调试安卓设备WebView页面》 image.png

二、打开chrome浏览器,输入框下输入
chrome://inspect/#devices,看到设备

注:打开后DevTools后,确保打钩选中Discover USB devices

《使用Chrome DevTools调试安卓设备WebView页面》 image.png

三、找到需要调试的目标页面,点击inspect即可打开DevTools,点击reload可重新加载当前的调试页面

    原文作者:会撒娇的犀犀利
    原文地址: https://www.jianshu.com/p/cd7aab8a2dcd
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞