オープンソースのエディタ「Visual Studio Code」がChromeブラウザのデバッガプロトコルに対応。エディタから直接デバッグ可能に

マイクロソフトがオープンソースで公開している「Visual Studio Code」が、Chromeブラウザのデバッガプロトコルに対応したことが発表されました。

Visual Studio Codeのエディタ画面から、Chromeブラウザで実行しているJavaScriptのブレークポイントの設定と実行と停止、変数の参照などが可能になります。

画面左がVisual Studio Codeの画面、右がChromeブラウザの画面

JavaScriptのSoruce Map機能も働くため、圧縮済みのコードを実行しても自動的にVisual Studio Code上の圧縮前のJavaScriptコードに対応してそのままデバッグ可能。また同様の仕組みのおかげでTypeScriptのコードもVisual Studio Code上でそのままデバッグ可能と説明されています。

ただし現状、Chromeブラウザのリモートデバッグは1つのコネクションしかサポートしていないため、ChromeブラウザでDevToolsを起動すると接続が切れてしまうとのこと。この問題は近いうちに修正されるだろうと説明されています。

Chromeブラウザのリモートデバッグ対応はVisual Studio Codeの追加拡張機能によって提供されます。

関連記事

• 無償のVisual Studio CodeがCordovaに対応。HTML5/JavaScriptでのモバイルアプリケーション開発が可能に
• ［速報］無償のコードエディタ「Visual Studio Code」が、Go言語/Pascal/Reactなどに対応。ベータ版にも到達。Microsoft Connect(); 2015
• ［速報］マイクロソフト、無償のコードエディタ「Visual Studio Code」をオープンソースで公開。Microsoft Connect(); 2015