DevTools の新機能（Chrome 81）

Kayce Basques

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

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

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

[デバイスのフレームを表示] をクリックして、ビューポートの周囲に Moto G4 のハードウェアを表示します。

Moto G4 のハードウェア

関連する機能:

  • [コマンド メニュー] を開き、Capture screenshot コマンドを実行して、Moto G4 ハードウェアを含むビューポートのスクリーンショットを撮影します（[デバイスのフレームを表示] を有効にしてから）。
  • ネットワークと CPU の帯域を絞ることで、モバイル ユーザーのウェブ閲覧条件をより正確にシミュレートします。

Chromium の問題 #924693

Cookie 関連の更新

[Cookie] ペインに表示されるブロックされた Cookie

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

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

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

Chromium の問題 #1030258

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

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

Chromium の問題 #1026879

すべての Cookie 値を編集する

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

Cookie 値の編集

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

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

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

Chromium の問題 #1029826

より正確なウェブアプリ マニフェスト アイコン

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

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

Chromium の問題 #985402

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

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

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

エスケープされた文字列

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

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

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

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

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

ファイルの終わりを超えるスクロールを無効にする設定

[設定] を開き、[設定] > [ソース] > [ファイルの末尾を超えてスクロールを許可する] を無効にして、[ソース] パネルでファイルの末尾をはるかに超えてスクロールできるデフォルトの UI 動作を無効にします。

この機能の GIF を以下に示します。

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

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

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。