前端遠程調試

如何調試移動端頁面一直是比較頭疼的事。與桌面瀏覽器不一樣，當H5頁面嵌入到app後，沒法很方便地按出F12來查看元素，或者斷點調試js。另外，移動端設備碎片化很是嚴重，iphone 4 到 iphone 6+，android 更是不用多說。本文就試着對webview的調試方面談一談本身的見解。

設備優先級

不得不認可，咱們不可能開發出一個頁面，它能兼容全部的設備。因此，若是要跨平臺調試，必須明確一個優先級。你能夠從這幾個方面來考慮：

• 屏幕尺寸

iphone 4 是 320 * 480；iphone 6+ 是 414 * 736。

這幾個是衆多屏幕尺寸中的兩種，另外，若是頁面是嵌在app裏的，實際的 viewport 高度可能還要扣除標題欄的高度，會比你想象的還要小。開發前要明白這個頁面將會在多大的屏幕上顯示。

• 像素密度

設備的像素密度有不少，1:2 或 1:3 的，但如今移動端頁面基本上是出2倍圖，在3倍屏上也不會模糊。

由此引起的問題其實也很多。好比1像素邊框的實現。

• 手機系統

android、ios、wp，以及各個系統的不一樣版本，作兼容性時要作一些取捨。哪些頁面是必須兼容到 android 2.3 的，哪些頁面不必。由於android 2.x 和 android 4.4+ 上的調試方式是不一樣的。

• 手機瀏覽器（UA）

別說桌面端有IE、chrome、firefox這麼多瀏覽器，移動端更多。QQ瀏覽器、UC瀏覽器、小米瀏覽器等，再加上各類app自帶的「掃一掃」功能打開的內嵌瀏覽器，好比微信、易信等。移動端兼容性並非加個"webkit"、"moz"、"ms"前綴這麼簡單。

當本來單純的前端領域開始瓜分移動端市場時，前端的坑就更深了。

在開發一個頁面或者功能以前，請務必考慮清楚，這個頁面須要兼容到什麼程度。多用用 caniuse 提早調研好。

Chrome Inspect

當你想要在真機上進行調試時，必須作好這幾點：

1. 明確設備優先級。若是一開始沒有作好調試 android 2.3 或者 iphone 4 系統的準備，接下來的路會很是難走。好比用了低版本系統不支持的css、js特性，後面改起來會比較麻煩。

2. 在 Chrome 自帶的模擬設備上已經測試過。Chrome 的開發者工具提供了一個很是便利的功能，叫 "device mode"，按 F12，點左上角的手機圖標便可開啓。它能：1、篡改UA，不少服務端多是經過 UA 來判斷請求來源的，會爲移動設備返回不一樣的頁面，好比模擬iphone設備、android設備等；2、模擬請求延遲，用於查看弱網狀況下頁面的表現；3、屏幕尺寸；4、touch，固然觸摸事件只是簡單地模擬，真機上的表現會更加複雜。

3. 響應式。主要是針對屏幕尺寸和像素密度。拉伸一下瀏覽器，看頁面是否能正常佈局。

由於真機調試很是麻煩，因此能在桌面端就能調試的事情，就放到桌面端去作。

好，一旦到這裏，就說明遇到了桌面端沒法重現的問題。好比，圖標和文字沒有垂直對齊，頁面壓根沒加載出來等。

而後開始介紹 Chrome Inspect。它只能調試 android 4.0+ 的系統，若是是 ios，在 Safari 上也有相應的工具，若是低於 android 4.0，可使用後面介紹的 Vorlon 等。

Chrome有一篇官方文檔很詳細地介紹瞭如何使用，其中的「安裝」步驟就很少解釋了。

對於真機，先要設置成「容許USB」調試，不一樣廠商可能設置方式不一樣，而後連上電腦，打開Chrome瀏覽器，輸入 chrome://inspect，不出意外應該能看到相似於下圖中的界面：

固然，你得先打開手機瀏覽器才行。

