1. 程式人生 > >通過 Chrome 調試運行在 IOS-safari 上的頁面

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

所有 sin AS 忽略 log tool links 討論 下載鏈接

引自 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 上的頁面