使用Chrome开发者工具远程调试原生Android上的H5页面

时间: 2018-08-01阅读: 1296标签: Chrome

Android4.4(KitKat)开始,使用Chrome开发者工具可以帮助我们在原生的Android应用中远程调试WebView网页内容。具体步骤如下:


(1)设置Webview调试模式

可以在Activity的init进行如下设置,WebView类包含一个公共静态方法,可应用于项目中的所有WebView,同时不受Manifest文件中的debuggable属性影响。

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


(2)调试WebView

USB连接设备的前提下,PC打开Chrome浏览器,输入:

chrome://inspect/#devices

DevTools页面的Devices会显示当前连接的远程设备名称和序列号,以及当前原生App打开的WebView的网页地址,如图:


(3)修改H5页面内容
点击inspect选项进入开发者工具页面,可以修改html页面的htmljs代码


重点:
html代码:Elements直接修改,马上生效;
js:需要console修改js并提交才生效。

作者:AmyZYX 
出处:http://www.cnblogs.com/amyzhu/ 



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/968

关闭

解决autocomplete=off在Chrome中不起作用的方法

大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为on和off,该属性可省略:省略属性值后默认值为on,也可以省略属性名,直接写入关键字on或off。

如何在chrome中实时修改JS

有时候,我们需要去研究人家网站的运行机制,这就免不了要在他们的前端脚本里插入一些调试代码看看运行效果。在chrome65以前,我们可以打开目标网页的 开发者工具

如何创建并发布一个Chrome扩展应用

有没有想过自己创建一个 Chrome 扩展应用?看完这篇文章你将会发现这是多么的简单。按照下面这些步骤,你将会很快地将你的想法实现为真实的应用,并在 Chrome Web Store 上发布。

一文了解 Chrome 的十年加速历程

自十年前 Chrome 浏览器首次推出后,速度已经成为 Chrome 的四个核心原则之一。我们一直都想让 Web 开发者能够向用户提供快速的、优秀的上网体验。在 Chrome 诞生十周年之际,我们认为回顾在这十年中为提高速度所付出的努力,以及我们接下来要进行的尝试将会是一件非常有趣的事情

chrome 扩展精选推荐

很多扩展功能比较单一,直接用一张图就能很清楚说明它的用途啦。出于篇幅的限制,我在这里会重点介绍一些我个人比较用得上的一些扩展。因为平时前端开发的比较多,所以偏向前端程序员的扩展可能会比较多一些。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!