このページは Cloud Translation API によって翻訳されました。

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）を押してコマンドメニューを開き、[Clear Site Data] コマンドを実行して、ページに関連するすべてのデータ（Service Worker、localStorage、sessionStorage、IndexedDB、Web SQL、Web SQL など）を消去します。

[サイトデータを消去] コマンド。

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

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

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

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

図 4. [Application] > [Clear Storage] を選択します。

Chromium の関連する問題: #942503

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

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

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

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

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

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

Chromium の関連する問題: #943770

リソースの非圧縮サイズを表示する

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

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

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

Chromium の関連する問題: #805429

[ブレークポイント] ペインのインラインブレークポイント

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

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

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

従来の動作。[Breakpoints] ペインにはエントリが 1 つしか表示されません。

図 8. 従来の動作。[Breakpoints] ペインにはエントリが 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 を使用してフォーカスを移動するには、[設定] > [設定] > [ソース] > [タブ移動フォーカスを有効にする] を有効にします。

最近、DevTools UI 自体のキーボード操作のしやすさに関して、多くの作業が行われています。詳しくは、Rob の「Navigate Chrome DevTools With Assistive Technology」をご覧ください。

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

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

Chrome DevTools チームへのお問い合わせ

以下のオプションを使用して、投稿の新機能や変更点、または DevTools に関連するその他のことについて話し合います。

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。