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

ブラウザ -Chrome

Post on:2018年6月4日

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

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

Networkパネルを開き、command + F で検索。

「cache-control」を検索

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

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

command + option + F でグローバル検索。

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

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

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

Stylesパネルで、CSS変数を使用したプロパティを表示。

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

Copy as fetch

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

Networkリクエストを右クリックし、「Copy」から「Copy as fetch」を選択。

Copy as fetch

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

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

fetch("https://preload.glitch.me/styles.css", {

"credentials": "omit",

"headers": {},

"referrer": "https://preload.glitch.me/after/",

"referrerPolicy": "no-referrer-when-downgrade",

"body": null,

"method": "GET",

"mode": "cors"

});

Auditsパネルのアップデート

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

Preload key requests

ページの読み込み時間を短縮するには、ブラウザにヒントを表示して、重要なレンダリングパスにとって重要なリソースをできるだけ早くダウンロードする必要があります。
Controlling Font Performance

Webフォントが読み込まれている間にテキストが表示されるようにすることで、ページをより便利にすることができます。