使用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插件。

上图展示

image.png

实际操作

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

image.png

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,638评论 25 709
  • 年纪大了,才发现这些道理都是真的 2018-01-24 悠悠魂2 来源:儒风大家 当年多少荒唐事,如今都成下酒菜。...
    套马地汉纸阅读 192评论 0 1
  • 停止呼喊吧 在这汹涌的海面 声音在狂风中 散落 扁舟在波浪中 穿梭 头顶是深邃的蓝色 却不是天空 大海在痛苦 呻吟...
    迁于乔木阅读 306评论 0 0
  • 今天是我来到简书的第一天,一天的忙碌,只有晚上有些时间来写写我知道的真实的故事。可能每个人对于外婆都有不同的感觉,...
    关心不乱阅读 588评论 5 6
  • 人生就是一场旅途,在旅途中我们会遇到各种的事情,不管怎样,我们都会老去,可是如果我们没有精彩的奋斗,就会感觉这场旅...
    一颗有趣的豆阅读 184评论 2 1