このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 118）

Sofia Emelianova

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

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

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

Chromium の問題: 1471102、1471103、1471105。

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

以前のバージョンの継続的な改善に続いて、ローカルオーバーライドでは次の処理が行われます。

[ソース] > [ページ] で、ソースマッピングされたファイルを右クリックして [コンテンツをオーバーライド] を選択すると、DevTools にダイアログが表示され、元のソースに移動できます。ソースマップファイルの内容はオーバーライドできません。
[ネットワーク] パネルに、新しい [オーバーライドあり] 列と、対応する has-overrides:[content|headers|yes|no] フィルタが表示されます。[オーバーライドあり] 列を表示するには、表の見出しを右クリックして選択します。
[ソース] > [オーバーライド] で、[すべてのオーバーライドを削除] メニューオプションが、正確な動作の [削除] オプションに置き換えられました。

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

新しい [削除] オプションは、最初に警告メッセージと確認メッセージを表示し、次にクリックしたフォルダとそのすべてのコンテンツを削除します。

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

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

拡張検索

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

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

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

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

Chromium の問題: 1468875、1472019。

[ソース] パネルの改善

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

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

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

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

新しい設定とワークフローの動作をご確認ください。

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

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

他のパネル、タブ、ペインを並べ替える方法と同様に、[Sources] パネルの左側にあるペインをドラッグ&ドロップして並べ替えられるようになりました。

Chromium の問題: 1473758。

その他のスクリプトタイプ向けの構文ハイライト表示とプリティプリント

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

インライン JavaScript を、module、importmap、speculationrules のスクリプトタイプ内でプリティプリントします。
どちらも JSON を保持するスクリプトタイプの importmap と speculationrules の構文を強調してください。

推測ルールスクリプト型の美しい出力と構文ハイライトの前後。

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

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

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

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

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

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