IE開発者ツールでJavaScriptコードを整形して表示するには？

　Webブラウジング中にショートカット・キー［F12］を押すと起動できる「開発者ツール」が、バージョン8以降のInternet Explorer（以下、IE）には搭載されている。開発者ツールは、現在
開いているWebページのHTMLコード内の各要素をツリー形式でビジュアルに表示したり、Webページ上の要素をクリックして、それに該当するコードを表示したり、HTMLコードやCSSプロパティなどをその場で試しに書き換えてリアルタイムにWebページの表示を変更したりできるなど、Web制作に役立つ機能がそろっている。そういったWeb開発用機能の1つとして、JavaScriptコードのデバッグ機能がある。

　IE9では、この開発者ツールが強化され、JavaScriptコードの書式を整形して、見やすく表示する機能が追加された。本TIPSでは、この機能の使い方を説明する。

■開発者ツール（IE9以降）のJavaScriptコード書式整形機能

　特に昨今のJavaScriptコードでは、通信量を極力減らして実行速度を高めるなどの目的で、コードの圧縮が行われている。そのため、生のJavaScriptコードは大変読みにくく、実際に稼働中のサイトのJavaScriptコードをデバッグしてみると、JavaScriptコードの解読に時間がかかってしまう場合がある。

　圧縮されているJavaScriptコードを解読したい場合には、IE9以降に実装されているJavaScriptコードの書式整形機能が役立つ。

　具体的には、開発者ツールの［スクリプト］タブのツールバー上にある［構成］ボタンをクリックして（ショートカット・キーは［Alt］＋［Ctrl］＋［O］キー）、表示されるメニューから［JavaScript の書式設定］をクリックする。

　これにより、JavaScriptコードの書式が整形され、読みやすくなる

　こうやって整形された状態でも、もちろんJavaScriptコードをデバッグできる。