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

DevTools の新機能（Chrome 118）

Sofia Emelianova

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

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

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

Chromium に関する問題: 1471102、1471103、1471105

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

以前のバージョンでも引き続き改良が加えられており、ローカルオーバーライドでは次のことが可能になりました。

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

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

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

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

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

拡張検索

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

検索前と検索後では、すべての一致が 1 行ごとに表示されます。

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

また、検索でリスティングを無視できるようになり、無視したファイルの検索結果が表示されなくなります。

Chromium の問題: 1468875、1472019。

ソースパネルの改善

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

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

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

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

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

Chromium に関する問題: 1473771、1473880、1473963、1474686、1474687。

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

他のパネル、タブ、ペインを並べ替える場合と同様に、[ソース] パネルの左側でペインをドラッグ&ドロップして並べ替えることができるようになりました。

Chromium の問題: 1473758。

その他のスクリプトタイプに対する構文のハイライト表示とプリティプリント

[ソース] パネルで次の操作を行えるようになりました。

module、importmap、speculationrules の各スクリプトタイプでインライン JavaScript をプリティプリントします。
JSON を保持する importmap と speculationrules スクリプト型の構文に注目します。

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

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

Chromium の問題: 1473875。

透明度の低い透明度を優先するメディア機能をエミュレート

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

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

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

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

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

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

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

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