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

DevTools の新機能（Chrome 118）

Sofia Emelianova

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

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

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

Chromium の問題: 1471102、1471103、1471105。

ローカルオーバーライドのさらなる改善

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

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

以前の [Delete all override] では、現在のセッションでアクティブなオーバーライドのみが削除され、の紫色のドットでマークされたオーバーライドのみが削除されるため、混乱を招いていました。

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

以前のオプションに戻すには、 [設定] > [テスト] で [すべてのオーバーライドを一時的に削除する] チェックボックスをオンにします。

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

拡張検索

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

検索の前後にすべての一致が 1 行に 1 つずつ表示されます。

さらに、検索の速度も向上しました。次の動画では、ビフォー（左）とアフター（右）の比較をご覧ください。

最後に、検索でリストを無視し、無視したファイルの検索結果を表示しないようになりました。

Chromium の問題: 1468875、1472019。

[Sources] パネルの改善

[Sources] パネルで合理化されたワークスペース

[Sources] パネルの [workspace] 機能が新しく合理化されました。

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

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

新しい設定とワークフローの実例をご覧ください。

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

[Sources] のペインを並べ替える

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

Chromium の問題: 1473758。

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

[ソース] パネルでは、次のことができます。

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

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

推測ルールについて詳しくは、Chrome でページを即座に移動するためのページを事前レンダリングするをご覧ください。

Chromium の問題: 1473875。

透明度を下げるメディア機能をエミュレートする

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

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

Chromium の問題: 1424879

灯台 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）。
Sources で、CSS でダッシュが単語文字として扱われなくなりました（1471354）。
予測入力で、常に CSS 単位のキーワードが末尾に並べ替えられるようになりました。
正規表現フィルタでスペースがサポートされるようになりました（1346936）。
要素の固定メディアクエリ機能の検出（1472693）。

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

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

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

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

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。