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

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 リクエストヘッダー

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

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

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

Cross-Origin Embedder Policy（COEP）デバッグ

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

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

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

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

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

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

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

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

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

新しいアイコンは、他の GUI デバッグツール（通常はブレークポイントを赤色）との UI の一貫性を高め、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 パネル

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

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

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

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

長時間タスクの UI の更新

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

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

新しい Long Task UI

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

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

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

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

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

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

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

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

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

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