DevTools の新機能（Chrome 116）

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

  • [ソース] > [ページ] ツリーに、正常にデプロイされ読み込まれたスタイルシートのみが表示されるようになり、混乱を最小限に抑えることができます。
  • [Sources] > [Editor] で、失敗した @import、url()、href ステートメントの横に下線が引かれ、インライン エラー ツールチップが表示されるようになりました。

[ソース] パネルでツールチップ付きの下線付きステートメント。

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

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

  • [ネットワーク] パネルの [イニシエータ] 列には、読み込みに失敗したスタイルシートを参照する正確な行へのリンクが常に表示されます。

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

ソースとリクエストへのリンクを含む [問題] パネル。

Chromium の問題: 1440626、1442198、1453611。

[要素] > [スタイル] > [イージング エディタ] で線形タイミングをサポート

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

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

Chromium の問題: 1421241。

ストレージ バケットのサポートとメタデータの表示

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

こちらの fiddle で機能をテストできます。DevTools を開き、[Application] > [Storage] > [Indexed 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 のショートカットについては、ポインタの代替操作をご覧ください。
  • スクリーン リーダー アプリ:
    • チェックボックスのラベルが不必要に 2 回読み上げられることがなくなります。
    • [列ヘッダーを読み上げる] ショートカットを押すと、並べ替え可能な列の列ヘッダー名が読み上げられます。

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

Chromium の問題: 1446482、1414952。

その他のハイライト

このリリースにおける主な修正と改善点は次のとおりです。

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

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

Chrome DevTools チームに問い合わせる

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容の一覧。