DevTools の新機能（Chrome 83）

Kayce Basques

視覚障がいをエミュレートする

[レンダリング] タブを開き、新しい視覚障がいのエミュレート機能を使用して、 さまざまな視力障がいを持つ人々がどのようにサイトを利用しているかを把握する。

かすみ目をエミュレートしています。

かすみ目をエミュレートしています。

DevTools で、かすみ目や次の色覚異常をエミュレートできます。

  • 1 型 2 色覚：赤色光を感知できない状態。
  • 第二色覚：緑色の光を知覚できない状態。
  • 三色覚症：ブルーライトを感知できない状態。
  • 色覚異常：灰色以外の色を認識できない（非常にまれ）。

こうした色覚異常には、あまり極端な形ではないものがあり、実際はより一般的です。 たとえば、第一色弱は赤色光に対する感度が低下します（第一色覚異常は赤色光に対する感度が低下します）。 赤色光を完全に認識できないことです）。ただし、これらの「-omaly」視覚障がいは はっきりと定義されていません。このような視力障害を持つ人は一人ひとり異なっており、 （関連する色をより多く/少なく認識できるようになります）。

DevTools のより極端なシミュレーション用に設計することで、ウェブアプリで 第一色弱、第二色弱、第三色弱、色覚異常を持つ方も対象となります。

Chromium の問題 #1003700 にフィードバックを送信するか、実装の詳細をご覧ください。

言語 / 地域をエミュレート

[センサー >] でロケーションを設定して、言語 / 地域をエミュレートできるようになりました。ロケーション。[コマンド メニューに移動し、「Sensors」と入力して [センサー] タブにアクセスします。これらのアクションを実行した後、DevTools 現在のデフォルトの言語 / 地域を変更し、以下に影響します。

  • Intl.* API。例:new Intl.NumberFormat().resolvedOptions().locale
  • その他のロケール対応 JavaScript API（String.prototype.localeCompare や *.prototype.toLocaleString。例:123_456..toLocaleString()
  • DOM API（navigator.language、navigator.languages など）
  • Accept-Language HTTP リクエスト ヘッダー
で確認できます。

言語 / 地域依存のコード例を参照して、実際に試してみましょう。

Chromium の問題 #1051822 にフィードバックを送信します。

クロスオリジン エンベディング ポリシー（COEP）のデバッグ

[Network] パネルに Cross-Origin Embedder Policy のデバッグ情報が表示されるようになりました。

[ステータス] 列で、リクエストがブロックされた理由の簡単な説明と、ブロックされた リンクをクリックすると、そのリクエストのヘッダーを表示してさらにデバッグできます。

[ステータス] 列の [ブロックされたリクエスト]

[Headers] タブの [Response Headers] セクションでは、問題を解決する方法について説明します。 問題:

レスポンス ヘッダー セクションの詳細なガイダンス

Chromium の問題 #1051466 にフィードバックを送信します。

ブレークポイント、条件付きブレークポイント、ログポイントの新しいアイコン

[Sources] パネルに、ブレークポイント、条件付きブレークポイント、ログポイントの新しいアイコンが追加されました。

新しいアイコンは、UI と他の GUI デバッグツールとの一貫性を高めるために用意されました。 （通常はブレークポイントが赤くなります）。また、 ひと目でわかるようになります。

Chromium の問題 #1041830 にフィードバックを送信します。

[Network] パネルで新しい cookie-path フィルタ キーワードを使用して、ネットワーク リクエストに焦点を当てます。 特定の Cookie パスを設定しています。

cookie-path などの特殊なキーワードについては、プロパティでリクエストをフィルタするをご覧ください。

コマンド メニューから左に固定

コマンド メニューを開き、Dock to left コマンドを実行して、DevTools を 表示されなくなります。

DevTools がビューポートの左側に固定される

Chromium の問題 #1011679 にフィードバックを送信します。

メインメニューの Settings オプションが移動されました。

メインメニューから [設定] を開くオプションは、[その他のツール] に移動しました。

'メインメニュー'[その他のツール] で開く「設定」に重点を置いています。

Chromium の問題 #1050855 にフィードバックを送信します。

[Audits] パネルを [Lighthouse] パネルに変更

DevTools チームと Lighthouse チームは、ウェブ デベロッパーから頻繁にフィードバックを得ました。 DevTools から Lighthouse を実行できることを確認しましたが、実際に試してみたところ、 「灯台」が見つかりませんでした[Audits] パネルが [Lighthouse] パネルになりました。

Lighthouse パネル

フォルダ内のすべてのローカル オーバーライドを削除する

ローカル オーバーライドを設定した後、フォルダを右クリックして、新しい [削除 すべてのオーバーライド オプションを使用して、そのフォルダ内のすべてのローカル オーバーライドを削除できます。

すべてのオーバーライドを削除

Chromium の問題 #1016501 にフィードバックを送信します。

長時間タスクの UI を更新

長時間タスクとは、長時間にわたってメインスレッドを独占する JavaScript コードであり、これによって 選択します。

[パフォーマンス] パネルで時間のかかるタスクを可視化することは以前から可能でしたが、 Chrome 83 パフォーマンス パネルの長時間タスクを可視化する UI が更新されました。時間のかかるタスク 一部が赤色のストライプで色分けされています。

新しい長時間タスク UI

Chromium の問題 #1054447 にフィードバックを送信します。

[マニフェスト] ペインでのマスク可能なアイコンのサポート

Android Oreo はアダプティブ アイコンを導入し、アプリアイコンをさまざまな形状で デバイスモデルに応じて異なります。マスク可能なアイコンは、アダプティブ アイコンをサポートする新しいアイコン形式です。 これにより、マスキング可能なデバイスをサポートするデバイスで PWA アイコンが適切に表示されます。 標準アイコンを使用します。

[マニフェスト] で新しい [マスク可能なアイコンの最小セーフエリアのみを表示する] チェックボックスを有効にします。 ] ペインで、マスク可能なアイコンが Android Oreo デバイスで適切に表示されることを確認します。詳しくは、 現在のアイコンの準備はできていますか？をご覧ください。

「マスク可能なアイコンの最小セーフエリアのみを表示する」チェックボックス

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

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

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

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

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

DevTools の新機能

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