DevTools の新機能（Chrome 119）

Sofia Emelianova
Sofia Emelianova
GitHub

[要素] > [スタイル] の @property セクションを改善しました

編集可能な @property ルール

[Elements] > [Styles] ペインの対応するセクションで、@property CSS アットルールを編集できるようになりました。

プロパティ ルールを編集可能にした前後。

Chromium の問題: 1471123。

無効な @property ルールに関する問題が報告される

[問題] タブに、@property ルールの無効な宣言に関する問題が表示されるようになりました。

プロパティ ルールに関する問題が [問題] タブに報告されます。

Chromium の問題: 1473283。

エミュレートするデバイスのリストを更新しました

設定] をタップします。 の [設定] > [デバイス] の User-Agent 文字列が、ブラウザとオペレーティング システムの平均使用状況を反映するように更新されました。デバイスモードで、最新のデバイスをより多くエミュレートできるようになりました。

デバイスリストの更新前と更新後。

Chromium の問題: 1479733。

ソースのスクリプトタグ内のインライン JSON をプリティ プリント

[ソース] パネルで、<script> HTML タグ内のインライン JSON の美しい表示がサポートされ、デバッグが容易になりました。

スクリプトタグ内のインライン JSON の美しい表示前と後。

Chromium の問題: 406900、1473875。

コンソールでの非公開フィールドの自動入力

コンソールでクラススコープ外で評価するときに、プライベート クラス フィールドを自動補完できるようになりました。

クラススコープ外のプライベート クラス フィールドの自動補完をサポートする前と後。

Chromium の問題: 1483848、1381806。

Lighthouse 11.1.0

[Lighthouse] パネルで Lighthouse 11.1.0 が実行されるようになりました。変更点の詳細なリストをご覧ください。

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

Chromium の問題: 772558。

ユーザー補助機能の改善

スクリーン リーダーは次のように読み上げます。

  • コンソールの警告とエラー。
  • コードを [コンソール] または [ソース] に貼り付けるときの [このコードを信頼しますか？] ダイアログのテキスト。

また、[アプリケーション] パネルで、高コントラスト モードでのリンクのコントラストの問題を修正しました。

Chromium の問題: 1485257、1486643、1485263。

Web SQL のサポート終了

Web SQL Database API のメンテナンスが終了したため、Chrome 123 で [Application] > [Web SQL] セクションが削除されます。このバージョンでは、今後の削除に関するセクションに警告を追加しました。

Web SQL のサポート終了に関する警告。

詳細については、Web SQL のサポート終了と削除をご覧ください。

Chromium の問題: 1485966。

[Application] > [Manifest] でのスクリーンショットのアスペクト比の検証

[Application] > [Manifest] セクションで、同じフォーム ファクタ（wide または narrow）のウェブアプリのスクリーンショットが同じアスペクト比かどうかがチェックされるようになりました。

同じフォーム ファクタのスクリーンショットのアスペクト比が正しくないに関する警告。

詳しくは、プログレッシブ ウェブアプリをデバッグするとウェブアプリ マニフェストを追加するをご覧ください。

DevTools チームは、この変更と、以前のバージョンのマニフェスト警告の改善を担当した Alexey Rodionov に感謝の意を表します。

Chromium の問題: 1476656。

その他のハイライト

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

  • 要素:
    • 展開可能な省略形の CSS プロパティの長い形式の CSS プロパティに、アニメーション タイミング関数のスウォッチが表示されない（1149182）。
    • contain-intrinsic-* のオートコンプリートが、auto <length>（1480415）であるべき auto 値を 1 つだけ提示しなくなりました。
    • 非推奨の無効な -webkit-* プロパティのサポートを削除しました（1086089、1030765）。
  • ブレークポイント: ブレークポイントの種類を変更したときにブレークポイント編集ダイアログが表示されなくなるバグを修正しました（1485782）。
  • パフォーマンス:
    • パフォーマンスの録画中の色の解析エラーを修正しました（1480205）。
    • [タイミング] トラックに LCP が表示されないバグを修正しました。（1487136）
  • ネットワーク: [設定された Cookie] 列に、ブロックされた Cookie を除いた、設定された Cookie の正しい数が表示されるようになりました（1486903）。
  • ブロックされていないホストに移動した後に DevTools 拡張機能が読み込まれるようになりました（1476264）。
  • 拡張機能のスクリプト実行コンテキストが正しくないバグを修正しました（1275331）。

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

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

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

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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