DevTools の新機能（Chrome 116）

Sofia Emelianova
Sofia Emelianova
GitHub

欠落しているスタイルシートのデバッグを改善

DevTools にさまざまな改善が加えられ、スタイルシートが欠落している問題を迅速に特定してデバッグできるようになりました。

  • 出典 >ページツリーには、混乱を最小限に抑えられるよう、正常にデプロイおよび読み込まれたスタイルシートのみが表示されるようになりました。
  • 出典 >エディタで、失敗した @import、url()、href ステートメントの横に下線が付き、インライン エラー ツールチップが表示されるようになりました。

[Sources] パネルのツールチップに下線が引かれたステートメント。

  • コンソールに、失敗したリクエストへのリンクに加えて、読み込みに失敗したスタイルシートを参照する行へのリンクが表示されるようになりました。

コンソールには、問題のあるステートメントの正確な行へのリンクが表示されます。

  • [Network] パネルの [Initiator] 列には、読み込みに失敗したスタイルシートを参照している行へのリンクが常に入力されます。

  • [Issues] パネルには、無効な URL、リクエストの失敗、@import ステートメントの誤った配置など、スタイルシートの読み込みに関する問題がすべて一覧表示されます。

ソースとリクエストへのリンクが表示された [問題] パネル。

Chromium の問題: 1440626、1442198、1453611。

要素でのリニア タイミングのサポート >スタイル >イージング エディタ

イージング エディタ。 要素のイージング エディタ >スタイルを使用すると、transition-timing-function と animation-timing-function の値をワンクリックで調整できます。このバージョンでは、イージング エディタ。 のイージング エディタがリニア タイミング関数をサポートします。

リニア タイミングを設定するには、リニア選択ボタンをクリックします。コントロール ポイントを追加するには、線上の任意の場所をクリックします。コントロール ポイントを削除するには、そのコントロール ポイントをダブルクリックします。linear、elastic、bounce、emphasized のいずれかのプリセットを選択することもできます。線形調整の動作を確認するには、動画をご覧ください。

Chromium の問題: 1421241。

ストレージ バケットのサポートとメタデータ ビュー

アプリケーション >[ストレージ] セクションにストレージ バケットのサポートが追加されました。ストレージ バケットは互いに独立しているため、データのスライスにエビクションの優先順位付けを指定し、最も価値のあるデータが削除されないようにすることができます。各ストレージ バケットには、確立されたストレージ API（IndexedDB や CacheStorage など）に関連付けられたデータを保存できます。

機能をテストするには、こちらのフィドルをご覧ください。DevTools を開き、[Application] > [ストレージ >インデックス登録済みの DB。コードを実行します。DevTools にバケットとその内容が表示されるようになりました。バケットを選択してメタデータを表示します。

バケットのメタデータを表示する。

統合されたメタデータ ビューは、ローカル、セッション、キャッシュ ストレージのセクションでも使用できるようになりました。

統合された新しいメタデータ ビュー。

Chromium の問題: 1448011、1406017。

Lighthouse 10.3.0

[Lighthouse] パネルで Lighthouse 10.3.0 が実行されるようになりました。特に注目すべき点として、このバージョンでは 4 つの新しい監査が追加され、テーブル ヘッダーとキャプション、入力ボタン名、言語の不一致など、ユーザー補助機能に関するさまざまな問題が捕捉されます。例:

渡されたテーブル ヘッダーのチェック。

変更点の一覧もご覧ください。DevTools の [Lighthouse] パネルの基本的な使用方法については、Lighthouse: ウェブサイトの速度を最適化するをご覧ください。

Chromium の問題: 772558。

ユーザー補助機能: キーボード コマンドと画面読み上げの改善

DevTools でより多くのショートカットがサポートされるようになり、スクリーン リーダーに関する問題を修正しました。

  • コンテキスト メニューをキーボード ショートカット（Windows と多くの Linux ディストリビューションでは Shift+F10 キーなど）で開けるようになりました。macOS のショートカットについては、ポインタの代替アクションをご覧ください。
  • スクリーン リーダーの用途: <ph type="x-smartling-placeholder">
      </ph>
    • チェックボックスのラベルが不必要に 2 回読み上げられることがなくなりました。
    • [列ヘッダーの読み取り] を押すと、並べ替え可能な列の見出し名が読み上げられますできます。

DevTools チームは、こうした改善を実現してくれた Yanling Wang と Elorm Coch に感謝の意を表します。

Chromium の問題: 1446482、1414952。

その他のハイライト

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

  • タイムラインを操作した後も、[ネットワーク] パネルはネットワーク アクティビティを記録し続けます（1422552）。
  • [Coverage] パネルで、事前レンダリングの有効化やバックフォワード キャッシュ ナビゲーションの有無が認識され、再読み込みを求めるメッセージが表示されるようになりました（1393057）。
  • [ソース] >キーボードの [Breakpoints] ペイン: 移動するには上矢印および下矢印、選択するには Space を使用します（1446150）。
  • [Network] パネルでの HAR ファイルのアップロードとフィルタリングを修正しました（1450622）。
  • [Performance] パネルのフレームチャートで、トレース間にわずかなギャップが追加され、レンダリングが改善されました（1452150）。
  • ソースマップに埋め込まれたファイルの自動マッピングを修正しました（1446383）。

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

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

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

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

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

DevTools の新機能

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