iOS WKWebView 混合应用开发时代来临 - 嵌入式 JS 的调试成为催化剂

iOS WKWebView 混合应用开发时代来临 - 嵌入式 JS 的调试成为催化剂

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句：太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究：iOS、Android、Html5、Arduino、pcDuino，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。

早在五年前，在哈尔滨大街小巷的饭馆儿里，经常听到店老板抱怨服务员不好招，钱给少了没人干！

那时还特意做了个分析，2010年倒推30年，正好是1980年，一家一个孩儿，80后还有十年的人力资源可用，90后一是骄惯着长大的，做服务员那份辛苦吃不消，另一方面也真

那么多闲人了。小声带一句，本人也曾在毕业前后做过一两次跑堂的，甚至穿着旱冰鞋传菜，正常站一天，就够受了，第二天没到下午就跑路了，实在没这能力和体力，只好偷个懒，学点技术，搞IT吧

时至今日，在IT行业摸爬滚打已15个年头，从电信中继线到IVR板卡开发，再到Linux计费，短信SMPP协议运用，一直到智能手机，从 C++ 到 Java、C#，从 J2EE 到 PHP再到Asp.net，从 Sybase、SQLServer到Oracle、DB2,再到Mysql、Sqlite，从Android到Sybian、QT再到iOS，技术的变改一直在进行着，从小到大，再从大到小，智能设备从2008年至今已走过7个年头，屏是越来越大，大到 pad 的诞生，又回归到5寸大屏手机，未来可能电视大屏又会火一把，接着就是瓶颈，开始衍生，多屏互动无处不在，慢慢的屏又该小了，手表、纽扣、戒指、钥匙、胸针，也许有一天学生会被再一次要求强制戴校徽，不再像我们以前那样仅是个标志，那枚校微将会如身份证一样标识着身份，记录着身影，播报着校园新闻、了解考试成绩，随时解答书本中不懂的题目。。。谁知道了

畅想总是美好的，未来总是值得期待的，然而眼下人荒已经出现多年，慢慢波及各个行业，尤其IT这种苦力行业，随着这种社会关系的变化，也许IT也不再以苦力行业出现，需要充分利用智慧和思想才能达到生产力的补充，而非人海策略了。

由此现状，不难看出，像Android、iOS这种技术要求较高的工种，人才更是少得可怜，那么如何利用现有资源进行转嫁补充将是一个新的问题需要探索。

WKWebView 随着 iOS8的发布呈现在人们眼前，一个 UIWebView 例程初始20M的内存占用量，突然降到10M，让人欣喜若狂，尤其后续多次加载 HTML 页面所带来的内存

量，基本以 0.2 M为单位，而不会像 UIWebView 一样以2M为单位。

苹果发布 WKWebView 更得要的目的是开放它的高效 JS 引擎，那才是真正的金矿。

早些年，老乔就是想用Safari应用来构建这一生态链，无耐各方面的限制，原生应用倒是火起来了，而今WKWebView的发布，也标志着一个新的时代的到带，也许这可能叫做 Web 8.0 吧？！

说了这么多，只能用一个词来形成：瞬息万变！

如何应对新的嵌入式应用开发时代，嵌入式应用中嵌入JS应用将成为充分利用 Web 2.0时代留下的一笔人力财产的有效方式，就如我们现在全国最大的消费市场是早些年“人多力量大”思想留下的财富一样。如何挖掘将成为新的课题。

JS作为一种动态语言，在桌面浏览器上进行开发，早些年也曾很让人头疼，后来发现了 FireFox 的 FireBug 插件，可以实时调试，很让人心动，随之各浏览器厂家及插件开发者不断提供这方面的支持，使得 JS 开发变得没那么让人抓狂，继而很多集成开发环境内置浏 览器调试环境，更大限度地解决了这些问题。

那么，嵌入式应用嵌入JS，又成为一个新的问题，怎么样能利用已有的开发环境及浏览器及插件环境来解决嵌入式JS的问题呢？

首先要说，Sarari 桌面浏览器是可以对 XCode 模拟器中的 WebView 组件进行调试支持的。

详细用法参见：使用safari对webview进行调试

