你在做移動web開發的時候是不是只是在Chrome下開啟移動模式，然后就啪啪啪悶頭敲代碼了？如果你平時只是做做宣傳頁，Chrome的移動模式可能就能滿足你。但是現在越來越多的應用采用Hybrid的開發方式，這樣的話就可能在web頁面上調用webview注入的函數，那么，這個頁面在Chrome上只會報錯，因為我們不在webview里，根本沒有注入的那些函數。

以我現在做的項目為例，要在頁面里判斷在客戶端有沒有登錄，可以這樣寫:

var isLogin = AndroidWebview.hasLogin() ;

結果可想而知，AndroidWebview是客戶端在webview里注入的方法，這里當然會報錯了。

真機測試

這種情況怎么開發呢？回顧一下以前的兩種辦法 :

• 真機 + Chrome inspect ：Chrome 版本必須高于 32，其次你的測試機 Android 系統高于 4.4

• 先用數據線將 Android 測試機連接到電腦上。需要打開測試機上面“開發者選項”中的 “USB 調試”功能。

• 在PC的Chrome上打開Chrome://inspect即可找到你的設備

• 手機進入一個webview頁面，即可在Chrome上看到調試臺了

可以看到，第一個記錄是手機里的瀏覽器的；第二個是記錄是手機助手里的webview。

• 真機 + weinre : 在你本地創建一個監聽服務器，并提供一個JS腳本，需要在需要測試的頁面中加載這段 JS，就可以被 Weinre 監聽到，在 Inspect 面板中調試你這個頁面。

• 安裝 weinre npm install -g weinre

• 開啟 weinre weinre --httpPort 8888 --boundHost -all-

• 瀏覽器打開 localhost:8888 :

4. 將 "2" 這段腳本加載到調試的頁面最后，手機進入頁面，然后進入 "1" ，就可以看到控制臺了

這兩種辦法都需要真機測試，你可以想像一下你在開發、調試時的流程：

寫代碼

拿起手機，進入頁面

有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 調試！

參考

• 淺談Hybrid技術的設計與實現

• 移動前端調試頁面–weinre

• Mac下HTTP/HTTPS抓包工具Charles

• 前端開發調試線上代碼的兩款工具

我的博客，歡迎訂閱

微博粉絲太少，求粉

總結

以上是生活随笔為你收集整理的打造最舒适的webview调试环境的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。