DevTools の新機能(Chrome 118)

Sofia Emelianova
Sofia Emelianova

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

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

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

Chromium の問題: 147110214711031471105

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

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

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

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

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

    「has-overrides:yes」でフィルタリングする[オーバーライドあり] の選択します。

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

    「すべてのオーバーライドを削除」を置き換える前と後[削除]をクリックします

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

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

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

Chromium の問題: 1472952141633814725801473681 1475668

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

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

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

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

Chromium の問題: 14688751472019

[Sources] パネルの改善

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

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

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

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

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

Chromium の問題: 14737711473880147396314746861474687

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

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

Chromium の問題: 1473758

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

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

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

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

推測ルールについて詳しくは、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 の問題: 1470401147130114741081468631

その他のハイライト

このリリースにおける注目すべき修正と改善は次のとおりです。

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

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

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

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

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

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

DevTools の新機能

DevTools の新機能」シリーズで紹介されているすべてのリスト。