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 外掛程式，可以Just-in-Time 偵錯，很讓人心動，隨之各瀏覽器廠家及外掛程式開發人員不斷提供這方面的支援，使得 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檔案，如 <script src="http://4.4.4.4:8080/target/target-script-min.js#anonymous"></script> （這種情況適用於不能使用書籤的情境，如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調試。 （ ）

iOS WKWebView 混合應用開發時代來臨 - 嵌入式 JS 的調試成為催化劑