DevTools の新機能（Chrome 83）

Kayce Basques

色覚異常をエミュレート

[レンダリング] タブを開き、新しい [視覚障害をシミュレート] 機能を使用して、さまざまな視覚障害のあるユーザーがサイトをどのように操作するかを把握します。

かすみ目をエミュレートする。

かすみ目をエミュレートする。

DevTools では、かすみ目と次の種類の色覚特性をエミュレートできます。

  • 1 型 2 色覚: 赤色の光の識別が難しい状態。
  • 2 型 2 色覚: 緑色の光の識別が難しい状態。
  • 3 型 2 色覚: 青色の光の識別が難しい状態。
  • 色覚異常: グレーを除くすべての光の識別が難しい状態（非常にまれです）。

これらの色覚異常の程度が軽いものも存在し、実際はより一般的です。たとえば、第一色弱は赤色に対する感度が低下した状態です（赤色をまったく認識できない状態である1 型 2 色覚とは異なります）。ただし、これらの「異常」な視覚障がいは明確に定義されていません。このような視覚障がいを持つ人々はそれぞれ異なり、物事を異なるように見ている可能性があります（関連する色をより多くまたはより少なく認識できる）。

DevTools でより極端なシミュレーション向けに設計することで、プロトアノーマリー、デュータアノーマリー、トライタアノーマリー、アクロマトマリーのあるユーザーもウェブアプリにアクセスできるようになります。

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

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

[センサー] > [位置情報] で位置情報を設定することで、言語 / 地域をエミュレートできるようになりました。コマンド メニューを開き、Sensors と入力して [センサー] タブにアクセスします。これらの操作を行うと、DevTools によって現在のデフォルトの言語 / 地域が変更され、次の影響が及ぶことになります。

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

言語 / 地域に依存するコード例で、実際に試してみてください。

Chromium の問題 #1051822 にフィードバックを送信してください。

クロスオリジンの埋め込みポリシー（COEP）のデバッグ

[ネットワーク] パネルに、クロスオリジンの埋め込みポリシーのデバッグ情報が表示されるようになります。

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

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

[Headers] タブの [Response Headers] セクションには、問題を解決する方法に関する詳細なガイダンスが記載されています。

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

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

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

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

新しいアイコンの目的は、UI を他の GUI デバッグツール（通常はブレークポイントを赤色で表示）とより整合させ、3 つの機能を一目で区別できるようにすることです。

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

[ネットワーク] パネルで新しい cookie-path フィルタキーワードを使用して、特定のCookie パスを設定するネットワーク リクエストに絞り込むことができます。

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

コマンド メニューの [左側にドッキング]

コマンド メニューを開き、Dock to left コマンドを実行して DevTools をビューポートの左側に移動します。

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

Chromium の問題 #1011679 にフィードバックを送信してください。

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

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

[メインメニュー] が開き、[その他のツール] が [設定] にフォーカスされている

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

[Audits] パネルが [Lighthouse] パネルに変更されました

DevTools チームと Lighthouse チームは、DevTools から Lighthouse を実行できると聞いて試してみたものの、[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 の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

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