DevTools の新機能（Chrome 75）

Kayce Basques

こんにちは。Chrome 75 の Chrome DevTools の新機能は次のとおりです。

このページの動画バージョン

CSS 関数の自動補完時に有意なプリセット値

filter などの一部の CSS プロパティは、値として関数を受け取ります。たとえば、filter: blur(1px) はノードに 1 ピクセルのぼかしを追加します。filter などのプロパティを自動補完するときに、DevTools がプロパティに意味のある値を入力するようになり、値がノードに与える変更の種類をプレビューできるようになりました。

以前のオートコンプリートの動作。

図 1. 以前のオートコンプリートの動作。DevTools で filter: blur が自動的に入力され、ビューポートに変更は表示されません。

新しいオートコンプリートの動作。

図 2. 新しいオートコンプリートの動作。DevTools で filter: blur(1px) が自動補完され、ビューポートに変更が表示されます。

関連する Chromium の問題: #931145

コマンド メニューからサイトデータを消去する

Ctrl+Shift+P キーまたは Command+Shift+P キー（Mac）を押してコマンド メニューを開き、サイトデータを消去コマンドを実行して、ページに関連するすべてのデータ（Service Workers、localStorage、sessionStorage、IndexedDB、Web SQL、Cookie、キャッシュ、アプリケーション キャッシュなど）を消去します。

サイトデータの消去コマンド。

図 3. サイトデータを消去コマンド。

サイトデータの消去は、しばらくの間 [アプリ] > [ストレージを消去] から行えました。Chrome 75 の新機能として、コマンド メニューからコマンドを実行できるようになりました。

サイトデータのすべてを削除しない場合は、[アプリケーション] > [ストレージを消去] で削除するデータを管理できます。

[アプリケーション] タブで [ストレージを消去] が選択されている。

図 4. [アプリ] > [ストレージを消去] をタップします。

関連する Chromium の問題: #942503

すべての IndexedDB データベースを表示する

これまで、[Application] > [IndexedDB] では、メインのオリジンからのみ IndexedDB データベースを検査できました。たとえば、ページに <iframe> があり、その <iframe> が IndexedDB を使用していた場合、そのデータベースは表示されません。Chrome 75 以降、DevTools にはすべてのオリジンの IndexedDB データベースが表示されます。

以前の動作。ページには IndexedDB を使用するデモが埋め込まれていますが、データベースは表示されません。

図 5. 以前の動作。ページには IndexedDB を使用するデモが埋め込まれていますが、データベースは表示されていません。

新しい動作。デモのデータベースが表示されます。

図 6. 新しい動作。デモのデータベースが表示されます。

関連する Chromium の問題: #943770

ホバー時にリソースの未圧縮サイズを表示する

ネットワーク アクティビティを検査しているとします。サイトがテキスト圧縮を使用してリソースの転送サイズを削減している。ブラウザが解凍した後のページのリソースのサイズを確認したいとします。これまで、この情報は大きなリクエスト行を使用する場合にのみ利用可能でした。これで、[サイズ] 列にカーソルを合わせると、この情報にアクセスできるようになりました。

[サイズ] 列にカーソルを合わせると、リソースの未圧縮サイズが表示されます。

図 7. [サイズ] 列にカーソルを合わせると、リソースの未圧縮サイズが表示されます。

関連する Chromium の問題: #805429

ブレークポイント ペイン内のインライン ブレークポイント

次のコード行にコード行ブレークポイントを追加したとします。

document.querySelector('#dante').addEventListener('click', logWarning);

しばらくの間、DevTools では、ブレークポイントで一時停止するタイミングを指定できました。たとえば、行の先頭、document.querySelector('#dante') が呼び出される前、addEventListener('click', logWarning) が呼び出される前などです。3 つすべてを有効にすると、実質的に 3 つのブレークポイントが作成されます。これまで、[ブレークポイント] ペインでは、これらの 3 つのブレークポイントを個別に管理できませんでした。Chrome 75 以降では、各インライン ブレークポイントが [ブレークポイント] ペインに独自のエントリとして表示されます。

以前の動作。[ブレークポイント] ペインにエントリが 1 つだけあります。

図 8. 以前の動作。[ブレークポイント] ペインにエントリが 1 つだけあります。

新しい動作。[Breakpoints] ペインに 3 つのエントリがあります。

図 9. 新しい動作。[Breakpoints] ペインに 3 つのエントリがあります。

関連する Chromium の問題: #927961

IndexedDB とキャッシュのリソース数

[IndexedDB] ペインと [キャッシュ] ペインに、データベースまたはキャッシュ内のリソースの合計数が表示されるようになりました。

IndexedDB データベース内のエントリの合計数。

図 10. IndexedDB データベース内のエントリの合計数。

関連する Chromium の問題: #941197、#930773、#930865

詳細な検査ツールチップを無効にする設定

Chrome 73 では、検査モードでの詳細なツールチップが導入されました。

詳細なツールチップ。

図 11. 色、フォント、余白、コントラストを示す詳細なツールチップ。

これらの詳細なツールチップを無効にするには、[設定] > [設定] > [要素] > [詳細な検査ツールチップを表示] に移動します。

最小限のツールチップ。

図 12. 幅と高さのみを表示する最小限のツールチップ。

関連する Chromium の問題: #948417

[ソース] パネル エディタでタブの字下げを切り替える設定

ユーザー補助テストで、エディタにタブトラップがあることが判明しました。キーボード ユーザーがタブキーでエディタに移動した後、Tab キーがインデント用に使用されていたため、タブキーでエディタから離れることができませんでした。デフォルトの動作をオーバーライドして Tab キーでフォーカスを移動するには、設定 > [設定] > [ソース] > [Tab キーでフォーカスを移動する] を有効にします。

最近、DevTools UI 自体をキーボードで操作しやすくするための作業が数多く行われました。詳しくは、Rob の Chrome DevTools を支援技術で操作するをご覧ください。

プレビュー チャネルをダウンロードする

デフォルトの開発用ブラウザとして Chrome の Canary、Dev、Beta を使用することを検討してください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたりできます。また、ユーザーよりも早くサイトの問題を見つけることもできます。

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。