WebStorm 7の大幅に改善されたJavaScriptデバッガ

新しいWebStorm 7のデバッガは新たにデザインされ、Google ChromeのWebKit Remote Debugging ProtocolV8 Debugger Protocolをサポートしました。

基本的にはデバッガのバックエンドが書き直されただけですが、WebStorm 7ユーザーはきっとパフォーマンスの向上や、便利な機能に気づくことでしょう。主な新機能は以下のビデオで、またこのエントリの後半でご確認いただけます。

更新内容を掘り下げる前に、JavaScriptのデバッグ方法についておさらいしましょう:

  • コンテクストメニューよりDebug fileをクリック。Run/Debug設定が自動的に作成され、ブラウザで開かれます
  • または
  • メインツールバーですでに自分で作成した、または作られているRun/Debug設定を選択してDebugをクリック

Start debug

WebStorm 7のアップデートと改善

Live Edit

Live Edit はHTML や CSS ファイルの更新内容を即座にブラウザで確認できる機能です。ファイルを保存したりブラウザをリロードしたりする必要はありません(こちらのdemoをご覧ください)。現在のところLive EditoはGoogle Chromeのみサポートしています。ChromeのエクステンションであるJetBrains IDE Supportをインストールする必要があります。

WebStorm 7ではLive Editの動作をより安定化させました。HTMLファイルのみならず動作中のアプリケーションでもお楽しみいただけます。

Elementsタブ

新しいElements タブ がデバッガに追加されました。DOMや、JavaScriptによって新たに追加されたDOMエレメントなどを確認することができます。

Elements tab

Elementsタブより即座にオリジナルのファイルや定義箇所へジャンプすることもできます。Cmd(WindowsではCtrl)をお品がrファイル名やクラス名をクリックしてください。

Variables view

Variablesはデバッグウィンドウ内でより見やすくなりました。

一番うれしいアップデートはエディタと同じフォーマットで表示されるようになり、より読みやすくなったことです。配列は折りたたみができるため必要な要素により素早くアクセスできるようになりました。

次に、variablesはlocal、closure、globalスコープに分けられ、ファンクション毎にグループ化されるようになりました。

もう一つ大事なのは __proto__ オブジェクトや、そのプロパティを確認できるようになったことです。

Scope and proto

WebStorm 7 Release Candidateをダウンロードし、すばらしい改善が行われたデバッガをお楽しみください!

Develop with pleasure!

This entry was posted in WebStorm. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *