BT

Visual Studio CodeでiOS Webアプリのデバッグが可能に

| 作者: Sergio De Simone フォローする 12 人のフォロワー , 翻訳者 伊藤 貴洋 フォローする 0 人のフォロワー 投稿日 2016年9月7日. 推定読書時間: 2 分 |

原文(投稿日:2016/08/31)へのリンク

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-proxyios-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

Relevance
Style
 
 

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT