webview

Learning Hybird App Test–Appium Java（Leyden） 浏览器的远程调试工具，使得我们可以通过PC上开启的控制台，调试手机浏览器中正在运行的代码。运行于 Android 4+系统的Chrome for Android 同样也可以配合ADB（Android Debug Bridge）实现桌面远程调试。桌面版Chrome32+已经支持免安装ADB即可实现远程调试移动设备页面/WebView 。 Android远程调试目前支持所有操作系统，并且支持以下： ● 调试站点的页面 ● 调试安卓原生App中的WebView ● 实时将安卓设备的屏幕图像同步显示到开发机器。 ● 通过端口转发（port forwarding）与虚拟主机映射（virtual host mapping）实现安卓移动设备与开发服务器进行交互调试。 而在最新的Android 4.4 Kitkat版本中，原本基于Android WebKit的WebView实现被换成基于Chromium的WebView实现。 移动端 1. 在eclipse中配置AndroidSDK环境（Android6.0、ADT23.0） 2. 将手机与PC通过USB连接，开启USB调试模式； 3. 使用360手机助手或在dos窗口输入adb devices查看手机驱动连接是否成功； PC端 1.

环境配置 1.手机与电脑USB连接，开启USB调试模式，即可通过adb devices可查看到此设备。 2.电脑端、移动端安装chrome浏览器。 3.App webview开启debug模式。 　　a.开启方式需要App前端开发人员协助在app中配置增加如下代码（在WebView类中调用静态方法setWebContentsDebuggingEnabled）：if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true);} 　　b.查看是否包含h5元素。 　　打印出当前手机页面的context。即：print driver.contexts 　　如果包含有h5页面的话，至少会返回两个元素，一个'NATIVE_APP', 一个'WEBVIEW' 4.移动端，电脑端打开chrome浏览器。在电脑端Chrome浏览器地址栏输入 chrome://inspect/#devices ，进入调试模式： 此时页面显示了手机型号、驱动名称、APP要调试的WebView名称。启动进入app对应的h5页面，检查是否显示对应的webview，如没有，则当前未开启调试模式。 点击inspect，若成功加载与APP端相同界面的调试页面，则配置成功

“真机远程调试”（remote inspect web on real device），是指用桌面电脑（PC或MAC）远程连接上移动设备，通过类似Chrome浏览器开发人员工具的界面，来调试移动设备上运行的网页 https://github.com/jieyou/remote_inspect_web_on_real_device?utm_campaign=email_admin&utm_source=trigger-email&utm_medium=email 总览表格 方法 关键点 实现难度（综合考虑搭环境、软件、硬件成本，分数 小 为佳） 调试效果（综合考虑仿真效果、能调试的项等，分数 大 为佳） 可用的桌面设备 可用的移动设备及可调试的浏览器 简要步骤 Chrome模拟器 非真机，只是模拟 0 2（新版本加入了模拟网络链接的功能，故上调评分） PC、MAC 无 GO weinre 安装较为繁琐 3 2 PC、MAC 全部 GO spy-debugger (简化weinre配置，支持https) 需要桌面设备和移动设备同一网段 2 2 PC、MAC 全部 GO 调试Android上的Chrome 需要翻墙 2 4 PC、MAC Android上的Chrome GO 调试Android APP里的webview 需要翻墙 3 4 PC、MAC Android

转载请声明出处(http://www.cnblogs.com/linguanh/) 目录 1，测试设备介绍 2，开源项目richeditor及CrossWalk的选择 3，遇到的bug及其解决方法 4，附加功能彩蛋。 1，测试设备介绍---------------------- 测试的机型有 魅蓝note2-api 22，小米2A-api 16，三星galaxy I9152-API 17. 上述机型均通过测试，针对它们各自产生的bug我会在第二大点处介绍。 2，开源项目richeditor及CrossWalk的比较--------------------------- 关于richeditor，它是一个算是很不错的webView富文本编辑器，git链接： https://github.com/wasabeef/richeditor-android 优点： 1，是轻量级，功能较丰富 2，丰富的功能： 前进、返回、粗体、斜体、字号修改、背景颜色、字体颜色、图片及超链接插入，其中图片不含有其它功能，例如没有带有点击看大图，删除等。 3，接口丰富，嵌入和调用极其方便。 缺点： 兼容性差、bug多、二次开发极难！体现在： 1， 在上面所列机型里面都有一个共同的bug ，插入图片后，如果通过 javaScript 设置点击事件，在第一次进入该页面的时候，所有webView图片的点击都能响应

环境前置准备 手机与电脑USB连接，开启USB调试模式，通过adb devices可查看到此设备。 电脑端、移动端安装chrome浏览器。（尽量保证移动端chrome版本低于电脑端） App webview开启debug模式 在电脑端Chrome浏览器地址栏输入 chrome://inspect/#devices ，进入调试模式： 此时页面显示了手机型号、驱动名称、APP要调试的WebView名称 点击inspect，若成功加载与APP端相同界面的调试页面，则配置成功 若获取不到WebView或者调试页面预览框显示空白，则需要进行VPN破解–安装翻墙软件（由于默认的DevTools使用的是appspot服务器,这在国内是需要翻越GWF） 尝试解决方法 ： 1、在windows host文件中增加： 61.91.161.217 chrome-devtools-frontend.appspot.com 61.91.161.217 chrometophone.appspot.com 2、使用翻墙软件，如Lantern蓝灯 环境检查 App webview 调试模式检查与开启 基础检查方式 打开app对应的h5页面，在 chrome://inspect/#devices 地址中，检查是否显示对应的webview，如没有，则当前未开启调试模式。 在自动化代码中，进入到对应的H5页面

效果如下： 首先需要一个html页面及相应的js和css支持放在assets目录下（如果没有这个目录请项目上右键-new-folder-assets） 配置权限： <uses-permission android:name="android.permission.INTERNET"/> 新建一个类：WebViewLoadHtml，代码如下： package com.example.webviewnavigate; import android.annotation.SuppressLint; import android.app.Activity; import android.os.Bundle; import android.view.Window; import android.view.WindowManager; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.Toast; public class WebViewLoadHtml extends Activity { private String url; WebView webView; @Override

当前很多app项目（web app）是由原生和前端共同开发，前端主要负责页面的开发，原生通过webView加载h5页面。有时我们想对页面内容点击复制，默认情况下禁止了长按复制功能，要此功能需要增加css声明： { -webkit-user-select: text!important; -moz-user-select: text!important; -ms-user-select: text!important; user-select: text!important; } 来源： CSDN 作者： 逆风笑@ 链接： https://blog.csdn.net/qq_41090476/article/details/103730978