iOS開發Safari調試WebView頁面

標籤：simulator   相同   資訊   app   upload   過程   title   如虎添翼   blog   

App混合開發現已是常態，不過作為app端開發人員，對H5頁面的使用，可不能簡單的局限於使用，一些簡單的調試方法還是有必要瞭解的。

關於如何在使用webview過程中，如何對web內對內容進行調試，這裡會簡單講一下步驟。

 

一、真機或Simulator  開啟"設定"->"Safari"->"進階"->"Web檢查器" 

 

 

 

二、開啟電腦上 Safari  ->“喜好設定” -> “進階” -> “在功能表列中顯示開發選項”

下面我會使用模擬器進行測試。 

 

三、這時，我們不運行app，可以先查看一下Simulator，發現是沒有東西的。

 

 

四、然後我們運行app，並開啟一個webview，載入一個h5頁面。在此查看 步驟三 ，會發現如下：

 

 

紅框內就是我們正在啟動並執行webview頁面。

我們開啟safari，點擊一下上面的紅框，會彈出一個網頁檢查器，類似：

 

這裡顯示的就是webview上的內容，我們可以通過這個進行一些調試，就跟windows下 按F12調試一個道理。

在彈出的網頁檢查器中，可以看到當前正在載入網頁的各種資訊，包括元素源碼、網路、資源與指令碼、控制台輸出等。並且它和Web前端的調試方式相同，你可以直接修改網頁的CSS樣式，對網頁布局源碼等進行修改，使用調試器進行指令碼調試，而不需要重新運行整個APP。

 

五、這邊我以《百度》舉例

 1、webview載入百度網站“http://www.baidu.com”

 

2、開啟safari的網頁檢查器

 

3、比如我要修改這幾個名字

 

 按1、2、3步驟進行操作：

 

 最後的結果如下：

 

當然這是最基礎、最簡單的操作，像其他改某段字型大小，label長度等等，你都可以嘗試看看

 

如果你懂一點前端web開發，那就如虎添翼了，web調試信手拈來。。。

 

enjoy ～

 

iOS開發Safari調試WebView頁面