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

DevTools の新機能（Chrome 81）

Kayce Basques

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

デバイスツールバーを有効にすると、[Device] リストから 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] 列のセルは Cookie のネットワークサイズ（バイト数）を表します。各列の説明については、フィールドをご覧ください。

Cookie 値を編集する

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

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

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

Chromium の問題 #1029826

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

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

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

Chromium の問題 #985402

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

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

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

エスケープされた文字列

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

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

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

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

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

[設定] を開き、[設定] > [ソース] > [ファイルの末尾以降でのスクロールを許可] を無効にすると、[ソース] パネルでファイルの末尾までスクロールできるデフォルトの UI 動作が無効になります。

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

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

デフォルトの開発ブラウザとして 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 動画にコメントを残してください。