Web制作者が知っておくと便利!Chrome 67でアップデートされたデベロッパーツールの新機能

先週末にリリースされたChrome 67でアップデートされたデベロッパーツールの新機能を紹介します。
Webの制作時に役立つ機能だけでなく、UIも進化しており、さらに便利になりました。

Chrome 67のキャプチャ

What's New In DevTools (Chrome 67)

ネットワーク ヘッダとレスポンスを検索

Networkパネルに検索機能が加わり、クエリのすべてのネットワークヘッダとレスポンスを検索できます。検索するキーワードは、正規表現にも対応しています。

  1. Networkパネルを開き、command + F で検索。
デベロッパーツールのキャプチャ

「cache-control」を検索

SearchパネルUIのアップデート

グローバル検索のUIが、ネットワーク検索のUIと同じスタイルになりました。

  1. command + option + F でグローバル検索。
デベロッパーツールのキャプチャ

グローバル検索の新しいUI

CSS変数値のプレビュー機能

CSSのカラーのプロパティ、background-color, colorなどの値にCSS変数を使用した場合、そのカラーのプレビューが表示されるようになりました。

  1. Stylesパネルで、CSS変数を使用したプロパティを表示。
デベロッパーツールのキャプチャ

「var(--main-color)」変数値のプレビューを表示

Copy as fetch

ネットワークのリクエストに対応するfetch()と同等のコードをクリップボードにコピーします。

  1. Networkリクエストを右クリックし、「Copy」から「Copy as fetch」を選択。
デベロッパーツールのキャプチャ

Copy as fetch

デベロッパーツールは下記のようなコードを生成します。

Auditsパネルのアップデート

Auditsパネルに、新しい機能が2つアップデートされました。

  • Preload key requests
    ページの読み込み時間を短縮するには、ブラウザにヒントを表示して、重要なレンダリングパスにとって重要なリソースをできるだけ早くダウンロードする必要があります。
  • Controlling Font Performance
    Webフォントが読み込まれている間にテキストが表示されるようにすることで、ページをより便利にすることができます。

新しい設定オプション

Auditsパネルで下記のように設定できます。

  • デスクトップのビューポートとユーザーエージェントの設定を維持します。Auditsパネルで、モバイルのデバイスをシミュレートするのを防ぐことができます。
  • ネットワークとCPUのスロットルを無効にします。
  • LocalStorageやIndexedDBなどのストレージを保持します。
デベロッパーツールのキャプチャ

新しい設定オプション

View Trace

ページを監査した後、「View Trace」をクリックして、負荷パフォーマンスのデータを表示します。

デベロッパーツールのキャプチャ

「View Trace」をクリック

デベロッパーツールのキャプチャ

負荷パフォーマンスのデータ

無限ループを停止する

for, do...whileのループを使用した際に無限ループになってしまうことがあります。無限ループを停止するには、下記のようにします。

  1. Sourcesパネルを開く。
  2. 一時停止(Debugger paused)をクリック。
デベロッパーツールのキャプチャ

無限ループを停止

ダークテーマのアップデート

デベロッパーツールのダークテーマの配色にいくつかの変更が加えられました。例えば、ブレークポイントのアイコンや現在の行はグリーンにハイライトされます。

デベロッパーツールのキャプチャ

グリーンにハイライト

ダークテーマの変更方法

  1. ケバブアイコンをクリックし、「Settings(F1)」を選択。
  2. 「Preferences」の「Appearance」内の「Theme」を「Dark」に変更。
デベロッパーツールのキャプチャ

ダークテーマの変更方法

sponsors

top of page

©2018 coliss