通過 Chrome 調試運行在 IOS-safari 上的頁面

標籤：pen   載入本地   cep   lse   右鍵   too   說明   複製   control   

引自 http://www.cnblogs.com/kelsen/p/6402477.html

本文重點討論如何在 Windows 系統中通過chrome 瀏覽器調試運行在 iPhone/iPad Safari 瀏覽器中的網頁。如果你有一台 iMac/MacBook，可忽略該文檔。iMac 環境下，直接通過 USB 將 iphone 與 iMac/MacBook 連結，之後在 iMac/MacBook 中開啟 Safari 進入偵錯模式，即可對運行在手機中的頁面進行調試。詳情見：Using Web Inspector to Debug Mobile Safari 或 Safari Web Inspector Guide

安裝 iTunes

Windows 系統首先要安裝 iTunes ，開啟 Apple 官網下載 iTunes 並完成 iTunes 安裝，否則電腦無法正確識別 iPhone 裝置。

開啟偵錯模式

要遠端偵錯 IOS Safari ，必須啟用 Web 檢查 功能，開啟 iPhone/iPad 依次進入 設定 > Safari > 進階 > Web 檢查 > 啟用。

ios-webkit-debug-proxy

ios-webkit-debug-proxy 是一個 DevTools proxy ，項目託管在 Github 上。其使得開發人員可以發送命令到真實（或虛擬）IOS裝置中的 Safari 瀏覽器或 UIWebViews 。

安裝部署

項目地址：https://github.com/artygus/ios-webkit-debug-proxy-win32

在 Binaries 小節點擊下載連結。

下載後完成解壓縮，將ios-webkit-debug-proxy-win32 目錄複寫到 C:\ 盤。

在系統內容變數添加 C:\ios-webkit-debug-proxy-win32。

啟動 proxy

開啟命令列終端，執行：

ios_webkit_debug_proxy-win32.exe -f chrome-devtools://devtools/bundled/inspector.html

 

注:我下載的win64位的版本，運行CMD，執行如下命令(不帶-win32.exe)：

ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

 

輸出結果如下：

ios_webkit_debug_proxy-win32.exe -f chrome-devtools://devtools/bundled/inspector.html
Listing devices on :9221 
Connected :9222 to iPhone (c356a29f73043a36aa6de64b088d55aeeda8f034)

開始調試

開啟 chrome 瀏覽器，在地址欄輸入 http://localhost:9221/ ，這裡會顯示所有已串連的裝置清單，選擇一個裝置並點擊開啟。

開啟的頁面可看到當前 iphone 中 Safari 瀏覽器開啟的所有頁面，點擊要調試的頁面連結開啟即可進入調試介面。此時可能會有一個錯誤提示如下

Note: Your browser may block1,2 the above links with JavaScript console error:  Not allowed to load local resource: chrome-devtools://...To open a link: right-click on the link (control-click on Mac), ‘Copy Link Address‘, and paste it into address bar.

提示瀏覽器禁止頁面載入本地資源，需在上面的連結上點擊右鍵複製連結，然後手動建立一個標籤頁將連結粘貼進去，斷行符號訪問。

根據提示說明複製連結並開啟，即可看到常見的 chrome 調試視窗。

接下來，就可以進行正常的調試工作了。

 

通過 Chrome 調試運行在 IOS-safari 上的頁面