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页面的html、js代码。

重点:

html代码:Elements直接修改,马上生效;

js:需要console修改js并提交才生效。

使用Chrome开发者工具远程调试原生Android上的H5页面的更多相关文章

  1. 【译】在 Chrome 开发者工具中调试 node.js

    原文链接 : Debugging Node.js in Chrome DevTools 原文作者 : MATT DESLAURIERS 译文出自 : 掘金翻译计划 译文链接 : https://git ...

  2. 在 Chrome 开发者工具中调试 node.js

    命令行工具 devtool ,它可以在 Chrome 的开发者工具中运行 Node.js 程序. 下面的记录显示了在一个 HTTP 服务器中设置断点的情况. 该工具基于 Electron 将 Node ...

  3. Chrome开发者工具 debug 调试

    Chrome 的开发者工具分为 8 个大模块,每个模块及其主要功能为: Element 标签页: 用于查看和编辑当前页面中的 HTML 和 CSS 元素. Network 标签页:用于查看 HTTP ...

  4. Chrome 开发者工具断点调试(视频教程)

    很多人不了解 Chrome Dev Tools (开发者工具)的使用方法和技巧. 其中很多技能,无论是前端开发从业者,还是普通用户,了解一些还是对日常很有帮助的. 本猿定期录制.甚至根据您的需求来订制 ...

  5. 使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等)

    使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试 ...

  6. 前端调试效率低?试试这10个“Chrome开发者工具”使用技巧

    摘要:今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试,优化页面渲染速度等.希望能提升Web开发人员的工作效率. 今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试, ...

  7. 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试

    转自:https://www.ibm.com/developerworks/cn/web/1410_wangcy_chromejs/ 引言 Google Chrome 是由 Goole 公司开发的一款 ...

  8. Chrome开发者工具调试详解

    chrome开发者工具最常用的四个功能模块:元素(ELements).控制台(Console).源代码(Sources),网络(Network). 元素(Elements):用于查看或修改HTML元素 ...

  9. 真机远程调试 ( IOS Android 以及微信,weex)

    1.以前cordova远程调试,Android的直接连接USB后,用chrome打开chrome://inspect网址 IOS的打开Safari的developer下. 这是因为cordova的we ...

随机推荐

  1. python ---解决高并发超卖问题

    使用redis 解决美多商城超卖的问题 import redis r = redis.Redis(host='localhost', port=6379) #定义过载 def limit_handle ...

  2. JSTL-简介

    JSTL全称为 JSP Standard Tag Library 即JSP标准标签库. JSTL作为最基本的标签库,提供了一系列的JSP标签,实现了基本的功能:集合的遍历.数据的输出.字符串的处理.数 ...

  3. The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar报错

    缺少jstl依赖解析xml文件,报错jaspException 添加依赖如下: <dependency>              <groupId>jstl</grou ...

  4. web自动化测试(java)---环境搭建

    java的测试环境搭建相较于python还简单些,只要把相关的jar包导入即可了 1.安装java 从官网下载最新的java安装程序,双击安装(java1.8) 2.下载java版的selenium的 ...

  5. gitlab ssh_key

    ubuntu下生成git的密钥 1 生成ssh key 执行 命令 ssh-keygen -t rsa -C “wangwei@**.com.cn” 邮箱根据自己实际修改,一直回车 2 查看生成的密钥 ...

  6. PHP-CPP开发扩展(六)

    PHP-CPP是一个用于开发PHP扩展的C++库.本节讲解在C++中PHP异常.变量.常量的实现相关知识. 异常 PHP和C++都支持异常,而PHP-CPP库这两种语言之间的异常处理是完全透明的.你在 ...

  7. Turbine——Hystrix集群监控

    上一篇文章讲述了如何利用Hystrix Dashboard去监控断路器的Hystrix command.当我们有很多个服务的时候,这就需要聚合所有服务的Hystrix Dashboard的数据了.这就 ...

  8. go sync.once用法

    欢迎关注go语言微信公众号 每日go语言 golang_everyday sync.once可以控制函数只能被调用一次.不能多次重复调用.示例代码: package main import ( &qu ...

  9. 【NET CORE微服务一条龙应用】第二章 配置中心使用

    背景 系列目录:[NET CORE微服务一条龙应用]开始篇与目录 在分布式或者微服务系统里,通过配置文件来管理配置内容,是一件比较令人痛苦的事情,再谨慎也有湿鞋的时候,这就是在项目架构发展的过程中,配 ...

  10. JavaWeb之Maven一

    Maven和C#的nuget类似,可以通过设置就能引入框架等第三方,方便又省事.Java中使用Maven来管理第三方.今天尝试着配置了一下. 一.JDK的安装 关于JDK的安装可以查看百度经验,设置P ...