iOS之Safari調試webView/H5頁面

以前作過混合開發，用的是JavaScriptCore+OC+UIWebView。

Safari調試功能真的頗有用，經過它能夠輕鬆定位問題的所在，下面說說怎麼調試.

開啓Safari開發菜單

在Mac的Safari偏好設置中，開啓開發菜單。具體步驟爲：Safari -> 偏好設置… -> 高級 -> 勾選在菜單欄顯示「開發」菜單。

 

 

iPhone開啓Web檢查器

具體步驟爲：設置 -> Safari -> 高級 -> Web 檢查器。

 

 

運行App

打開項目，Cmd + R 運行，打開想調試的Web頁面。

 

 

調試對應的頁面

打開Safari -> 開發 -> 設備 -> URL。

 

選中的頁面會變成藍色，點擊而後打開了以下的界面。

 

這個頁面就很像Windows 平臺Chrome的F12。能夠打斷點：

 

查看斷點

 

 

查看Cookie

 

打印Cookie或者元素

 

 

好比在這裏Alert頁面的title，輸入 alert(document.title);，你會在模擬器中看到彈窗

 

 

總體十分有用，操做的體驗跟Xcode很像，小夥伴們自行探索。

 

好比新作的h5頁面中，有一個分享按鈕，點擊調用原生的分享，可是發現，點擊以後沒有反應了，什麼問題呢？是Native端實現有問題，仍是前端寫的有問題呢？如圖

 

咱們來幫忙看下吧，打開Safari Web 檢查器，定位到資源，而且在share方法中添加斷點，如圖

 

會發現，並無斷住，而是頁面直接報錯了，仔細查看錯誤描述，share方法裏多了一個「/」，所以報錯了。當我點擊分享按鈕時

 

 

會發現，提示找不到變量share。這裏我須要說明一下：

當js中報錯的時候，報錯位置所在的函數以及報錯位置以後的代碼，都不會執行，因此我點擊分享時，提示的是找不到方法，由於js的語法不對，報錯了，這裏解析不出來，因此也就沒有了share、testAddMethod和以後的函數。

那麼當我點擊分享下面的按鈕是，調用share下面定義的方法也就會提示找不到對應的函數了。

 

 

至此，問題找到了，只要告以前端開發人員便可，讓他修復便可。

實際遇到的問題可能要複雜的多，能夠經過斷點，以及控制檯打印一些js變量的值，DOM操做來尋找問題，解決問題。但願能夠幫助到小夥伴們。