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

DevTools の新機能（Chrome 118）

Sofia Emelianova

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

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

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

Chromium の問題: 1471102、1471103、1471105。

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

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

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

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

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

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

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

検索機能の強化

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

検索で 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 の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

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