native有用来渲染网页的控件，android被封装为名为webView 。
以webView为例阐述与浏览器区别
WebView是一种嵌入式的编程接口，能够提供Java接口给开发者来使用该控件来渲染网页。
Android 4.4 Kitkat版本中，原本基于Android WebKit的WebView实现被换成基于Chromium的WebView实现，因此可以使用chrome来调试4.4+webView。
对比基于chromium WebView 和 Chrome浏览器
| chromium WebView | chrome 浏览器 | |
|---|---|---|
| 是否开源 | 全部开源 | 部分开源 |
| 版本 | 仅能工作在Android 4.4上，而且依赖于系统内部的函数，只能同Android AOSP一起编译，目前是 Chromium 30 的版本 | 随时更新为最新版代码 在Android4.0+ 不需要依赖Android系统内部函数 |
| 进程模式 | 单进程 | 支持多进程和单进程 |
| 渲染方式 | 支持软件渲染和硬件加速器 | 支持硬件加速器 |
理解webView，版本固定的不会升级，native辅助可以做的更多的一个浏览器。
预期最为相近表现的是系统浏览器。
native开发同学基于webview开发可以以桥的方式跟js进行通信，提供native功能，如定位等。
测试webView的必要性
不同android版本的WebView基本不同
不同系统对于webView有一定的定制 => 相同android版本的不同手机表现不一致
提供的native运转功能正常
Android系统版本占比统计
当然这个各个公司不同系统占比不同
通用解决方案： 打入客户端一个chromium，跟随App的版本进行升级，然系统支持不好，出现闪退，安装失败等情况，建议android维护一个黑名单，不能使用chromium时使用native webView，结论就是该方案能减少工作量不能解放劳动力。
如何调试
浏览器模拟器
总共分三步 ：
1.打开chrome
2.CMD + option + i
3.点击小手机，可以愉快地调试了
IOS模拟器
虽然模拟器捆绑在 Xcode 中，但是本身是一个单独的应用程序，安装路径在：
/Applications/Xcode.app/Contents/Developer/Applications/iOS Simulator.app
退出xcode 模拟器依然可以正常工作，所以打开模拟器之后可以把它保留在docker上
点击模拟器hardware 可以切换模拟器类型。
iphone 模拟器
xcrun simctl install booted ~/work/workDocuments/QunarTravel.app
Android 虚拟机测试
在电脑上安装 Android 虚拟机，就可以用虚拟机打开进行测试。一般推荐两个：
Genymotion
Genymotion
Genymotion是一个很棒的 Android 虚拟机。但是首次安装配置需要麻烦一些。由于基于 VirtualBox 内核，所以要先安装 VirtualBox，然后需要注册账号 Genymotion，可以免费使用，但是有功能限制。如果遇到重要的项目，临时买一两个月高端账号也是 OK 的。
安装完成，登陆之后，选择 Android 版本和手机型号，即可下载对应的虚拟机包，下载好的虚拟机会显示在列表中，你可以选择开启。
安装好的虚拟机与你 Host 本机处于一个局域网，这样你就可以用 BrowserSync 之类的，开启一个局域网 IP 本地服务器，在移动设备上同步测试了。关于 BrowserSync，如果你没接触过，下面有讲。
比较蛋疼的是，Genymotion 虚拟机里面安装 APP 好像比较麻烦，安装 Chrome 不太方便，这样不方便连接桌面版 Chrome 进行调试，只能使用 Weinre 调试。如果你有 Genymotion 使用这方面的经验欢迎分享。
Parallels
Parallels 是基于 Mac 平台的虚拟机，使用它创建虚拟机的时候，可以直接下载 Android 系统并安装，超级傻瓜的操作，但是超级好用。
没错，它还可以装 Chrome OS，只需要点击一下等待下载即可。
其他虚拟机软件应该也可以实现，不如这两种好用，如果这两种你无法使用，可以自行搜索选择其他方法尝试。Win 系统可以直接安装 Android SDK 也可以通过虚拟机方式，这里不再赘述。
安装完虚拟机，就可以用里面的浏览器打开网页进行测试了，虚拟机与本机处于一个局域网，可以用局域网 IP 来调试本地页面。
虚拟机不是真机，但是要比直接用浏览器测试强一些，在桌面操作比较方便，还可以安装多个版本测试。
使用大客户端打开页面
目前使用schema方式
qunariphone://hy?url=http%3A%2F%2Fbaidu.com%2Fapp.html&type=navibar-none
- qunariphone 是安装app的时候和系统约定的，使用它就会打开qunar的App，
- 后面hy是使用hy方式打开，url后面是我们的地址转义
- type后面是schema的参数
- 这些参数可以再页面上进行配置
建议就是可以写一个页面生成带有公司schema的链接，并将链接转成二维码，qunar内部提供了一个这样的网站。
ios9中对该功能有优化方案 Universal Link, 大致是客户端上传给Apple审核的文件中有绑定的域名，安装App时Apple会去这个域名下下载指定路径的文件，文件中包括可以被系统拦截并转发给App的域名。
真机调试
Android 4.4+
- 先用数据线将 Android 测试机连接到电脑上。需要打开测试机上面“开发者选项”中的 “USB 调试”功能。
- 在PC的Chrome上打开
Chrome://inspect即可找到你的设备 - 手机进入一个webview页面，即可在Chrome上看到调试台了
Android 4.4-
使用Weinre，它会在你本地创建一个监听服务器，并提供一个 JavaScript，你只需要在需要测试的页面中加载这段 JS，就可以被 Weinre 监听到，在 Inspect 面板中调试你这个页面。
目前 Weinre 也发布到 NPM 上了，Mac 下具体使用方法如下
首先安装 Weinre：
npm install -g weinre
安装完成之后，要在本地开启一个监听服务器，需要获取本机的局域网地址：
- Mac 在终端执行
ipconfig getifaddr en0命令。
这时候拿到一个 IP，就本例而言，我的 IP 为 10.189.249.254，这时候执行：
weinre --boundHost 10.189.249.254
winner 生成的 script标签
这里最重要的是箭头所指的 <script src="http://10.189.249.254:8080/target/target-script-min.js#anonymous"></script> 这个 JS，我们需要把这个 JS 放到我们要调试的页面中，这样访问页面的时候，加载这个 JS，就会被 Weinre 监听到进行控制。
小提示：这个 JS 后面的 #anonymous 起到一个标识作用，为了区别，我们可以将其修改成 #test 放到页面中。这时候，我们的 Inspect 面板的地址就不是 http://10.189.249.254:8080/client/#anonymous 了，而是 http://10.189.249.254:8080/client/#test。
我们打开第一个链接http://192.168.1.104:8080/client/#anonymous
每当有新的访问的时候会在下面出现一个绿色的链接
winner调试页面
当我们访问页面的时候，就会出现在监听列表中，如果有多个网页，你可以从列表中选择一个。然后就可以使用后面的 Elements、Console 等面板来进行调试操作了：
Ios
和调试模拟器相似，只不过打开safrai。这里需要说明的是,首次需要一些配置。
- iPhone设备上设置一下 Safari 浏览器，开启调试功能。具体步骤：“设置”-》“Safari”-》“高级”-》“Web 检查器”。
- Safari中选择 “偏好设置”-》“高级”-》“在菜单栏中显示开发选项”
打开开发这模式
QQ产品系列
QQ浏览器 QQ音乐 等 都可以使用QQ自家调试工具调试，详情点击
本地调试
本地调试最主要的是解决如何让手机访问到电脑上的网页，因此思路有四个，第一把文件放在手机上，这个方法简单粗暴，但是有很强的局限性和不方便，频繁的打包和拷贝，效率太低，第二为借助局域网将电脑和手机连入同一网络，之后给手机设置host，这个更不方便，需要解锁和root。第三，在dns服务器上做手脚，这个可执行性较高，但是有一定的成本，企业级可以解决这个问题，qunar的qhost就是这种解决方案。第四，为手机设置代理，这个是成本最低，可操作性最强的方案，也是本地调试的首选。
这里能提供这个功能的软件众多:nginx,charles（mac）,fiddler（windows）,browserSync and so on.
参考链接中有对charles的详细讲解的链接，这里省去很多字。
辅助测试工具
-
browserSync这里还有一个中文版的
实现跨设备的多页面同步操作，配合gulp和grunt实现页面的live reload。 -
百度云测试平台
远程真机测试平台，看到他们还提供人工测试，真是碉堡了。 - [Responsinator] 测试不同分辨率展示情况
- 移动适应性检测 google PageSpeed Insights
参考资料
android chromium 和 Android Webkit区别
android 开发者中心
chrome 快捷键
模拟器上安装客户端
charles
chrome 调试页面
网友评论