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

DevTools の新機能（Chrome 111）

Jecelyn Yeen

[Styles] ペインでの HD カラーのデバッグ

CSS の色タイプとスペースが新たにウェブに登場します。また、デベロッパーによる高解像度カラーの作成、変換、デバッグに役立つ新しいツールが DevTools に導入されました。

CSS Color Level 4 仕様で規定されているとおり、[Styles] ペインで 12 の新しい色空間と 7 つの新しい色域がサポートされるようになりました。ウェブで利用可能なカラーオプションの包括的な情報については、高解像度 CSS カラーガイドをご覧ください。

color()、lch()、oklab()、color-mix() を使用した CSS の色定義の例を次に示します。 CSS の色の定義の例

color-mix() 関数を使用する場合、最終的なカラー出力は [計算済み] ペインで確認できます。 [計算済み] ペインに色のミックスの結果が表示されます。

カラー選択ツールは、すべての新しい色空間をサポートし、より多くの機能を備えています。たとえば、color(display-p3 1 0 1) の色見本をクリックします。また、色域境界線も追加され、sRGB 色域と display-p3 色域を区別して、選択した色域が明確にわかるようになっています。色域境界線。

DevTools では、色形式間の色の変換がサポートされています。[Change Color Format] アイコンを使用して変換のポップアップにアクセスするか、[Styles] ペインで Shift を使用して色見本をクリックします。カラー形式間で色の変換を行う。

コンバージョンの際には、スペースに収まるようにコンバージョンが切り詰められているかどうかを確認することが重要です。DevTools により、変換された色の横に警告アイコンが表示されます。このアイコンは、このクリッピングについて警告します。カラークリップの警告。

また、新しいショートカットを使用して、画面から色を選択することもできます。スポイトを有効にするには C キーを押します。無効にするには Escape キーを押します。スポイトツールは、sRGB 色空間の色のみをサンプリングします。たとえば、sRGB 色空間にない color(display-p3 1 0 1) の色をサンプリングしようとすると、スポイトツールによって、sRGB 空間内の最も近い色（マゼンタ color(display-p3 0.92 0.2 0.97)）にクリップされます。

スポイトを起動します。

最後に、[カラー形式] 設定のサポートが終了し、新しい HD カラー形式に対応するようになりました。カラー形式の設定のサポート終了。

Chromium の問題: 1073895、1395782、1408777、1395782、1392717、1382409、1392054

ブレークポイント UX の強化

デザインが一新された [Breakpoints] ペインにより、よく使用される機能、特にブレークポイントの無効化、編集、削除にすばやくアクセスできるようになりました。

主な特長は以下のとおりです。 - 例外の一時停止オプションを両方とも [ブレークポイント] ペインに移動し、わかりやすく説明できるようにテキストでラベル付けしました。例外の一時停止オプション。

ブレークポイントはファイルごとにグループ化され、行番号または列番号順に並んでおり、折りたたみ可能です。
ブレークポイントまたはファイルにカーソルを合わせたときに、ブレークポイントを無効化、削除、編集する新しいオプションが追加されました。
[ブレークポイントを編集] ボタンをクリックして、ブレークポイントエディタを開きます。ここから、ブレークポイントの条件を入力するか、ログポイントに切り替えることができます。

DevTools でデバッグする方法については、JavaScript デバッグリファレンスをご覧ください。

Chromium の問題: 1407586、1402891、1402893

レコーダーのショートカットのカスタマイズ

キーボードショートカットを使用すると、ユーザーフローをすばやく記録、再生できます。

レコーダーには、ユーザーフローの記録と再生をすばやく行える便利なキーボードショートカットがいくつか導入されています。

ショートカットを思い出せない場合は、[?] ボタンをクリックすると、すべてのショートカットをいつでも表示できます。レコーダーのショートカット。

これらのショートカットは、[設定] メニューからカスタマイズすることもできます。レコーダーのショートカットをカスタマイズします。

別のパネルで作業していて、ユーザーフローの記録を開始するには、DevTools の [コマンドメニュー] から [Create a new recording] コマンドを使用します。新しい記録コマンドを作成します。

Chromium の問題: 1339771

Angular の構文のハイライト表示を改善

DevTools の Angular HTML テンプレートの構文のハイライト表示が強化され、コードを読みやすくなり、その構造を認識しやすくなります。 Angular HTML テンプレートの構文をハイライト表示します。

Chromium の問題: 1385374、1385678

[Application] パネルでキャッシュを再編成する

[キャッシュストレージ] ペインは [アプリケーション] パネルの [ストレージ] セクションに表示されるようになり、[バックフォワードキャッシュ] ペインは [バックグラウンドサービス] セクションに移動しました。 [Applications] パネルの [Caches]

Chromium の問題: 1407166

その他のハイライト

このリリースでの注目すべき修正は次のとおりです。

DevTools が更新され、ソースマップを読み込むときに [Disable cache] の設定が適用されるようになりました。（1407084）。
検索結果で最初に一致した要素が [要素] パネルですぐにオートフォーカスされるようになりました。（1381853）。
さまざまな修正を行い、ソースマップとブレークポイントの信頼性を改善しました。（508270、1403362、1403432、1396298、1395337、1405134）。
デバッグを容易にするために、DevTools でプライベートクラスメンバーを使用した式の評価がサポートされるようになりました。（1381806）。

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

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

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

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

ご提案やフィードバックは、crbug.com からお送りください。
DevTools の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。