DevTools の新機能（Chrome 75）

Kayce Basques

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

このページの動画版

CSS 関数の自動補完時の意味のあるプリセット値

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

図 1. 以前のオートコンプリートの動作。DevTools が filter: blur に自動補完され、ビューポートに変化が見られない。

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

関連する Chromium の問題: #931145

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

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

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

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

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

図 4. [Application] > [Clear Storage]（アプリケーション > ストレージを消去）を選択します。

関連する Chromium の問題: #942503

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

以前は、[アプリケーション] > [IndexedDB] で IndexedDB データベースを検査できるのはメインオリジンのみでした。たとえば、ページに <iframe> があり、その <iframe> が IndexedDB を使用している場合、そのデータベースを表示することはできません。Chrome 75 以降では、DevTools にすべてのオリジンの 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 以降では、インライン ブレークポイントごとに [ブレークポイント] ペインに独自のエントリが作成されます。

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

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

関連する Chromium の問題: #927961

IndexedDB と Cache リソースの数

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

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

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

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

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

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

これらの詳細なツールチップは、[設定] > [設定] > [要素] > [詳細な検査ツールチップを表示] で無効にできるようになりました。

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

関連する Chromium の問題: #948417

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

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

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

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

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

DevTools の新機能

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