WindowsおよびMacでのiOS Webデバッグ

2016年8月24日 Kenneth Auchenberg

更新

iOS Webデバッガーは非推奨となり、現在はVisual Studio CodeとRemoteDebug iOS WebKit Adapterを併用することをお勧めしています。詳細については、RemoteDebug iOS WebKit Adapterの入門ガイドをご覧ください。

はじめに

iOSデバイスで動作するウェブサイトのデバッグは、ごく一部の開発者のみが利用できます。例えば、Safari Webインスペクター（Safari DevTools）を使用するにはデスクトップ版Safariが必要ですが、これはmacOSユーザーのみが利用できます。本日、モバイルウェブ開発者がiOSデバイスで実行されているJavaScriptを、エディターから直接デバッグできるようにする、新しいVisual Studio Code用iOS Webデバッガーを公開します。このデバッグ拡張機能は、MacとWindowsの両方で動作します。

Demo

私たちの新しいiOS Webデバッガーは、2月に紹介したChromeデバッガーと非常によく似ています。内部的には、VS Code内で実行されている同じデバッガーであり、オープンソースのvscode-chrome-debug-coreライブラリによって動作しています。デバッグライブラリからiOSデバイスへの接続を確立するために、私たちは2つのオープンソースプロジェクト、ios-webkit-debug-proxyとios-webkit-debug-proxy-win32を活用しています。これらは、WebKit Remote Debugging Protocolを介してUSB経由でiOSデバイスとの通信を可能にします。このプロトコルは、スクリプトデバッグAPIにおいてChrome Debugging Protocolと互換性があるため、追加のマッピングロジックなしでデバッガーが機能します。

エミュレートされたポートフォワーディングによる簡単なローカル開発の実現

ローカルで動作するウェブサイトを開発する場合、通常localhostで動作するHTTPサーバーであるローカル開発サーバーにモバイルデバイスがアクセスできるようにすることは面倒なプロセスです。これを容易にするために、Androidのようなプラットフォームはポートフォワーディングをネイティブにサポートしていますが、iOSはこれをサポートしていません。

そこで、私たちはlocaltunnelのインスタンスを起動するオプションを追加することで、ポートフォワーディングをエミュレートする方法を見つけました。これは、指定されたtunnelPortプロパティに対して、舞台裏でローカルコンピューターから公開インターネットへのHTTPトンネルを作成します。このHTTPトンネルは、iOSデバイスが他の公開ウェブサイトと同様に、ローカル開発サーバーにアクセスするために使用されます。

Demo

はじめに

開始するには、拡張機能ビューを開きます (⇧⌘X (Windows、Linux Ctrl+Shift+X))。拡張機能リストが表示されたら、「ios」と入力してリストをフィルタリングし、Debugger for iOS Web拡張機能をインストールします。その後、起動構成ファイルを作成します。これについては、こちらのREADME で詳しく説明しています。

サポートされる機能

このリリースでは、以下の機能をサポートしています。

ソースマップが有効な場合のソースファイルを含むブレークポイントの設定
ステップ実行
スタックトレース
ローカルペイン
evalスクリプト、スクリプトタグ、動的に追加されるスクリプトのデバッグ
ウォッチ
コンソール
ローカルコンピュータからのHTTPトンネルによる仮想ポートフォワーディング。

オープンな実験

新しいiOS Webデバッガーは公開実験です。これは、開発者にとってiOS向けの統合スクリプトデバッグが価値があるかどうかを判断するために、一般公開するものです。ぜひご意見をお聞かせください。

問題や改善のアイデアがありましたら、TwitterまたはGitHubまでお気軽にご連絡ください。

–

Kenneth Auchenberg、プログラムマネージャー、JavaScript Diagnostics