对于Android，可以使用 Chrome 进行远程调试，由于chrome 和 android 官网我家里的环境访问不到，只能再贴几篇链接凑和看吧，至少您知道有这么回事儿

http://blog.csdn.net/t12x3456/article/details/14225235

还有一种方式，利用开源的 js 调试库：

https://github.com/lexandera/Aardwolf

详情自个去看一下吧。

这里有一篇，比我总结得好得多，以下直接转载：

各种 真机远程调试 方法 汇总

各种 真机远程调试 方法 汇总

“真机远程调试”（remote inspect web on real device），是指用桌面电脑（PC或MAC）远程连接上移动设备，通过类似Chrome浏览器开发人员工具的界面，来调试移动设备上运行的网页

当前：Oct 27,2014

“真机远程调试”的方法总是在发展，日新月异，有必要在每次更新本文档时标注当前时间及当前相关软件版本

• 当前最新 桌面版Chrome 版本：MAC：38.0.2125.104，PC：未知
• 当前最新 Android上的Chrome 版本：38.0.2125.102
• 当前最新 Android上的UC开发人员版 版本：9.8.9.457
• 当前最新 iOS：8.1

总览表格

方法	关键点	实现难度（综合考虑搭环境、软件、硬件成本，分数 小 为佳）	调试效果（综合考虑仿真效果、能调试的项等，分数 大 为佳）	可用的桌面设备	可用的移动设备及可调试的浏览器	简要步骤
Chorme模拟器	非真机，只是模拟	0	2（新版本加入了模拟网络链接的功能，故上调评分）	PC、MAC	无	GO
weinre	安装较为繁琐	3	2	PC、MAC	全部	GO
调试Android上的Chrome	需要	2	4	PC、MAC	Android上的Chrome	GO
调试Android APP里的webview	需要	3	4	PC、MAC	Android APP里的webview	GO
调试Android上的UC	需要桌面设备和移动设备同一网段	1	3	PC、MAC	Android上的UC	GO
调试iOS上的Safari	需要MAC（甚至可以无需iOS设备）	2	4	MAC	iOS上的Safari	GO

简要步骤

Chorme模拟器

1. 在PC或MAC上打开Chrome浏览器，打开想要调试的页面，然后打开开发人员工具
2. 点击开发人员工具顶栏上的手机图标，即可开始调试（ 示意图 ），一般来说需要重新刷新页面
3. 在页面顶部可以看到设备选择下拉菜单 Device 和 模拟网络环境的下拉菜单 Network ，及左侧的清除选择按钮和打开关闭 media queries 的按钮（ 示意图 ）
4. 打开设置左边的那个类似 >三 的图标，切换到 Emulation 标签，可以更细粒度地调整，来定制化你的模拟（ 示意图 ）

weinre

过程稍微繁琐，但是这个方案能调试几乎所有平台的所有浏览器，只要能运行js的就行

1. 安装nodejs
2. 安装weinre到global，即在命令行中运行 npm -g install weinre （MAC可能需要在前面加上 sudo ）
3. 获取本机IP地址（PC：开始→运行→cmd，输入 ipconfig ，查看“IPv4地址”字段； MAC：在网络偏好设置内），假设获取到的IP地址为 4.4.4.4
4. 在命令行运行weinre： weinre --boundHost 4.4.4.4 ，其中IP地址为上一步所获取的地址，如果弹出防火墙，请允许访问（ 示意图 ）
5. 在PC或MAC上用浏览器打开 http://4.4.4.4:8080/client/#anonymous ，其中IP地址为第三步所获取的地址（ 示意图 ）
6. 将移动设备连接到与PC或MAC同一局域网，打开移动设备上的需要调试的浏览器，然后随便打开一个网页。将它保存为书签
7. 修改上述书签，将地址改成：

javascript:(function(e){e.setAttribute("src","http://4.4.4.4:8080/
target/target-script-min.js#anonymous");document.getElementsByTagName("body")[
0].appendChild(e);})(document.createElement("script"));void(0);

，其中IP地址为第三步所获取的地址（复制后请去掉代码中的换行，使之成为一行）
8. 在移动设备浏览器上打开想要调试的页面，然后点击上一步保存的书签，即可在PC或MAC上的页面中的target中找到对应页面，点击可以开始调试（ 示意图 ）（ 示意图 ）

