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. [Application] > [Clear Storage] を選択します。

関連する 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 つのブレークポイントが作成されます。以前の [Breakpoints] ペインではこれら 3 つのブレークポイントを個別に管理できませんでした。Chrome 75 以降では、各インライン ブレークポイントが [ブレークポイント] ペインに独自のエントリとして表示されます。

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

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

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

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

Chromium の関連する問題: #927961

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

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

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 の新機能シリーズで取り上げられたすべての内容のリスト。