layout

title

authors

date

description

hero

alt

Styles ペインで高精細色をデバッグする {: #color }

新しい CSS の色の種類と空間がウェブにやってきます！開発者が高精細色を作成・変換・デバッグするのに役立つ新しいツールがDevToolsに導入されたことも、同様にエキサイティングなことです。

Styles ペインが CSS カラーレベル 4 にある 12 の新しい色空間と 7 つの新しい色域をサポートするようになりました。Web 上で利用可能なカラーオプションを包括的に理解するには、CSS 高精細色ガイドを参照してください。

以下に color() 、 lch() 、 oklab() 、 color-mix() を用いた CSS での色の定義の例を示します。

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/dA8VCKaSZhNb9gzlAUT9.png", alt="CSS での色の定義の例", width="800", height="509" %}

color-mix() 関数を使用すると、最終的な色の出力を Computed ペインで確認できます。

{% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/3VkOGbbb5qLVvo1A1qSa.png", alt="Computed ペインに表示される color-mix 関数の出力", width="800", height="487" %}

カラーピッカーは、より多くの機能によって、新しい色空間をすべてサポートします。例えば、 color(display-p3 1 0 1) の色見本をクリックしてみてください。色域境界線も追加され、sRGB と display-p3 の色域を区別し、選択した色の色域をより明確に理解できるようになりました。 {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/bL6uw8VV4cGuDd9hmAjX.png", alt="色域境界線", width="800", height="657" %}

DevTools はカラーフォーマット間の色変換をサポートしています。変換ポップアップを表示するには、Change Color Format アイコンを使用するか、単に Shift を押しながら Styles ペイン内の色見本をクリックします。 {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/uoz3yaPPdVs6T2ASnQ62.png", alt="カラーフォーマット間の色変換", width="800", height="460" %}

変換するとき、空間に合わせてクリップされたかどうかを知ることは重要です。DevTools は変換された色の横に警告アイコンを表示し、このクリッピングを警告します。 {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/5Y4rVIqL9rjuSbHcodKr.png", alt="カラークリッピングの警告", width="800", height="657" %}

さらに、新しいショートカットでスクリーンから色を選べます。 c を押すとスポイトがアクティブになり、Escape を押すと非アクティブになります。スポイトツールは sRGB 色空間内の色しかサンプリングしません。例えば、sRGB の色空間の外にある色 color(display-p3 1 0 1) をサンプリングしようとすると、スポイトツールはその色を sRGB 空間で最も近い色であるマゼンタ color(display-p3 0.92 0.2 0.97) にクリッピングします。 {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/VNBu6RenRerRqNhNYfyf.png", alt="スポイトの利用", width="800", height="657" %}

最後に、 Color format の設定は、新しい高精細色のフォーマットに対応するため、非推奨となりました。 {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/SPymkBgxzI6iVAvLdWBN.png", alt="非推奨になった Color format の設定", width="800", height="441" %}

Chromium issues: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054

強化されたブレークポイントのUX {: #breakpoint-redesign }

再設計された Breakpoints ペインでは、よく使われる機能、特にブレークポイントの無効化、編集、削除に素早くアクセスできるようになりました。

ハイライトをいくつか紹介します。

キャッチされなかった例外による一時停止オプションについても Breakpoints ペインに移動され、テキストでラベル付けされ、より分かりやすくなりました。 {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/KADuAqVdrxxQDg5AYYeA.png", alt="例外による一時停止オプション", width="800", height="518" %}

ブレークポイントはファイルごとにグループ化され、行番号や列番号で並べられ、折りたためるようになりました。 {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/AXJ7IL5aJ6gwbZmnoH39.png", alt="ファイルごとのグループ化", width="800", height="454" %}

ブレークポイントやファイルにカーソルを置くと、ブレークポイントを無効化、削除、編集する新しいオプションが表示されます。 {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/vAQ4YuWGuXYLxXQXt0HG.png", alt="新しいブレークポイント無効化オプション", width="800", height="496" %}

ブレークポイントの編集ボタンをクリックすると、ブレークポイントエディタが開きます。ここからブレークポイントの条件を入力したり、ログポイントに切り替えられます。 {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/SrgbxxF8U3s9yzDPV25q.png", alt="ブレークポイント編集ダイアログ", width="800", height="697" %}

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

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/48b648b65cd05071d1950e50d0b529ff20294780 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/b6c8a19b3922ed95818b5751f1b6548724ff868c #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/0b955a3533292790168431db4e54906d4b1fa64a #} Chromium issues: 1407586, 1402891, 1402893

カスタマイズ可能な Recorder ショートカット {: #recorder }

キーボードショートカットを使って、ユーザーフローの記録と再生を素早くおこなえます。

Recorder では、より早くユーザーフローを記録・再生できるように、いくつかの便利なキーボードショートカットを導入しています。

ショートカットを覚えていませんか？問題ありません。「？」ボタンをクリックすれば、いつでもすべてのショートカットを表示できます。 {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/BJq63X8k89HTdINY2RKu.png", alt="Recorder ショートカット", width="800", height="625" %}

これらのショートカットは Settings メニューからカスタマイズすることもできます。 {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/FtZSO1pPSooAbBrPTGC6.png", alt="Recorder ショートカットのカスタマイズ", width="800", height="494" %}

別のパネルで作業していて、ユーザーフローの記録を開始したい場合、DevTools のコマンドメニューから Create a new recording コマンドを使用して開始します。 {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/fErUqzQ03p5zOk301nTN.png", alt="Create a new recording コマンド", width="800", height="435" %}

{# https://chrome-internal.googlesource.com/devtools/devtools-internal/+/140ffb3e4c5e084eff5522508310af5dd407cf6e #} {# https://chrome-internal.googlesource.com/devtools/devtools-internal/+/e61fa89b8d073c4ff6b4da3599f83bf5972d5415 #} {# https://chrome-internal.googlesource.com/devtools/devtools-internal/+/ffc735e599881fec2779477e6c20165e2796da69 #} {# https://chrome-internal.googlesource.com/devtools/devtools-internal/+/f57026189fb51f801bf2ea2611afcb932fa32bef #} {# https://chrome-internal.googlesource.com/devtools/devtools-internal/+/0a7c428980b8f8a60e83c780e17f6a6f94007493 #} {# https://chrome-internal.googlesource.com/devtools/devtools-internal/+/aea51aad7026881ad26ca1b270d12338adb92d79 #}

Chromium issue: 1339771

Angular のシンタックスハイライトの改善 {: #syntax }

DevTools は、 Angular の HTML テンプレートのシンタックスハイライトを強化し、コードを読みやすく、構造を認識しやすくしました。 {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/lJU7wOa4vNDb2Vm2zPJq.png", alt="AngularのHTMLテンプレートのシンタックスハイライト", width="800", height="507" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/4ec36d2fc5e7506d1ff65fd282a43215164f03f2 #} {# https://chromium.googlesource.com/devtools/devtools-frontend/+/717953202d0e8463257e09cc3f68a7769fd25300 #}

Chromium issues: 1385374, 1385678

キャッシュを Application パネルで再整理する {: #cache }

Cache Storage ペインは Application パネルの Storage セクションに、Back/Forward cache ペインは Background Services セクションに移動されました。 {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/q5ZeDvMc3OseF8fQve5A.png", alt="Application パネルのキャッシュ", width="800", height="506" %}

{# https://chromium.googlesource.com/devtools/devtools-frontend/+/adccf1afe5d585b294dee247f5a4982aca8f5f1e #}

Chromium issue: 1407166

その他のハイライト {: #misc }

今回のリリースで、特筆すべき以下の修正がおこなわれました。

DevTools がソースマップを読み込む際に Disable cache の設定が反映されるようになりました。(1407084)

Elements パネルで、検索結果の最初にマッチした要素に瞬時にオートフォーカスが当たるようになりました。(1381853)

ソースマップとブレークポイントの信頼性を向上させるための様々な修正。(508270, 1403362, 1403432, 1396298, 1395337, 1405134)

デバッグをより容易にするために、DevTools はプライベートクラスメンバーを含む式の評価をサポートするようになりました。(1381806) {% Img src="image/dPDCek3EhZgLQPGtEG3y0fTn4v82/q68fvo870weBVwupujqf.png", alt="プライベートクラスメンバーを含む式の評価", width="800", height="683" %}

{% Partial 'devtools/reach-out.md' %} {% Partial 'devtools/whats-new.md' %}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

index.md

index.md

Styles ペインで高精細色をデバッグする {: #color }

強化されたブレークポイントのUX {: #breakpoint-redesign }

カスタマイズ可能な Recorder ショートカット {: #recorder }

Angular のシンタックスハイライトの改善 {: #syntax }

キャッシュを Application パネルで再整理する {: #cache }

その他のハイライト {: #misc }

Files

index.md

Latest commit

History

index.md

File metadata and controls

Styles ペインで高精細色をデバッグする {: #color }

強化されたブレークポイントのUX {: #breakpoint-redesign }

カスタマイズ可能な Recorder ショートカット {: #recorder }

Angular のシンタックスハイライトの改善 {: #syntax }

キャッシュを Application パネルで再整理する {: #cache }

その他のハイライト {: #misc }