在 Windows 和 Mac 上進行 iOS Web 除錯

2016 年 8 月 24 日，作者：Kenneth Auchenberg

更新

iOS Web 偵錯程式已棄用，我們現在建議您將 RemoteDebug iOS WebKit Adapter 與 Visual Studio Code 一起使用。要了解更多資訊，請參閱這篇介紹 RemoteDebug iOS WebKit Adapter 的指南。

簡介

除錯在 iOS 裝置上執行的網站只對一部分開發人員開放。例如，使用 Safari Web Inspector (Safari DevTools) 需要一個桌面 Safari 例項，而這隻適用於 macOS 使用者。今天，我們透過一個新的 Visual Studio Code iOS Web 偵錯程式，使移動 Web 開發人員能夠直接從編輯器除錯在 iOS 裝置上執行的 JavaScript。此除錯擴充套件適用於 Mac 和 Windows。

Demo

我們新的 iOS Web 偵錯程式與我們於 2 月份推出的 Chrome 偵錯程式非常相似。在底層，它是在 VS Code 中執行的相同偵錯程式，由我們的開源 vscode-chrome-debug-core 庫提供支援。為了將我們的除錯庫連線到 iOS 裝置，我們利用了兩個開源專案，ios-webkit-debug-proxy 和 ios-webkit-debug-proxy-win32，它們透過 WebKit 遠端除錯協議實現與 iOS 裝置透過 USB 進行通訊。該協議與用於指令碼除錯 API 的 Chrome 除錯協議相容，這意味著我們的偵錯程式無需額外的對映邏輯即可工作。

透過模擬埠轉發實現輕鬆的本地開發

在本地開發網站時，讓移動裝置訪問本地開發伺服器（通常是在 localhost 上執行的 HTTP 伺服器）是一個繁瑣的過程。為了使之更容易，像 Android 這樣的平臺原生支援埠轉發，但 iOS 不支援。

因此，我們找到了一種模擬埠轉發的方法，即透過新增一個選項來啟動 localtunnel 例項，它在幕後為指定的 tunnelPort 屬性建立從本地計算機到公共網際網路的 HTTP 隧道。然後，iOS 裝置使用此 HTTP 隧道來訪問您的本地開發伺服器，就像訪問任何其他公共網站一樣。

Demo

入門

要開始使用，請開啟擴充套件檢視（⇧⌘X (Windows、Linux Ctrl+Shift+X)）。當擴充套件列表出現時，鍵入“ios”來篩選列表並安裝 Debugger for iOS Web 擴充套件。然後您需要建立一個啟動配置檔案，我們會在此處的 README 中詳細解釋。

支援的功能

在此版本中，我們支援以下功能：

設定斷點，包括在啟用源對映時的原始檔中斷點
單步執行
堆疊跟蹤
本地變數窗格
除錯 eval 指令碼、指令碼標籤和動態新增的指令碼
監視
控制檯
透過 HTTP 隧道從本地計算機進行虛擬埠轉發。

開放式試驗

我們新的 iOS Web 偵錯程式是一個公開試驗，這意味著我們將其釋出給公眾，以瞭解整合的 iOS 指令碼除錯對開發人員是否有價值，所以請告訴我們您的想法。

如果您有任何問題或改進建議，請隨時透過 Twitter 或 GitHub 與我們聯絡。

–

JavaScript 診斷專案經理 Kenneth Auchenberg