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

DevTools の新機能（Chrome 81）

Kayce Basques

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

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

Moto G4 ビューポートのシミュレーション

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

Moto G4 ハードウェアの紹介

Cookie に関する最新情報

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

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

[アプリケーション] パネルの [Cookie] ペインのブロックされた Cookie

[Network] パネルから同様の UI にアクセスする方法については、Cookie がブロックされた理由をデバッグするもご覧ください。

Chromium の問題 #1030258

[Cookie] ペインの Cookie 優先度

[ネットワーク] パネルと [アプリケーション] パネルの [Cookie] テーブルに [優先度] 列が追加されました。

Chromium の問題 #1026879

すべての Cookie 値を編集

Cookie テーブルのすべてのセルは編集可能です。ただし、[Size] 列のセルは Cookie のネットワークサイズをバイト単位で表しているため、その列のセルは除きます。各列の説明については、フィールドをご覧ください。

Cookie 値の編集

Cookie データを含めるには Node.js フェッチとしてコピーします

ネットワークリクエストを右クリックして [Copy] > [Copy as Node.js fetch] を選択し、Cookie データを含む fetch 式を取得します。

Node.js フェッチとしてコピー

Chromium の問題 #1029826

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

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

[Manifest] ペインのアイコン

Chromium の問題 #985402

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

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

たとえば、このデモで p::after 疑似要素を調べると、[Styles] ペインにエスケープされた文字列が表示されます。

エスケープされた文字列

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

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

コンソールでより詳細なソースマップエラーを表示

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

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

[設定] を開き、[設定] > [ソース] > [ファイルの終わりを越えたスクロールを許可する] を無効にすると、[ソース] パネルでファイルの終わりからかなり先までスクロールできるようにするデフォルトの UI 動作を無効にします。

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

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

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

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

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

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