このたび、IE の開発者ツール (F12) と、Visual Studio 2013 Update 2 において大規模な更新を実施しました。F12 の更新は、IE11 の新しいリリースに含まれています。
以前、このブログで F12 の機能と、F12 では高速で反復的なワークフロー、DOM Explorer での正確なデータの提供、メモリおよびパフォーマンス ツールでの実用的なデータの提供に注力していることを説明しました。
F12 の今回の更新では、次のような機能強化が施されています。
では、今回 F12 に施された機能強化を見ていきましょう。
F12 などのツールの最大の利点は、ソース コードを開かなくても、Web サイトの表示状態をブラウザーから直接編集できることです。ただし、時間をかけて編集していると、CSS に対するすべての変更を把握し、元のソースに最終的な編集内容を適用することは難しくなります。この状況を改善するため、変更を記録および管理する機能を導入しました。変更は、"変更バー" を使って視覚的に、または DOM Explorer の新しい [変更] CSS パネルを使って管理できます。
DOM Explorer の [スタイル] ウィンドウから CSS のルールやプロパティを変更すると、編集したプロパティまたはルールの左側の余白に、変更されたことを示す目印が表示されます。これは "変更バー" と呼ばれ、新しく追加されたプロパティは緑色、変更されたプロパティや値は黄色、削除されたプロパティは赤色で示されます。この変更バーは消えません。他の DOM ノードに移ってデバッグを始めた後も、維持されます。
[スタイル] タブに表示された変更バー
多数のコードにわたって複数の編集を行うことを考慮し、[CSS] パネルに、現在の F12 セッションで行ったすべての変更を列挙する新しいタブを追加しました。変更は "差分" 表示されるため、ソース コードを手動で編集する際に、チェック リストとしてこれを使用できます。また、コンテキスト メニューから、変更内容のコピーや取り消しが可能です。
新しい [変更] タブ
Web サイトやアプリを開発する際は、jQuery や Angular など、サード パーティのライブラリが使われると思いますが、このようなライブラリは、通常、縮小化されています。自分が作成したコードをデバッグしていて、ライブラリ コードにステップ インすると、ライブラリの深い階層に迷い込んで、自分のコードになかなか戻れず、問題をデバッグできなくなることがよくあります。
Visual Studio は、しばらく前からマネージ言語を対象に "Just My Code" (JMC) という機能をサポートしています。この機能は、Visual Studio 2012 からは JavaScript にも対応しま��た。JMC の基本的な考えは、デバッガーを自分のコードに留めておくことです。つまり、実際には変更できないコードに移動するのではなく、デバッグするコード内に維持します。
この機能が今回の更新で F12 に導入されたことで、主なデバッグ関連の変更として次の 2 点が挙げられます。
ライブラリ コードとしてファイルをマーク
既定では、F12 では "*.min.js" という URL に一致するファイルがライブラリ コードと見なされますが、この動作は簡単に変更できます。デバッガーのファイル ピッカー、または、ファイルがデバッガーで開かれている場合は [File] (ファイル) タブのコンテキスト メニューから、ライブラリをマークします。
この機能とそのワークフローについては、今後の記事でもっと詳しくお話しします。
最近ますます JavaScript アプリが複雑になるにつれ、JavaScript にコンパイルされる別の言語を使ってコードを作成する傾向が強まっています (たとえば、F12 のツールは、TypeScript で書かれ、JavaScript にコンパイルされています)。同様に、もともとは別の言語で作成し JavaScript にコンパイルしたコードを最小化していることがあります。このようなコンパイル処理が行われるということは、ブラウザーで実行され、デバッグの対象になる JavaScript と、エディターで編集されたコードとは同じではないということで、デバッグをさらに難しくしています。
この問題を解決するため、コミュニティ主導で策定された "ソース マップ" (仕様) と呼ばれるフォーマットがあります。これは、元のソースとコンパイルされたファイルとをマップするもので、各種ブラウザーや Visual Studio での採用が広く進んでいます。ソース マップは、コンパイル時に生成され、この F12 のリリースでは、バージョン 3 のソース マップの仕様に対応しました。
コンパイルされた JavaScript ファイルに有効なソース マップがあり、"ソース マップ" オプションが有効な場合、F12 は既定で、実行中の JS ファイルではなく、元のソース ファイルを読み込みます。この場合、次のような機能があります。
Just-My-Code と同様に、ソース マップについても、今後の記事でさらに詳しく説明します。
メモリ リークをデバックする場合、通常、フィルターを使っていても、メモリ プロファイラーから大量のデータが返されるため、リークを見つけるのは一苦労です。F12 では、既に、アプリの状態の概要を示すスナップショット タイルを生成し、必要に応じて、別のビューで DOM 情報を表示して潜在的な問題を確認できるツールを提供しています。ただし、今回の更新ではさらにレベルアップし、さらに簡単に問題の箇所を特定できるようにしたいと考えました。
今回の更新で、F12 メモリ ツールでは、3 つのスナップショットを比較できるようになり (スナップショットの表示内容を絞り込む機能もあります)、リークをさらに簡単に特定できるようになりました。この 3 つのスナップショットは、次のとおりです。
これらのスナップショットでは、スナップショットどうしの比較や、新しい [Scope] (スコープ) ドロップダウン ボックスを使用して [objects left over from snapshot #2] (スナップショット 2 から残っているオブジェクト) フィルターを適用して、シナリオ実行後の状態と解放されているはずのオブジェクトの確認を行うことができます (下図参照)。
スコープ フィルター
上の図の [Types] (型) ビューには、オブジェクトが列挙され、問題がある可能性のあるオブジェクトには、余白部分にマークが表示されます。
モバイル向けの魅力的な Web サイトの開発に取り組んだことがあるなら、モバイル ブラウザーで正しく表示されない、または動作しないという問題を経験したことがあるのではないでしょうか。Windows Phone でのこの問題の解決を支援するため、Visual Studio 2013 Update 2 では、Visual Studio のデバッグおよびパフォーマンス ツールが Windows Phone 8.1 用の Internet Explorer に対応しました。詳しくは Visual Studio ALM ブログ (英語) をご覧ください。
F12 の今回のリリースでは、お客様から寄せられたさまざまなご要望に応えられるよう、努力しました。また、ネットワーク検査によってクラッシュが発生するバグや、F12 で下位バージョンをエミュレートするためのドキュメント モード使用時に、条件付きコメントが正しく処理されないバグを修正しました。ここにはどのバグが修正されたかは記載しませんが、IE の Microsoft Connect サイト (https://connect.microsoft.com/IE/Feedback) で対応状況をお知らせいたします。
F12 の今回のリリースのその他の変更は、次のとおりです。
IE11 および F12 の今回の更新では、最新の機能とバグの修正プログラムをできるだけ早く、より多くご提供できるように、開発者ツールの更新に努めています。今後の発表にご期待ください。また、新機能に関して、何かフィードバックやご質問がある場合は、Twitter (@IEDevChat)、IE11 のフィードバック送信ツール、または Connect からご連絡ください。
今回の記事では、F12 の新機能についてほんの一部を紹介しました。これから数週間にわたり、さらに F12 の機能と使い方をこのブログで詳しく説明する予定です。また、MSDN で F12 開発者ツールの完全なドキュメントをご覧いただけます。
皆様からのフィードバックもお待ちしております。その際は、Twitter (@IEDevChat)、IE11 のフィードバック送信ツール、または Connect のいずれかをご利用いただけるとさいわいです。
— F12 ツール担当プログラム マネージャー、Andy Sterland
— F12 ツール担当プログラム マネージャー、Jonathan Carter
— F12 ツール担当リード プログラム マネージャー、Simon Calvert