你在做移動web開發的時候是不是隻是在Chrome下開啟移動模式，然後就啪啪啪悶頭敲程式碼了？如果你平時只是做做宣傳頁，Chrome的移動模式可能就能滿足你。但是現在越來越多的應用採用Hybrid的開發方式，這樣的話就可能在web頁面上呼叫webview注入的函式，那麼，這個頁面在Chrome上只會報錯，因為我們不在webview裡，根本沒有注入的那些函式。
以我現在做的專案為例，要在頁面裡判斷在客戶端有沒有登入，可以這樣寫:
|
1 2 |
var isLogin = AndroidWebview.hasLogin() ; |
結果可想而知，AndroidWebview是客戶端在webview裡注入的方法，這裡當然會報錯了。
真機測試
這種情況怎麼開發呢？回顧一下以前的兩種辦法 :
- 真機 + Chrome inspect ：Chrome 版本必須高於 32，其次你的測試機 Android 系統高於 4.4
121. 先用資料線將 Android 測試機連線到電腦上。需要開啟測試機上面“開發者選項”中的 “USB 除錯”功能。- 在PC的Chrome上開啟
Chrome://inspect即可找到你的裝置 - 手機進入一個webview頁面，即可在Chrome上看到除錯臺了
可以看到，第一個記錄是手機裡的瀏覽器的；第二個是記錄是手機助手裡的webview。
- 在PC的Chrome上開啟
- 真機 + weinre : 在你本地建立一個監聽伺服器，並提供一個JS指令碼，需要在需要測試的頁面中載入這段 JS，就可以被 Weinre 監聽到，在 Inspect 皮膚中除錯你這個頁面。
121. 安裝 weinre `npm install -g weinre`- 開啟 weinre
weinre --httpPort 8888 --boundHost -all- - 瀏覽器開啟
localhost:8888:
- 將 “2” 這段指令碼載入到除錯的頁面最後，手機進入頁面，然後進入 “1” ，就可以看到控制檯了
- 開啟 weinre
這兩種辦法都需要真機測試，你可以想像一下你在開發、除錯時的流程：
- 寫程式碼
- 拿起手機，進入頁面
- 有BUG，重複1、2
- 開發新功能，重複1、2、3
然後你的手不停地在鍵盤和手機之間切換，多麼痛苦。後來，我遇到了Genymotion。
Genymotion
這是一款安卓模擬器，有了它我們可以在電腦上開啟一個安卓機。具體使用我就不細說了，很簡單請自行搜尋。
這是我在模擬器上安裝的手機助手：
而且使用 Chrome inspect 是直接可以除錯模擬器中的webview的：
這樣，我們就可以不用手忙腳亂地寫程式碼、看手機了，一切都在PC上除錯。但是我們在模擬器上看到的是線上程式碼，我們加一個新功能還要釋出程式碼才能看到效果？
Charles / Fiddler
幸好有Charles這樣的工具(Windows下請使用Fiddler)，Charles會在本地開啟一個代理服務，預設介面8888。通過這個代理，模擬器上的請求會被轉移到電腦上，我們可以任意地去替換請求檔案讓我們更加方便地除錯頁面。
設定監聽埠
Proxy Settings – HTTP Proxy – Proxies – HTTP Proxy 中設定
監聽Chrome
因為 Charles 只會監聽全域性和Firefox，為了能監聽Chrome，使用Proxy SwitchyOmega外掛，增加一個情景模式：
在這個情景模式下，我們就可以抓到在Chrome裡的資料了：
注意：Charles預設是不支援https的，我們選擇 設定 – Proxy Settings – SSL ，選中 Enable SSL Proxying 。然後在 Locations 裡填寫要抓包的域名和埠，點選 Add，Host填寫域名，如 www.baidu.com ，port填 443 。具體參考最後的文章。
監聽Genymotion
別忘了，使用Charles的初衷是讓我們可以用本地的檔案替換線上檔案，不用每次修改都要釋出。
- 在Genymotion中，
Settins–Network(port選9999是因為我之前在Charles中設定的是9999) :
- 在開啟的模擬器中，
設定–WLAN–長按2秒–修改網路，代理設定改為手動，主機名為10.0.3.2，埠為9999，和上面一致。 - 然後在模擬器中開啟webview頁面就可以看到所有請求了
- 右鍵儲存原始檔到本地，然後新增一行alert程式碼 。
- 在請求上右鍵，選擇
Map Local
- 選擇剛才修改過的檔案
- 重新載入頁面 :
這樣，我們利用模擬器+Chrome+Charles就可以完美開始、除錯webview頁面了，模擬器當做手機，Chrome insepct 調樣式、介面、檢視資料，利用Charles對映本地檔案直接檢視效果。
至於iOS上的webview除錯，模擬器+Safari+Charles應該也是一樣的。我沒有試過，試過的人請告知。
2015-12-17 更新
最近還使用了 browsersync ，這個東西除錯、開發簡直不要太爽。在本地開啟一個伺服器，頁面放進去，然後開啟模擬器，進入這個頁面，儲存檔案的時候模擬器自動重新整理，而且能直接呼叫客戶端的介面，再也不怕報錯了。
如果你說 Gulp 也能自動重新整理，那下面的是 Gulp 沒有的：你在本機開啟 wifi ，然後手機連線，進入頁面。這樣，你每儲存一次檔案，手機webview 和 模擬器 webview 同時自動重新整理，而且這兩個頁面是同步的，就是說，你在模擬器上點選這個按鈕，手機上那個頁面也會點選這個按鈕。這樣你每次測試的時候，電腦旁擺一排測試機，而你也需要模擬器上點一下，這些測試機都會自動點一下！ browserSync 自帶 weinre ，這樣哪個測試機出了問題，你可以直接開啟 weinre 除錯！