Chrome DevTools 11 月のダイジェスト

Deanna Rubin
X

Chrome DevTools は迅速に動作するので、いくつかのコンポーネントに導入されたいくつかの新機能と改善点に注目してください。具体的には UI の変更、JavaScript の高精度プロファイリング、 Workspaces の新機能について説明します。

  • 高解像度プロファイリングの精度が 0 .1 ミリ秒に
  • ツールバーを DevTools の上部に、オーバーライドをコンソール ドロワーに移動しました
  • ワークスペースに、ファイルの追加、削除、検索をサポートするいくつかの機能が追加されました

高解像度プロファイリング

CPU プロファイリングは、JavaScript の効率を確認するのに非常に便利な機能です。従来のプロファイル ビューに加えて、今年の夏にフレームチャートが導入されました。これは、ページの JavaScript 処理の推移を視覚的に表します。これにより、コールスタックの深さや、個々の関数の処理にかかる時間を簡単に確認できます。

最近まで、従来の [Heavy]（ボトムアップ）表現と [Tree]（トップダウン）表現、およびフレームチャートでは、どちらも 1 ミリ秒の精度までしかプロセスを表示できませんでした。ほとんどのアプリケーションでは、これで十分です。ただし、ゲームなど、UI で速度が非常に重要となる作業に取り組んでいる場合、1 ミリ秒の解像度では、サイトの動作が遅い原因や UI が遅く感じられる原因について有意義な結果が得られない可能性があります。高解像度プロファイリングを有効にするには（現時点では Canary のみ）:

  1. DevTools の設定を開きます。
  2. [General] タブの [Profiler] で、[High resolve CPU profiling] をオンにします。

次に、通常のプロファイリングと高解像度で表示されるフレームチャートの例を示します。ここでは、HTML5Rocks.com ホームページを読み込むプロファイルを示しています。

標準の解像度のフレーム チャート。
高解像度のフレームチャート。

通常のプロファイリングの解像度では、プロセス時間は常に次のミリ秒に切り上げられるため、0.1 ミリ秒以下のプロセスでも 1.0 ミリ秒かかり、他のプロセスはコールスタックにまったく表示されない可能性があります。

高精度プロファイリングは、JavaScript VM のオーバーヘッドが大きいため、デフォルトでオフになっています。もちろん、通常のプロファイリング解像度よりもクールに見えますが、精度が本当に必要な場合にのみ使用することをおすすめします。

DevTools UI の改善

Canary では常に新しい機能がリリースされていますが、UI にいくつかの大きな変更があります。たとえば、通常は UI の上部に表示されるボタン、タイムラインのナビゲーションと情報パネル、コンソール ドロワーへのオーバーライドの再配置です。

まず、Google のソースを見てみましょう。いずれにせよ タイムラインの話なので現在、Chrome（安定版）のタイムラインは次のように表示されます。

古いタイムライン。

タイムラインはこのように表示されます

新しいタイムライン。

次の点に注意してください。

  1. ツールバーとボタンがすべて画面上部に表示され、左側の特定のタイムライン用ボタンと右側の一般的な DevTools 用ボタンの両方が表示されます。
  2. タイムライン レコードは左側のパネルでネスト構造になり、キーボードでスクロールできるようになりました。上下のキーを使用して上下にスクロールするだけでなく、左右のキーを使用してネストされたレコードを開いたり閉じたりすることもできます。
  3. 選択したエントリの右側のパネルに、時間の詳細が表示されるようになりました。（他のエントリにカーソルを合わせて情報を表示することもできます）。

次に、コンソール ドロワーを見てみましょう。コンソール ドロワーを開くには、DevTools 内で Esc キーを押すか、コンソール ドロワー ボタン ドロワー アイコン を押すとドロワーが下から上に回転します。

デフォルトでは、[コンソール] タブと [検索] タブが表示されます。オーバーライド（旧称「オーバーライド」）にアクセスするには、DevTools の設定を開き、[Show 'Emulation' view in console console]（Emulation ビューをコンソール ドロワーに表示できる）チェックボックスをオンにします。設定ボックスを閉じると、次のスクリーンショットのように、コンソール ドロワーに [Emulation] タブが表示されます。

コンソール ドロワーとオーバーライド。

すべてのエミュレーションをここで行うことができます。

この変更の理由は、以前は [設定] を開いたり閉じたりしてエミュレーションのオーバーライドを変更し、戻ってページを表示する必要があったためです。スタイルを操作しながら、エミュレーションのオーバーライドを変更できるようになりました。

ワークスペースの改善

