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