h5與安卓和ios除錯

做混合式開發的前端肯定都遇到過，自己在本地寫好的頁面，模擬器上也除錯好了，為什麼到了客戶端上就出了問題呢？那出了問題該如何除錯呢？我總結一下我曾經用到過的方法，可能不是特別全面，但確實在工作當中應用的還可以，如果還有其他方法，歡迎小夥伴們底下評論。

一般來說對於h5與真機或模擬器連調的方法最直接簡單的就是安卓用chrome，ios用safari，如果在其他情況下可以藉助windows下用fiddler,mac下用charles來替換我們需要除錯的檔案。

下面來細說一下：

與安卓除錯

首先需要測試機開啟use除錯，然後在程式碼中加上一行

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}
複製程式碼

在我們本機電腦上開啟chrome,輸入chrome://inspect 在

中如果以上步驟都完成，在測試機中開啟我們要除錯的介面就可以看到提示，點選進入如果出現一片空白，是因為chrome需要從https://chrome-devtools-frontend.appspot.com資源，這時候我們需要翻下牆，之後就可以像我們用chrome除錯程式碼一樣可以單步除錯，檢視css,js檔案，但是有一點，如果需要修改的話就要在安卓本地修改再次執行。 當然還有一點，如果端上訪問的路徑是遠端的，那麼就可以靈活修改。

與ios除錯

與ios除錯那麼就藉助safari瀏覽器，測試機開啟web檢查器之後safari瀏覽器再設定選單欄顯示開發模式，就可以開啟我們要除錯的介面在safari中，進行單步除錯。

目前這兩個是在真機中，如果我們頁面在其他地方除錯，可以藉助fiddler和charles將本地檔案替換遠端檔案，來進行操作。

使用fiddler

由於我本人用的是window,所以對於fiddler比較熟悉

如果以https開頭，那麼裝個擴充套件外掛CertMaker for iOS and Android

在fiddler中,開啟Tools中的

將埠號改為8888,將allow remote computer to connect選中,將我們手機上的網路設定為代理，將autoResponder中的標籤選中，點選add rule新增要替換的檔案,

分別填寫源地址和本地的目標檔案，點選儲存後，在本地除錯的結果就可以在遠端顯示。 另外在fiddler中也可以檢視原始碼，安裝一個擴充套件:Syntax-Highlighting Add-Ons,

點選右側相當的功能標籤，便能檢視，無論是html,json,xml,cookies都有提供。

使用charles

Charles也有map功能，在Tools的

進入相應的設定介面，ytk1.yuantiku.ws的請求重定向到線上伺服器www.yuantiku.com