更多：

1. 可以考虑在某个机器上搭建一个统一的weinre服务器，供团队成员共用，此方案我尚未尝试
2. 在上述第7步开始，可以不采用书签的形式，而是考虑在代码中引入它提供的调试js文件，如 （这种情况适用于不能使用书签的场景，如app内的webview、微信中等，但是上线之前要记得移除这个js的引用）

其他参考链接

• http://people.apache.org/~pmuellr/weinre-docs/latest/Installing.html

调试Android上的Chrome

1. 在Android设备上安装Chrome浏览器（版本>=32，https://play.google.com/store/apps/details?id=com.android.chrome&hl=en ）（只有安卓4.0以上才有Chrome）
2. 开启当前Android设备的USB调试
3. 在PC或MAC上安装chrome浏览器（版本>=32）和对应的Android设备驱动（如果找不到，可以在这个 列表 内尝试）
4. 用USB线连接Android设备，在PC或MAC上的chrome地址栏输入 chrome://inspect 然后回车，或通过菜单图标→工具→检查设备，进入调试界面
5. 勾选界面中的 Discover USB devices ，直到搜索到你的Android设备（ 示意图 ）
6. 在移动设备上弹出的是否允许远程调试上，选择“允许”
7. 在下面的页面列表（将展示已在Android上的chrome中打开的页面），点击对应的 inspect 开始调试
8. 此时将在桌面版Chrome上弹出一个新的标签页，即为调试界面；如果很久都没用响应，请后再试（ 示意图 ）（ 一个免费的服务 ）

其他参考链接

• https://developer.chrome.com/devtools/docs/remote-debugging

调试Android APP里的webview

1. 通过修改代码，在APP内设置允许远程调试（需安卓版本为4.4及以上）： 方法 ，然后安装APP
2. 开启当前Android设备的USB调试
3. 在PC或MAC上安装chrome浏览器（版本>=32）和对应的Android设备驱动（如果找不到，可以在这个 列表 内尝试）
4. 用USB线连接Android设备，在PC或MAC上的chrome地址栏输入 chrome://inspect 然后回车，或通过菜单图标→工具→检查设备，进入调试界面
5. 勾选界面中的 Discover USB devices ，直到搜索到你的Android设备（ 示意图 ）
6. 在移动设备上弹出的是否允许远程调试上，选择“允许”
7. 在下面的页面列表（将展示已在Android上的chrome中打开的页面），点击对应的 inspect 开始调试
8. 此时将在桌面版Chrome上弹出一个新的标签页，即为调试界面；如果很久都没用响应，请后再试（ 示意图 ）（ 一个免费的服务 ）

其他参考链接

• https://developers.google.com/chrome-developer-tools/docs/remote-debugging

调试Android上的UC

1. 在Android设备上安装UC浏览器开发版，http://www.uc.cn/business/developer/ ，点击第一行右侧的“安装包下载”（ 示意图 ）
2. 获取Android设备的IP，一般在WLAN设置内，假设为 4.4.4.4
3. 用和手机处于同一网段的PC或MAC访问步骤2获得的IP后加上 :9998 ，如例子中即为 4.4.4.4:9998
4. 在Android设备上弹出的是否允许远程调试上，选择“允许”（ 示意图 ），即可开始调试（ 示意图 ）

其他参考链接

• http://www.uc.cn/business/download/developer.pdf

调试iOS上的Safari

1. 在iOS设备上打开允许调试：设置→Safari→高级→打开”web检查器“
2. 在MAC上打开Safari的开发菜单：顶部菜单栏“Safari”→偏好设置→高级→打开”在菜单栏中显示“开发”菜单
3. 在iOS设备上的Safari浏览器中打开要调试的页面，然后切换到MAC的Safari，在顶部菜单栏选择“开发”→找到你的iOS设备名称→右边二级菜单选择需要调试的对应标签页，即可开始远程调试（ 示意图 ）
4. 如果没有iOS设备，也可以在Xcode中模拟一台，点击顶部“Xcode”→“Open Developer Tool”→“iOS Simulator”即可打开一个iOS设备的模拟器，并且模拟器里面Safari打开的页面，也是能通过上个步骤中MAC上的Safari调试。 （ 示意图 ）