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

DevTools の新機能（Chrome 81）

Kayce Basques

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

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

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

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

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

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 動画にコメントを残してください。