DevTools の新機能（Chrome 89）

Jecelyn Yeen

Trusted Types 違反のデバッグサポート

Trusted Type 違反のブレークポイント

[Sources] で、Trusted Type 違反のブレークポイントを設定して例外をキャッチできるようになりました。 できます。

Trusted Types API は、DOM ベースのクロスサイト スクリプティングの脆弱性を防ぐのに役立ちます。詳細 Trusted Types により DOM XSS の脆弱性のないアプリケーションの作成、レビュー、維持が可能に こちらをご覧ください。

[ソース] パネルで、[デバッガ] サイドバー ペインを開きます。拡大するCSP 違反 Breakpoints] セクションに移動し、[Trusted TypeViolation] チェックボックスをオンにして 例外があります。こちらのデモページで実際にお試しください。

Trusted Type 違反のブレークポイント

Chromium の問題: 1142804

[Sources] パネルで、Trusted Type に違反する行の横に警告アイコンが表示されるようになりました。カーソルを合わせる 例外をプレビューできます。これをクリックして [Issues] タブを開くと、問題の詳細が表示されます。 例外と修正方法のガイダンスが あります

[Sources] パネルの問題を [Issues] タブにリンクする

Chromium の問題: 1150883

ビューポートの外側にあるノードのスクリーンショットをキャプチャする

スクロールしなければ見えない範囲のコンテンツを含め、ノード全体のスクリーンショットをキャプチャできるようになりました。以前は、 ビューポートにコンテンツが表示されないため、スクリーンショットが切り取られました。ページ全体のスクリーンショットは 確認できます

[要素] パネルで要素を右クリックし、[ノードのスクリーンショットをキャプチャ] を選択します。

ビューポートの外側にあるノードのスクリーンショットをキャプチャする

Chromium の問題: 1003629

ネットワーク リクエスト用の新しい [Trust Tokens] タブ

新しい [Trust Tokens] タブで、Trust Token ネットワーク リクエストを調べます。

Trust Token は、不正行為を阻止し、bot と人間を区別するのに役立つ新しい API です。パッシブな トラッキングできますTrust Token の利用を開始する方法を確認する。

今後のリリースで、さらなるデバッグのサポートが予定されています。

ネットワーク リクエスト用の新しい [Trust Token] タブ

Chromium の問題: 1126824

Lighthouse パネル内の Lighthouse 7

[Lighthouse] パネルでは Lighthouse 7 が実行中になります。詳細については、リリースノートをご覧ください。 変更のリストを作成します。

Lighthouse パネル内の Lighthouse 7

Lighthouse 7 の新しい監査:

  • Largest Contentful Paint（LCP）イメージをプリロードする。LCP 要素で使用されている画像が LCP の時間を改善するためにプリロードされます。
  • Issues パネルに記録された問題。Issues で未解決の問題のリストを示します。 できます。
  • プログレッシブ ウェブアプリ（PWA）。PWA カテゴリが大きく変わりました。

  • Installable グループについては、Chrome の 条件があります。これらは、[Manifest] ペインに表示されるシグナルと同じです。

    • 「Service Worker の登録」と「PWA Optimized」グループに移動し、 HTTPS"監査が主要な「インストール要件」の一部として組み込まれました監査です。
    • 高速かつ信頼性グループが削除されます。刷新された「インストール要件」は監査 オフライン機能チェックも含まれており、「current page and start_url」エラーが オフライン"監査が削除されました。「モバイル ネットワークでのページの読み込み速度は十分です」監査が削除されました できます。

Chromium の問題: 772558

[要素] パネルの更新

CSS :target 状態の強制処理をサポート

これで、DevTools を使用して、CSS の :target 状態を強制して検査できるようになりました。

[要素] パネルで要素を選択し、要素の状態を切り替えます。:target を有効にする チェックボックスをオンにして、スタイルの強制と検査を行います。

