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 Worker、 localStorage、sessionStorage、IndexedDB、Web SQL、Cookie、キャッシュ、 アプリケーション キャッシュ。

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

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

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

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

'アプリケーション'[ストレージを消去] タブ選択済みです。

図 4. アプリケーション >ストレージを消去します。

Chromium の関連する問題: #942503

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

以前の [アプリケーション] >IndexedDB では、 あります。たとえば、ページに <iframe> があり、その <iframe> が IndexedDB では、そのデータベースは表示されません。Chrome 75 以降、DevTools で IndexedDB が表示される サポートしています

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

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

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

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

Chromium の関連する問題: #943770

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

ネットワーク アクティビティを検査しているとします。サイトでテキスト圧縮を使用していて、 リソースの転送サイズを削減できます24 時間以内にページのリソースのサイズを ブラウザが解凍します。これまでこの情報は、サイズの大きいリクエストを使用した場合にのみ利用可能でした 行。[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. 色、フォント、マージン、コントラストを示す詳細なツールチップ。

これらの詳細なツールチップは [設定] >[設定] > Elements >詳細な検査ツールチップを表示。

最小限のツールチップ。

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

Chromium の関連する問題: #948417

ソースパネル エディタでタブのインデントを切り替えるための設定

ユーザー補助機能のテストの結果、エディタにタブトラップがあることが判明しました。キーボード エディタにタブで移動しても、Tab キーが インデントに使用します。デフォルトの動作を無効にして、Tab を使用してフォーカスを移動するには、 設定 >[設定] >出典 >[タブのフォーカス移動] を有効にします。

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

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

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

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

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

  • ご提案やフィードバックは、crbug.com からお送りください。
  • DevTools の問題を報告するには、その他のオプション（もっと見る） >ヘルプ >DevTools で DevTools の問題を報告します。
  • @ChromeDevTools でツイートしてください。
  • DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。