在上圖的界面中選「inspect」，就能調出一個很熟悉的窗口。

這上面的功能和普通F12打開的開發者工具同樣，一樣能夠審查DOM元素、斷點調試js、查看網絡請求等。

這個圖的左上角也有一個手機圖標，開啓後，它能實時顯示手機上的界面。

端口轉發（Port Forwarding）

本地調試時，通常使用 localhost:8080 這樣的地址，可是手機上卻沒法訪問。若是手機和電腦處於一個局域網還好，用相似於 192.168.1.100:8080 這種 ip 訪問也能夠。若是不在一個局域網，就能夠利用端口轉發的功能，把手機上的 8080 端口，轉到本地。

這樣，在手機瀏覽器輸入 localhost:8080，至關於訪問本地服務器了。

圖中，左邊是手機端的端口，右邊是本地端口。

我用genymotion模擬器時，端口轉發的功能一直沒試成功，用localhost訪問時，瀏覽器就崩潰了，不知道什麼緣由。真機上沒試過。

Vorlon

Vorlon是微軟開發的一款「JS注入」型調試工具。什麼意思？就是必須在代碼中插入一段JS腳本，與調試服務器創建一個鏈接，不斷髮送頁面狀態。

好比，桌面端調試時，能夠看到整個DOM結構，那麼經過Vorlon，它會把整個DOM結構發到服務端，而後服務端再把這個DOM結構渲染出來。再好比，調用 console.log 時，本來只是在控制檯打印一段文本，而 Vorlon 會修改這個方法，它把輸入的內容先發給服務端，而後服務端再輸入到頁面中。

具體工做流程如上圖所示。

Vorlon 的通信方式是使用 Socket.io 。

那麼具體怎麼使用呢？

以 Node.js 環境爲例：

$ npm i -g vorlon
$ vorlon

全局安裝vorlon後，調用vorlon命令便可啓動服務，默認監聽 1337 端口。

而後，在要調試的頁面，插入一段JS：

<script src="http://localhost:1337/vorlon.js"></script>

固然，既然是遠程調試，就不能使用localhost，把它改爲計算機的局域網ip，好比 192.168.1.100。

若是手機上打開了這張頁面，那麼請轉到PC瀏覽器，輸入 localhost:1337，就能看到熟悉的調試界面。

紅框中是比較重要的幾個地方：

• CLIENT LIST：當前調試的客戶端

• Dom Explorer：審查DOM元素

• STYLES：能夠實時修改元素樣式

• Network Monitor：查看網絡請求

• Interactive Console：查看控制檯打印的日誌

到這兒，彷佛發現少了點什麼。沒錯，它不能調試js。爲何？你以爲 js 能夠控制瀏覽器斷點 js 嗎？不行的。

以前介紹過，vorlon 的工做原理就是 js 注入，它能作到的是，經過修改原型方法，實時向服務端發送頁面狀態，但瀏覽器畢竟是有安全限制的，不少事情 js 並不能作。它依賴於瀏覽器提供的 api 。

其餘工具

在這以前，我一直使用 weinre 在真機上進行調試，它的功能和 vorlon 如出一轍，但前者貌似不多維護了。

另外有一個叫 GhostLab 的付費軟件，聽說能夠在android 2.x 上調試 js，若是有能力能夠試一下。

在寫這篇文章的過程當中，也調研了一些新奇的工具，好比 Mozilla 的 Vallence，火狐的開發者版本提供了 WebIDE 的功能，一樣跟調試有關，有興趣能夠去官網研究研究。

彙總了一些工具連接：

• Vorlon: http://vorlonjs.com/

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

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

• Vallence: https://developer.mozilla.org/en-US/docs/Tools/Valence

• WebIDE: https://developer.mozilla.org/en/docs/Tools/WebIDE

• GhostLab: https://www.vanamco.com/ghostlab/

• JSConsole: http://jsconsole.com/

• Adobe Edge Inspect CC: http://www.adobe.com/products/edge-inspect.html