特にワークスペースは作成ワークフローを かなり簡素化できる機能ですがワークスペースを使用すると、DevTools で実験して変更を行い、変更をコピーしてソースファイルに貼り付ける必要はありません。DevTools で変更を行い、ブラウザでレンダリングし、ファイルの永続的なローカル バージョンに保存できます。これらはすべて Chrome を離れることなく行えます。

Chrome Developer Tools Revolutions 2013 の記事をまだお読みでない方は、ご覧になって、ここ数か月間の機能改善の様子をご覧ください。

ファイルの追加がより簡単に

Revolutions 2013 の記事では、新しいワークスペースを作成するには、フォルダをワークスペースに追加してから、フォルダをネットワーク リソースにマッピングする必要がありました。このプロセスを 1 つのステップに簡略化しました。[ソース] の左側のパネルを右クリックして、[フォルダをワークスペースに追加] を選択するだけです。ファイル ダイアログが開き、ワークスペースに追加する新しいフォルダを選択できます。（現在ハイライト表示されているフォルダはワークスペースに追加されません）。

ワークスペースにフォルダを追加します。

ファイルの作成と削除

ワークスペース内でワークスペースに使用しているローカル ディレクトリに、新しいファイルを追加できるようになりました。左側の [Sources] パネルでフォルダを右クリックし、[New File] を選択します。

新しいファイルです。

ワークスペース内からファイルを削除することもできます。左側の [Sources] パネルでファイルを右クリックし、[Delete File] を選択します。

ファイルを削除

[Duplicate File] を選択して、ファイルを複製することもできます。

更新

ワークスペースで直接新しいファイルの作成（またはファイルの削除）を行えるようになったため、Sources ディレクトリも自動的に更新されて新しいファイルが表示されます。表示されていない場合は、いつでもフォルダを右クリックして、ポップアップ メニューから [Refresh] を選択して強制的に更新できます。

これは、別のエディタで開いたファイルを変更し、その変更を DevTools に表示したい場合にも便利です。

ファイルから検索

ファイル全体を検索するインターフェースが改良され、ワークスペース内のすべてのファイルの文字列と、DevTools に読み込まれたすべてのファイルの文字列を検索できるようになりました。文字列または正規表現のいずれかで検索して、すべてのファイルやページ内のすべての出現を照合できます。ワークスペース（現在は Canary 版）で複数のファイルを検索するには:

  • Esc キーを押してコンソール ドロワーを開き、[Console] の横にある [Search] タブをクリックして検索ウィンドウを開きます。

OR

Ctrl + Shift + F（Mac では Cmd + Opt + F）キーを押して [検索] ウィンドウを開きます。

  • [ソースを検索] ボックスにクエリを入力して、Enter キーを押します。クエリが正規表現を使用する場合や、大文字と小文字を区別する必要がない場合は、該当するボックスをクリックします。
ファイル全体を検索する。

無視リスト

大量の .git ファイルや README.md ファイルがあり、結果が煩雑になる場合、ファイルのテキスト検索やファイル名によるフィルタリングは、非常に手間のかかる作業です。

そのため、ワークスペースに無視リスト機能を追加しました。これにより、ワークスペースを表示および検索するときに、特定のファイル形式またはフォルダを除外できます。

ワークスペースで現在の共有無視リストを表示、変更する方法は次のとおりです。

  1. DevTools の [設定] を開きます。
  2. [ワークスペース] をクリックします。
  3. [共通] の [フォルダ除外パターン] ボックス内で、パターンを表示または編集できます。
ファイル パターンを除外する。

デフォルトのグローバル除外パターンは次のとおりです。

この正規表現では、Git、SVN、Mercurial のメタデータ、Eclipse と IntelliJ のプロジェクト ファイル、OS X の DS_Store とゴミ箱のファイル、Sass のキャッシュなど無視してよいものが除外されます。フォルダ全体（子を含む）は UI から除外され、UI とファイル検索時に表示されなくなります。

ワークスペース固有の無視リスト

より具体的に指定するために、特定のワークスペース内のファイルやフォルダを除外して、検索を見やすくすることもできます。除外フォルダもソース ディレクトリに表示されません。

ワークスペースからフォルダ全体を除外するには、左側の [Sources] パネルでフォルダを右クリックし、[Exclude Folder] を選択します。特定のワークスペース フォルダのマッピングと除外フォルダを表示するには:

  1. DevTools の設定を開きます。
  2. [ワークスペース] をクリックします。
  3. 確認したいフォルダをハイライト表示します。
  4. [編集] をクリックすると、[ファイル システムの編集] ウィンドウが表示されます。このウィンドウで、マッピングや除外フォルダの追加や削除を行うことができます。
フォルダを除外する。