DevTools の新機能（Chrome 83）

Kayce Basques

色覚異常をエミュレートする

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

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

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

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

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

DevTools でより極端なシミュレーションを設計することで、ウェブアプリは、第 1 色覚異常、第 2 色覚異常、第 3 色覚異常、全色覚異常のユーザーにも確実にアクセスできるようになります。

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

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

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

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

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

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

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

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

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

[ヘッダー] タブの [レスポンス ヘッダー] セクションには、問題を解決するための詳細なガイダンスが表示されます。

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

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

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

• ブレークポイント は赤い円で表されます。
• 条件付きブレークポイント は、赤と白の半円で表されます。
• ログポイント は、コンソール アイコンが付いた赤い円で表されます。

新しいアイコンの目的は、UI を他の GUI デバッグツール（通常はブレークポイントを赤で表示）とより一貫性のあるものにし、3 つの機能を一目で区別しやすくすることです。

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

特定の Cookie パスを設定するネットワーク リクエストを表示する

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

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

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

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

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

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

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

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

[監査] パネルが [Lighthouse] パネルになりました

DevTools チームと Lighthouse チームは、ウェブ デベロッパーから、DevTools から Lighthouse を実行できると聞いたが、実際に試してみようとしたら [Lighthouse] パネルが見つからなかったというフィードバックを頻繁に受け取っていました。そのため、[監査] パネルが [Lighthouse] パネルになりました。

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

ローカル オーバーライドを設定すると、フォルダを右クリックして新しい [すべてのオーバーライドを削除] オプションを選択し、そのフォルダ内のすべてのローカル オーバーライドを削除できるようになります。

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

長時間タスクの UI を更新

長時間タスクとは、メインスレッドを長時間占有し、ウェブページをフリーズさせる JavaScript コードのことです。

しばらく前から [パフォーマンス] パネルで長いタスクを可視化できるようになっていましたが、Chrome 83 では、[パフォーマンス] パネルの長いタスクの可視化 UI が更新されました。タスクの Long Task 部分が、赤いストライプの背景で色分けされるようになりました。

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

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

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

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

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

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

Chrome DevTools チームに問い合わせる

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

• フィードバックや機能リクエストは、crbug.com からお送りください。
• DevTools の more_vert その他のオプション > [ヘルプ] > [DevTools の問題を報告] を使用して、DevTools の問題を報告します。
• @ChromeDevTools にツイートします。
• DevTools の新機能に関する YouTube 動画または DevTools のヒントに関する YouTube 動画にコメントを残してください。

DevTools の新機能

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