DevTools の新機能（Chrome 81）

Kayce Basques

デバイスモードでの Moto G4 のサポート

デバイス ツールバーを有効にすると、Moto G4 ビューポートのサイズをシミュレートできるようになりました [デバイス] リストで選択します。

Moto G4 のビューポートをシミュレートする

[Show Device Frame] をクリックすると、ビューポートの周囲に Moto G4 のハードウェアが表示されます。

Moto G4 のハードウェアを示す

関連機能:

Chromium の問題 #924693

Cookie 関連の更新

[Cookies] ペインのブロックされた Cookie

[アプリケーション] パネルの [Cookie] ペインで、ブロックされた Cookie が黄色の背景で色分けされるようになりました。

[Application] パネルの [Cookies] ペインに表示されたブロックされた Cookie

ネットワークから同様の UI にアクセスする方法については、Cookie がブロックされた理由をデバッグするをご覧ください。 できます。

Chromium の問題 #1030258

[Cookie] ペインでの Cookie の優先度

[Network] パネルと [Application] パネルの [Cookies] 表に [優先度] 列が追加されました。

Chromium の問題 #1026879

すべての Cookie 値を編集

Cookie テーブルのすべてのセルは現在編集可能です。ただし、[Size] 列のセルを除きます。 column は、Cookie のネットワーク サイズ（バイト単位）を表します。詳細については、フィールドをご覧ください。 表示されます。

Cookie 値を編集する

Node.js による取得としてコピーし、Cookie データを含めます

ネットワーク リクエストを右クリックして [コピー] を選択します。Node.js でフェッチとしてコピーし、fetch を取得します。 式を返します。

Node.js で取得としてコピー

Chromium の問題 #1029826

ウェブアプリ マニフェストのアイコンの精度が向上

これまでは、[Application] パネルの [Manifest] ペインで独自のリクエストを行って、 ウェブアプリ マニフェストのアイコンを表示する。DevTools には、Chrome で使用されているのとまったく同じマニフェスト アイコンが表示されるようになりました。

[マニフェスト] ペインのアイコン

Chromium の問題 #985402

CSS content プロパティにカーソルを合わせると、エスケープされていない値が表示されます

content プロパティの値にカーソルを合わせると、エスケープされていないバージョンの値が表示されます。

たとえば、このdemoで p::after 疑似要素を調べると、エスケープされていることがわかります。 [スタイル] ペインに

エスケープされた文字列

content 値にカーソルを合わせると、エスケープされていない値が表示されます。

エスケープされていない値

コンソールでのソースマップのエラーの詳細

コンソールで、ソースマップの読み込みまたは解析に失敗した理由の詳細を確認できるようになりました。以前は、 エラーの原因の説明なしにエラーが返されました。

コンソールでのソースマップの読み込みエラー

ファイルの末尾以降のスクロールを無効にする設定

[設定] を開き、[設定] を無効にします >出典 >動画の終わりまでスクロールできるようにする file でファイルの末尾までスクロールできるデフォルトの UI 動作を無効にします。 [Sources] パネル。

機能の GIF をご覧ください。

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

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

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

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

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

DevTools の新機能

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