DevTools の新機能（Chrome 58）

Kayce Basques

DevTools リリースノートの第 1 弾をお届けします。今後、新しいバージョンの Chrome を初めて開くと、DevTools の [新機能] ドロワーが開き、そのバージョンのリリースノートへのリンクが表示されます。

ハイライト

  • [タイムライン] パネルの名前が [パフォーマンス] パネルに変更されました。
  • [プロファイル] パネルの名前が [メモリ] パネルに変更されました。
  • Cookie の値を編集できるようになりました。
  • メモリ不足エラーが発生する前に DevTools が自動的に一時停止するようになりました。

新機能

編集可能な Cookie

[Cookie] タブのセルをクリックして、値を編集します。

Cookie の編集。
図 1Cookie の編集

kdzwinel 様、ご協力いただきありがとうございました。

スタイルペインで検査および編集可能な CSS 変数

[スタイル] ペインで CSS 変数を検査して編集できるようになりました。CSS 変数のデモで実際にお試しください。

メモリ不足ブレークポイント

アプリが短時間で大量のメモリを割り当てると、DevTools が自動的に一時停止し、ヒープ上限を増やします。これにより、ヒープを確認したり、コンソールでコマンドを実行してメモリを解放したり、問題のデバッグを続行したりできます。詳しくは、One Small Step For Chrome, One Giant Heap For V8 をご覧ください。

メモリ不足のブレークポイントで一時停止しました
図 2. メモリ不足のブレークポイントで一時停止

キャンバス作成時のブレークポイント

新しいキャンバス コンテキストが作成されるたびにトリガーされるイベント リスナー ブレークポイントを作成できるようになりました。

[イベント リスナー ブレークポイント] ペインの [キャンバス コンテキストを作成] チェックボックスによるキャンバス作成ブレークポイント
図 3. キャンバス作成ブレークポイント: [イベント リスナー ブレークポイント] ペインの [キャンバスのコンテキストを作成] チェックボックス。

[タイミング] タブの開始時間の統計情報

[タイミング] タブの上部に、リクエストがキューに追加され、開始された日時が表示されます。

[タイミング] タブの開始時間の統計情報。
図 4. [タイミング] タブの開始時間の統計情報

[タイミング] タブのサーバー統計情報

[タイミング] タブにカスタム サーバー統計情報を挿入できるようになりました。例については、サーバー タイミング値のデモをご覧ください。

[タイミング] タブのサーバー統計情報
図 5. [タイミング] タブのサーバー統計情報

sroussey 様、ご協力いただきありがとうございました。

変更点

タイムライン パネルが [パフォーマンス] パネルに変更されました

タイムライン パネルの名前をパフォーマンス パネルに変更し、目的をより明確に反映しました。

[プロファイル] パネルが [メモリ] パネルに変更されました

プロファイル パネルの名前をメモリ パネルに変更し、目的をより明確に示しました。

CPU Profiler が非表示のパネルの背後に隠れている

[プロファイル] パネルが [メモリ] パネルに変更されたため、このパネルに CPU プロファイラを配置することは意味がありません。さらに、長期的な目標として、すべてのユーザーが [パフォーマンス] パネルからプロファイリングできるようにすることを目指しています。なお、従来の CPU プロファイラには、[設定] > [その他のツール] > [JavaScript プロファイラ] からアクセスできます。

パフォーマンス パネルで CPU をプロファイリングする方法については、Chrome DevTools: Chrome 58 の JavaScript CPU プロファイリングをご覧ください。

新しいコンソール UI

コンソール パネルとドロワーの UI が一部変更されました。あまり使用されていない機能の一部は、より目立たない場所に移動され、よく使用されている機能はより簡単にアクセスできるようになりました。

  • [Console Settings] コンソールの設定 をクリックして、コンソールの動作をカスタマイズするための設定にアクセスします。
  • [コンソール設定] から [ログを保持] が非表示になりました。
  • [フィルタ] ボタンとペインが削除されました。代わりにプルダウン メニューを使用してください。
  • ログのフィルタリング用のテキスト ボックスが常に表示されるようになりました。以前は、[フィルタ] ペインに隠されていました。
  • フィルタリング テキスト ボックスは正規表現を自動的に受け入れるため、[正規表現] チェックボックスは表示されなくなりました。
  • [違反を非表示にする] チェックボックスが削除されました。違反を表示するには、ロギング レベルのプルダウンを [詳細] に設定します。
  • 従来の UI で [すべてのメッセージを表示] チェックボックスをオフにすることは、新しい UI の [コンソール設定] で [選択したコンテキストのみ] チェックボックスをオンにすることと同じです。
新しいコンソール UI
図 6. 新しいコンソール UI

WebGL イベント リスナーのブレークポイントが移動しました

WebGL のイベント リスナー ブレークポイントが、[WebGL] カテゴリから [キャンバス] カテゴリに移動しました。WebGL カテゴリが削除されました。