このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 83）

Kayce Basques

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

[レンダリング] タブを開き、新しい [視覚障がいのエミュレート] 機能を使用することで、さまざまなタイプの視力障がいを持つ人がサイトを経験する様子をより的確に把握できます。

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

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

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

こうした色覚異常にはあまり極端なレベルではないものがあり、実際はより一般的です。たとえば、第一色弱は赤色光に対する感度が低下します（赤色光を完全に認識できないプロ色覚異常とは対照的です）。しかし、このような「異常な」視力の欠陥は明確に定義されていません。そのような視覚障害を持つ人は一人ひとり異なっており、物事が異なる可能性があります（関連する色をより多く、または少なく認識できる）。

DevTools のより高度なシミュレーション用に設計することで、第一色弱、第二色弱、第三色弱、色彩をもつユーザーがウェブアプリにアクセスできることが保証されます。

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

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

[Sensors] > [Location] で場所を設定することで、言語 / 地域をエミュレートできるようになりました。コマンドメニューを開き、「Sensors」と入力して [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 リクエストヘッダー

注: navigator.language と navigator.languages の更新はすぐには表示されません。次のナビゲーションまたはページが再読み込みされた後にのみ表示されます。Accept-Language HTTP ヘッダーの変更は、後続のリクエストにのみ反映されます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

DevTools チームと Lighthouse チームには、DevTools から Lighthouse を実行できるというフィードバックがウェブデベロッパーから頻繁に寄せられましたが、実際に試してみたところ「Lighthouse」パネルが見つからなかったため、[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 の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。