DevTools の新機能(Chrome 75)

こんにちは。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 WorkerlocalStoragesessionStorageIndexedDB、、ウェブ SQL、、、ウェブ SQL、 Cache)、

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

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

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

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

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

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

関連する Chromium の問題: #942503

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

以前の [Application] > [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. 色、フォント、マージン、コントラストを示す詳細なツールチップ。

[Settings] > [Preferences] > [Elements] > [Show Detail Inspect Tooltip] で、これらの詳細なツールチップを無効にできるようになりました。

最小限のツールチップ。

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

関連する Chromium の問題: #948417

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

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

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

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

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

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

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

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

DevTools の新機能

DevTools の新機能シリーズで取り上げたすべての内容の一覧。

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 入門ガイド

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 はキャンセルされました

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59