DevTools の新機能（Chrome 118）

Sofia Emelianova
Sofia Emelianova
GitHub

[要素] > [スタイル] にカスタム プロパティの新しいセクションを追加

[要素] パネルで @property CSS at-rule がサポートされるようになりました。これにより、CSS カスタム プロパティを明示的に定義し、JavaScript を実行せずにスタイルシートに登録できます。

登録済みのカスタム プロパティを検査するには、[要素] > [スタイル] で、プロパティ名にカーソルを合わせると、ツールチップに記述子が表示されます。ツールチップで、リンクをクリックして、登録されたプロパティを折りたたみ可能な @property セクションに表示します。

Chromium の問題: 1471102、1471103、1471105。

ローカル オーバーライドの改善

前のバージョンの改善の流れを引き継ぎ、ローカル オーバーライドで次のことができるようになりました。

  • [Sources] > [Page] で、ソースマップされたファイルを右クリックして [Override content] を選択すると、DevTools に元のソースに移動するダイアログが表示されます。ソースマップ ファイルの内容はオーバーライドできません。

    ソースマップされたファイルではなく、元のコードに移動するダイアログ。

  • [ネットワーク] パネルに、新しい [オーバーライドあり] 列と対応する has-overrides:[content|headers|yes|no] フィルタが追加されました。[Has overrides] 列を表示するには、テーブル ヘッダーを右クリックして選択します。

    [Has overrides] 列で [has-overrides:yes] の値でフィルタリングします。

  • [ソース] > [オーバーライド] で、[すべてのオーバーライドを削除] メニュー オプションが、正確な動作の [削除] オプションに置き換えられました。

    [すべてのオーバーライドを削除] を [削除] に置き換える前後の状態。

以前の [すべてのオーバーライドを削除] は、現在のセッションで有効なオーバーライド（保存しました。 紫色のドット アイコンでマークされている）のみを削除するため、わかりにくいものでした。

新しい [削除] オプションでは、まず警告メッセージが表示され、確認を求めるメッセージが表示されます。その後、クリックしたフォルダとそのすべてのコンテンツが削除されます。

以前のオプションに戻すには、設定] をタップします。 [設定] > [試験運用版] で、チェックボックス。 [「すべての一時的なオーバーライドを削除」を有効にする] をオンにします。

Chromium の問題: 1472952、1416338、1472580、1473681、1475668。

検索結果に、コード行で見つかったすべての一致箇所ごとにエントリが表示されるようになりました。以前は、コードの行ごとに最初の一致のみが表示されていました。この新しい動作は、最小化されたファイルを検索する場合に特に便利です。検索結果をクリックすると、エディタでファイルが開きます。このとき、一致した箇所が縦方向だけでなく横方向にもスクロールして表示されるようになりました。

検索結果を 1 行に 1 つずつ表示する前後の様子。

また、検索の速度が向上しました。次の動画で、変更前（左）と変更後（右）の比較をご覧ください。

最後に、検索でリストの無視がサポートされるようになり、無視したファイルの結果は表示されなくなりました。

Chromium の問題: 1468875、1472019。

[ソース] パネルの改善

[ソース] パネルのワークスペースが合理化されました

[ソース] パネルの [ワークスペース] 機能が新しくなり、簡素化されました。

  • 一貫した命名。特に、[ソース] > [ファイル システム] ペインの名前が [ワークスペース] に変更されました。このペインのさまざまな UI テキストがより明確になり、冗長性がなくなりました。
  • セットアップの改善。フォルダをドラッグ＆ドロップする際のキューが改善され、リンクをクリックしてフォルダを選択できるようになりました。

[Sources] > [Workspace] を使用すると、DevTools で行った変更をソースファイルに直接同期できます。

新しい設定とワークフローの利用シーンを見てみましょう。

Chromium の問題: 1473771、1473880、1473963、1474686、1474687。

[ソース] でペインを並べ替える

[ソース] パネルの左側にあるペインの順序を、他のパネル、タブ、ペインの順序を変更する場合と同様に、ドラッグ＆ドロップで変更できるようになりました。

Chromium の問題: 1473758。

より多くのスクリプトタイプの構文のハイライト表示とプリティ プリント

[ソース] パネルで次のことができるようになりました。

  • 次のスクリプトタイプ内のインライン JavaScript を整形出力します: module、importmap、speculationrules。
  • importmap と speculationrules の両方のスクリプト タイプの構文をハイライト表示します。どちらも JSON を保持します。

投機ルールのスクリプト タイプのプリティ プリントと構文ハイライトの前後。

投機ルールの詳細については、Chrome でページを事前レンダリングしてページの高速ナビゲーションを実現するをご覧ください。

Chromium の問題: 1473875。

prefers-reduced-transparency メディア特性をエミュレート

Chrome 118 でprefers-reduced-transparency メディア機能がサポートされるようになりました。この機能を使用すると、デベロッパーは、macOS の [透明度を下げる] 設定など、OS でユーザーが選択した透明度を下げる設定に合わせてウェブ コンテンツを調整できます。

このメディア機能をエミュレートするには、[レンダリング] タブを開いて、この機能までスクロールします。

Chromium の問題: 1424879。

Lighthouse 11

[Lighthouse] パネルで Lighthouse 11 が実行されるようになりました。特に、このバージョンでは以前のナビゲーションが削除され、新しいユーザー補助機能の監査が追加され、ユーザー補助機能カテゴリのスコア付け方法が変更されています。

変更点の完全なリストもご覧ください。DevTools の Lighthouse パネルの基本的な使用方法については、Lighthouse: ウェブサイトの速度を最適化するをご覧ください。

Chromium の問題: 772558。

ユーザー補助機能の改善

DevTools で、より多くのナビゲーション キーストロークがサポートされるようになりました。

  • CSS の概要: 上下の矢印を使用して、左側のサイドバーのセクションを移動します。
  • メモリ: 左側のサイドバーで、スナップショットの横にある [保存] ボタンに Tab キーでフォーカスし、Enter キーを押してフォルダを選択します。

また、スクリーン リーダーのアナウンスに関する問題もいくつか修正されています。

Chromium の問題: 1470401、1471301、1474108、1468631。

その他のハイライト

このリリースにおける主な修正と改善点は次のとおりです。

  • ネットワーク: 一般的なリソースタイプ（media、wasm、websocket、manifest、fetch/xhr、json）の新しいアイコン（1466298）。
  • 多くの UI 要素（特に [要素] パネルと [パフォーマンス] パネル）で、マテリアル 3 の色を更新しました（1456690、1472243）。
  • 問題で、ナビゲーション間で Cookie の問題が保持されるようになりました（1466601）。
  • [アプリケーション] > [プリロード] のさまざまな改善。特に、並べ替え可能なグリッドと、改訂されたルールセットの詳細（1410709）が改善されました。
  • プロトコル モニターのコマンド エディタのさまざまな改善。特に、入力ミスに関する警告、送信済みコマンドの編集、事前定義されたキーのないオブジェクト パラメータのエディタ、参照によって定義されていない列挙型のサポート、型参照のないオブジェクト、部分文字列一致によるコマンドのフィルタなど（1448050）。
  • パフォーマンスのフレーム チャートの円グラフの合計ボックスに枠線が表示される（1470147）。
  • ソースで、CSS の単語文字としてダッシュが扱われなくなりました（1471354）。
  • オートコンプリートで、CSS 関連のキーワードが常に末尾に並べ替えられるようになりました。
  • 正規表現フィルタでスペースがサポートされるようになりました（1346936）。
  • 要素で、メディアクエリ機能の検出を修正しました（1472693）。

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

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

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

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

DevTools の新機能

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