:target 疑似クラスを使用すると、URL のハッシュと要素の ID で要素をスタイル設定できます。 同じです。こちらのデモで、ご自身でお試しください。この新しい DevTools 機能により、 URL をいつでも手動で変更することなく、このようなスタイルで利用できます。

CSS の `:target` 状態を強制する

Chromium の問題: 1156628

要素を複製するための新しいショートカット

新しい [要素を複製] ショートカットを使用すると、要素のクローンをすぐに作成できます。

[要素] パネルで要素を右クリックし、[要素を複製] を選択します。新しい要素が その下に作成されます。

または、キーボード ショートカットを使用して要素を複製することもできます。

  • Mac: Shift + Option + ⬇️
  • Windows/ Linux: Shift + Alt + ⬇️

要素が重複しています

Chromium の問題: 1150797、1150797

カスタム CSS プロパティのカラー選択ツール

[スタイル] ペインに、カスタム CSS プロパティのカラー選択ツールが表示されるようになりました。

また、Shift キーを押しながらカラー選択ツールをクリックすると、RGBA、HSLA、 色の値の 16 進数表現です

カスタム CSS プロパティのカラー選択ツール

Chromium の問題: 1147016

CSS プロパティをコピーするための新しいショートカット

新しいショートカットを使用して、CSS プロパティをすばやくコピーできるようになりました。

[要素] パネルで要素を選択します。次に、CSS クラスまたは CSS プロパティを右クリックします。 [スタイル] ペインで値をコピーします。

CSS プロパティをコピーするための新しいショートカット

CSS クラスのコピー オプション:

  • コピーセレクタ。現在のセレクタ名をコピーします。
  • ルールをコピー。現在のセレクタのルールをコピーします。
  • すべての宣言をコピー: 現在のルールに含まれるすべての宣言（無効な宣言と 使用できます。

CSS プロパティのコピー オプション:

  • 宣言をコピー。現在の行の宣言をコピーします。
  • プロパティのコピー。現在の行のプロパティをコピーします。
  • Copy value: 現在の行の値をコピーします。

Chromium の問題: 1152391

Cookie の更新

URL デコードされた Cookie を表示する新しいオプション

[Cookies] ペインで、URL デコードされた Cookie の値を表示できるようになりました。

[アプリケーション] パネルに移動し、[Cookie] ペインを選択します。リスト内の任意の Cookie を選択します。 新しい [Show URL decoded] チェックボックスをオンにすると、デコードされた Cookie が表示されます。

URL デコードされた Cookie を表示するオプション

Chromium の問題: 997625

表示されている Cookie のみを消去する

[Cookies] ペインの [すべての Cookie を消去] ボタンが [フィルタした Cookie を消去] に置き換えられました ] ボタンを離します。

[アプリケーション] パネル >[Cookies] ペイン: テキスト ボックスにテキストを入力して Cookie をフィルタします。イン この例ではリストを「PREF」でフィルタします。[フィルタされた Cookie を消去] ボタンをクリックして、以下の操作を行います。 表示される Cookie を削除します。フィルタのテキストをクリアすると、他の Cookie が 選択します。これまでは、すべての Cookie を削除するしかありませんでした。

表示されている Cookie のみを消去する

Chromium の問題: 978059

[Storage] ペインでサードパーティ Cookie を消去する新しいオプション

[Storage] ペインでサイトデータを消去するときに、DevTools によってファーストパーティの Cookie のみが できます。[サードパーティ Cookie を含める] を有効にして、サードパーティ Cookie も削除します。

サードパーティ Cookie を削除するオプション

Chromium の問題: 1012337

カスタム デバイスの User-Agent Client Hints を編集する

カスタム デバイスの User-Agent Client Hints を編集できるようになりました。

[設定] に移動します。[デバイス] で、[カスタム デバイスの追加...] をクリックします。[User agent] を展開します。 Client Hints セクションで、クライアントのヒントを編集します。

User-Agent Client Hints API の編集

