Visual Studio Codeの新たな拡張機能は 開発者が直接MacとWindows上のエディタからiOSデバイス上で実行されているJavaScriptのウェブアプリやサイトをデバッグすることを可能にすることを目指している、とMicrosoftのJavaScript DiagnosticsプログラムマネージャーであるKenneth Auchenberg氏は記している。
iOSのウェブアプリのデバッグにはMacへアクセスしSafari Web Inspectorを実行する、または、BrowserStackのようなクロスブラウザ互換性チェッカーを使う必要があったとAuchenberg氏は説明する。Visual Studio Codeの新しい拡張機能「Debugger for iOS Web」はMicrosoftがVisual Studico Code Chrome Debuggerのために開発したオープンソースのライブラリであるvscode-chrome-debug-coreを活用しており、他にもios-webkit-debug-proxyとios-webkit-debug-proxy-win32という2つのライブラリを使用してiOSデバイスへのUSB接続を介したコミュニケーションを実現している。iOSデバイスとのコミュニケーションはスクリプトデバッギングAPIのChrome Debugger Protocolと互換性があるWebKit Remote Debugging Protocolに準拠しており、これはMicrosoftのChromeへのデバッグはほぼ変更がなくても動作することを意味する。
Visual Studio Codeの拡張機能はプロジェクトのルートにある.vscode/launch.jsonファイル内の設定により、デバイス上のSafariでURLを開くかSafari内のtabで開くことができる。通常localhostのHTTPサーバーであることが多いローカルの開発サーバーへ簡単にアクセスできるように、Microsoftはポートフォワーディングをエミュレートするため、Appleによりネイティブでサポートされていないlocaltunnelの利用を決めた。LocaltunnelはローカルウェブサーバーへのすべてのリクエストをユニークかつパブリックにアクセスできるURLを通してプロキシーできる。これにより開発機のDNSやファイアウォールの設定を変更することなくローカルウェブサービスを共有することが出来る。
以下はDebugger for iOS Webがサポートしている機能のリスト：
- ブレークポイントの設定
- コー＝ド実行のステップスルー
- 繝
- スタックトレース
- evalスクリプト、スクリプトタグ、動的に追加されるスクリプトのデバッグ
- ウォッチ
- コンソール
Visual Studio Codeの拡張機能Debugger for iOS WebはVisual Studio Code Marketplaceで提供されている。
Rate this Article
- Editor Review
- Chief Editor Action