DevTools の新機能（Chrome 118）

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

Chromium の問題: 1471102、1471103、1471105。

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

以前のバージョンの改善の流れに沿って、ローカル オーバーライドが次のように機能するようになりました。

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

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

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

    [Has overrides] 列で「has-overrides:yes」値をフィルタリングしています。

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

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

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

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

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

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

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

検索前と検索後の両方で、一致したすべての行が表示されます。

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

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

Chromium の問題: 1468875、1472019。

[ソース] パネルの改善

[ソース] パネルのワークスペースの合理化

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

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

[ソース] > [ワークスペース] を使用すると、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 メディア機能がサポートされるようになりました。この機能により、デベロッパーは、OS の透明性を低減するためのユーザー選択の設定（macOS の [透明度を下げる] 設定など）に合わせてウェブ コンテンツを調整できます。

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

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）
  • Issues で、ナビゲーション間で Cookie の問題が保持されるようになりました（1466601）。
  • [アプリケーション] > [プリロード] のさまざまな改善を行いました。特に、並べ替え可能なグリッドとルールセットの詳細の改良に重点を置きました（1410709）。
  • プロトコル モニターのコマンド エディタのさまざまな改善。特に、間違った入力に関する警告、送信されたコマンドの編集、事前定義されたキーのないオブジェクト パラメータのエディタ、参照で定義されていない列挙型のサポート、型参照のないオブジェクト、サブ文字列一致によるコマンドのフィルタなど（1448050）。
  • パフォーマンス フレイムグラフの円グラフの合計ボックスに枠線が表示されます（1470147）。
  • ソースで、ダッシュが CSS の単語文字として扱われなくなりました（1471354）。
  • オートコンプリートでは、CSS キーワードが常に最後に並べ替えられるようになりました。
  • 正規表現フィルタでスペースがサポートされるようになりました（1346936）。
  • 要素: メディアクエリ機能の検出を修正しました（1472693）。

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

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

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

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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