WebStorm 7 の JavaScriptデバッガ:強力なElementsタブ

WebStorm 7 の JavaScriptデバッガ:強力なElementsタブ

何年かぶりにスーツを新調したら結構様式が変化していて驚いたtanakaです。

WebStorm/PhpStromのJavaScriptデバッガについては[PhpStorm/WebStorm]JavaScriptデバッガを使おう!で紹介しましたが、バージョン7にアップデートして試してみるといくつかの機能が追加されているようです。今日はその中で特に便利なElementsタブ機能を紹介します。

Elementsタブ:ブラウザで表示中のDOM/HTMLがエディタで見られる!

JavaScriptデバッガの更新で、Elementsタブが一番の目玉みたいです。下の画像を見てください

20131107tanaka_phpstorm_jsdebug01.png

エディタの上半分はフォルダツリーとエディタ、下半分がデバッガで、ブラウザでレンダリングされたDOMとHTMLがElementsタブで見られるようになっています。このElementsタブ、いまはまだChromeでしか使えないようですが、よくブラウザと連携しています。たとえば、ブラウザで、「add Item!!」ボタンを押すと、li要素が増えるようになっているんですが、クリックして要素を増やすと

20131107tanaka_phpstorm_jsdebug02.png

ElementsタブのDOMツリーとHTMLにも反映されます。逆にElementsタブ内のフォルダツリーやテキストをクリックすると

20131107tanaka_phpstorm_jsdebug03.png

要素のBOX領域がハイライトします。(Structureペインのpをクリックしたところ)クリックして要素がハイライトするのはElementsタブだけではありません。エディタ部分でもハイライトするので、ブラウザで確認しながら編集することができます。

このElementsタブ、要素を削除したり、属性を編集するなどはできませんが、エディタ同様折りたたみできるため、デバッグのときのストレスはかなり減らせそうだと思いました。さてElementsタブですが、セットアップについては前回の記事で紹介しましたので、お試しください。以上で紹介終わります。

参考

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