User-Agent Client Hints API は、User-Agent 文字列の代替手段であり、デベロッパーが ユーザーのブラウザに関する情報を、プライバシーに配慮した人間工学的な方法で提供します。詳細: web.dev/user-agent-client-hints/ の User-Agent Client Hints API

Chromium の問題: 1073909

ネットワーク パネルの更新

「record network log」を保持する設定

DevTools で「Record network log」が保持されるようになりました設定されます。これまでは、DevTools によってユーザーの選択がリセットされていました。 ページが再読み込みされます。

ネットワーク ログを記録

Chromium の問題: 1122580

[ネットワーク] パネルで WebTransport 接続を表示する

[ネットワーク] パネルに WebTransport 接続が表示されるようになりました。

WebTransport 接続

WebTransport は、低レイテンシの双方向のクライアント サーバー メッセージングを提供する新しい API です。詳細 今後の実装に関するフィードバックの提供方法について、 web.dev/webtransport/.

Chromium の問題: 1152290

「オンライン」「スロットリングなし」に名前を変更

ネットワーク エミュレーション オプション [Online]名前は「スロットリングなし」に変更されます。

ネットワーク ログを記録

Chromium の問題: 1028078

コンソール、ソースパネル、スタイル ペインの新しいコピー オプション

コンソールと [Sources] パネルでオブジェクトをコピーするための新しいショートカット

コンソールと [Sources] パネルの新しいショートカットを使用して、オブジェクト値をコピーできるようになりました。これは、 コピーする大きなオブジェクト（長い配列など）がある場合に特に便利です。

コンソールでオブジェクトをコピーする

[Sources] パネルでオブジェクトをコピーする

Chromium の問題: 1149859、1148353

[Sources] パネルと [Styles] ペインでファイル名をコピーするための新しいショートカット

以下を右クリックしてファイル名をコピーできるようになりました。

  • [ソース] パネルのファイル
  • [要素] パネルの [スタイル] ペインのファイル名

コンテキスト メニューから [Copy file name] を選択して、ファイル名をコピーします。

[Sources] パネルでファイル名をコピーする

[スタイル] ペインでファイル名をコピーする

Chromium の問題: 1155120

フレームの詳細ビューの更新

フレームの詳細ビューの新しい Service Worker 情報

DevTools では、Service Worker を作成するフレームの下に専用の Service Worker が表示されるようになりました。

[アプリケーション] パネルで、Service Worker が表示されているフレームを展開し、Service Worker を選択します。 [Service Workers] ツリーで詳細を表示します。

フレームの詳細ビューの Service Worker 情報

Chromium の問題: 1122507

フレームの詳細ビューでメモリ情報を測定する

performance.measureMemory() API のステータスが [API の可用性] に表示されます。 。

新しい performance.measureMemory() API は、ウェブページ全体のメモリ使用量を推定します。学習 この新しい API を使用してウェブページの総メモリ使用量をモニタリングする方法については、こちらの記事をご覧ください。

メモリを測定する

Chromium の問題: 1139899

[問題] タブからフィードバックを送信する

問題のメッセージを改善する場合は、コンソールから [問題] タブに移動するか、 その他の設定 >その他のツール >問題 >[問題] タブを開きます。問題を開く [問題メッセージは役に立ちましたか？] をクリックすると、フィードバックを送信できます。 クリックします。

問題のフィードバック リンク

[パフォーマンス] パネルでのフレーム落ち

[パフォーマンス] パネルで読み込みパフォーマンスを分析する際に、[フレーム] セクションに フレームが赤色で表示されます画面にカーソルを合わせると、フレームレートが表示されます。

ドロップしたフレーム

Chromium の問題: 1075865

デバイスモードで折りたたみ式デバイスとデュアル スクリーンをエミュレートする

DevTools でデュアル スクリーン デバイスと折りたたみ式デバイスをエミュレートできるようになりました。

デバイス ツールバーを有効にしたら、Surface Duo または Samsung デバイスのいずれかを選択します。 Galaxy Fold。

