DevTools の新機能（Chrome 81）

Kayce Basques
Kayce Basques
X GitHub

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

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

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

[Show Device Frame] をクリックして、ビューポートの周囲に 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 値の編集

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

ネットワーク リクエストを右クリックして、[コピー] > [Node.js fetch としてコピー] を選択すると、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 の新機能シリーズで取り上げられたすべての内容の一覧。