DevTools リリースノートの第 1 回へようこそ。今後、Chrome の新しいバージョンを初めて開くと、DevTools で [新機能] ドロワーが開き、そのバージョンのリリースノートへのリンクが表示されます。
特長
- [タイムライン] パネルの名前を [パフォーマンス] パネルに変更しました。
- [Profiles] パネルの名前を [Memory] パネルに変更しました。
- Cookie 値を編集できるようになりました。
- DevTools は、メモリ不足エラーが発生する前に自動的に一時停止するようになりました。
新しい機能と特長
編集可能な Cookie
[Cookies] タブでセルをダブルクリックして値を編集します。
kdzwinel の協力に感謝します。
[スタイル] ペインでの、確認と編集が可能な CSS 変数
[スタイル] ペインで CSS 変数の検証と編集ができるようになりました。実際に試すには、CSS 変数のデモをご覧ください。
メモリ不足ブレークポイント
アプリが短期間に大量のメモリを割り当てると、DevTools が自動的に一時停止し、ヒープ上限を引き上げるようになりました。これにより、ヒープを検査し、コンソールでコマンドを実行してメモリを解放し、問題のデバッグを続行できます。詳しくは、One Small Step For Chrome, One Giant Heap For V8 をご覧ください。
キャンバス作成時のブレークポイント
新しいキャンバス コンテキストが作成されるたびにトリガーされるイベント リスナー ブレークポイントを作成できるようになりました。
![[Event Listener Breakpoints] ペインの [Create canvas context] チェックボックスを使用したキャンバス作成ブレークポイント](https://developer.chrome.com/static/blog/devtools-release-notes/image/canvas-creation-breakpoin-49989846bc6a6.png?hl=ja)
[タイミング] タブの開始時間の統計情報
[Timing] タブの上部で、リクエストがキューに追加され、開始されたタイミングを確認できるようになりました。
![[Timing] タブの開始時間の統計情報。](https://developer.chrome.com/static/blog/devtools-release-notes/image/start-stats-the-timing-1adf26082a5b4.svg?hl=ja)
[Timing] タブのサーバー統計情報
カスタムのサーバー統計情報を [タイミング] タブに挿入できるようになりました。例については、サーバーの時間値のデモをご覧ください。
![[Timing] タブのサーバー統計情報](https://developer.chrome.com/static/blog/devtools-release-notes/image/server-stats-the-timing-6ce32ddfd6c36.svg?hl=ja)
sroussey の貢献に感謝いたします。
変更回数
[タイムライン] パネルを [パフォーマンス] パネルに変更しました
[タイムライン] パネルの名前を [パフォーマンス] パネルに変更しました。
[Profiles] パネルを [Memory] パネルに変更
[Profiles] パネルの名前を [Memory] パネルに変更しました。
非表示のパネルの背後に CPU Profiler がある
[Profiler] パネルの名前が [Memory] パネルに変わり、このパネルに CPU Profiler を配置しても意味がなくなります。さらに、長期的な目標は、[パフォーマンス] パネルですべてのユーザーのプロファイリングを取得することです。それまでの間は、[設定] > [その他のツール] > [JavaScript プロファイラ] から古い CPU プロファイラにアクセスできます。
[Performance] パネルで CPU をプロファイリングする方法については、Chrome DevTools: JavaScript CPU Profiling in Chrome 58 をご覧ください。
新しいコンソール UI
コンソール パネルとドロワーの UI が一部変更されました。一部の人気の機能が表示されない場所に移動され、人気の機能にアクセスしやすくなりました。
- コンソールの設定
をクリックして、コンソールの動作をカスタマイズするための設定にアクセスします。 - [コンソール設定] の [ログを保持] が非表示になりました。
- [フィルタ] ボタンとペインが消えます。代わりにプルダウン メニューを使用してください。
- ログをフィルタするテキスト ボックスが常に表示されるようになりました。以前は [フィルタ] ペインで非表示になっていました。
- フィルタリングのテキスト ボックスでは、自動的に正規表現が受け入れられるため、[正規表現] チェックボックスがオフになります。
- [違反を隠す] チェックボックスが消えた。違反を表示するには、ロギングレベルのプルダウンを [Verbose] に設定します。
- 以前の UI で [すべてのメッセージを表示] チェックボックスをオフにすることは、新しい UI のコンソール設定で [Selected context only] チェックボックスをオンにすることと同じです。
WebGL イベント リスナーのブレークポイントを移動しました
WebGL のイベント リスナー ブレークポイントが WebGL カテゴリからCanvas カテゴリに移動しました。WebGL カテゴリが削除されました。