新しいスパンアイコンをクリックすると、シングル スクリーン、折りたたみ / デュアル スクリーン、展開を切り替えることができます。 構成されます。

試験運用版ウェブ プラットフォームの機能を有効にして、新しい CSS メディアにアクセスすることもできます。 screen-spanning 機能と JavaScript getWindowSegments API。試験運用版のアイコンは 試験運用版ウェブ プラットフォーム機能フラグの状態。旗のアイコンが強調表示され、 オンになっています。chrome://flags に移動してフラグを切り替えます。

デュアル スクリーンをエミュレート

Chromium の問題: 1054281

試験運用版の機能

Puppeteer Recorder でブラウザテストを自動化する

DevTools で、ブラウザとのやり取りに基づいて Puppeteer スクリプトを生成できるようになり、 ブラウザのテストを自動化しやすくなります。Puppeteer は、Node.js ライブラリで DevTools プロトコルを介して Chrome や Chromium を制御するためのハイレベル API

こちらのデモページに移動します。DevTools で [Sources] パネルを開きます。カメラの横にある [Recording] タブを選択します。 クリックします。新しい録音を追加し、ファイルに名前を付けます（例: test01.js）。

下部にある [Record] ボタンをクリックして、インタラクションの記録を開始します。次の質問にお答えください クリックします。Puppeteer コマンドが、適宜ファイルに追加されていることを確認します。[ もう一度 [Record] ボタンをタップすると、録音が停止します。

スクリプトを実行するには、Puppeteer 公式サイトのスタートガイドに沿って操作します。

これは初期段階のテストです。今後、レコーダーの改良と拡張を予定しています。 継続的に強化されます。

Puppeteer レコーダー

Chromium の問題: 1144127

[スタイル] ペインのフォント エディタ

新しいフォント エディタは、[スタイル] ペインのポップオーバー エディタです。フォント関連のプロパティを使用すると、 ウェブページに最適なタイポグラフィを 見つけられるようにします

ポップオーバーでは、直感的な一連の直感的な UI を使って、タイポグラフィを動的に操作できるすっきりとした UI を提供します。 説明します。

[スタイル] ペインのフォント エディタ

Chromium の問題: 1093229

CSS Flexbox デバッグツール

DevTools では、前回のリリース以降、Flexbox デバッグの試験運用版のサポートが追加されました。

DevTools で、CSS align-items プロパティを見やすくするため、指針を描くようになりました。「 CSS gap プロパティもサポートされています。この例では、CSS gap: 12px; を使用しています。なお、 各ギャップのハッチングパターンが 示されます

フレックスボックス

Chromium の問題: 1139949

新しい [CSP 違反] タブ

新しい [CSP 違反] タブでは、すべてのコンテンツ セキュリティ ポリシー（CSP）違反を一目で確認できます。 この新しいタブは、大量のウェブページをより簡単に操作できるようにする試験運用版です CSP と Trusted Type の違反のうち、

[CSP 違反] タブ

Chromium の問題: 1137837

新しい色のコントラスト計算 - Advanced Perceptual Contrast Algorithm（APCA）

AA/AAA は Advanced Perceptual Contrast Algorithm（APCA）に置き換えられます。 カラー選択ツールでガイドラインのコントラスト比を選択できます。

APCA は、色知覚に関する最新の研究に基づいてコントラストを計算する新しい方法です。比較 AA/AAA ガイドライン。APCA はコンテキスト依存度が高い。コントラストは、テキストの 空間プロパティ（フォントの太さとサイズ）、色（テキストと 背景）、コンテキスト（周囲光、環境、テキストの本来の用途）などがあります。

カラー選択ツールの APCA

この例では、APCA のしきい値は 38% です。コントラスト比は記載の値以上である必要があります。この値は、こちらの APCA ルックアップ テーブルを参照して、フォントの太さとサイズに基づいて計算されます。

Chromium の問題: 1121900

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

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

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

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

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

DevTools の新機能

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