Web制作者は要チェック！Chrome 68でアップデートされたデベロッパーツールの新機能

25日の昨日にリリースされたChrome 68で、ブラウザと共にアップデートされたデベロッパーツールの新機能を紹介します。

ブラウザの方は、以前から伝えられていた通り、http通信の際に「保護されていない通信」と表示されるようになりましたね。

What's New In DevTools (Chrome 68)

• コンソールの補助機能
• より素早く、信頼性が高いUIとAudits
• BigIntのサポート
• Add property path to watch
• Show timestampsの移動

コンソールの補助機能

Chrome 68では、オートコンプリートやプレビューに関連する新しいコンソール機能が加わりました。

式の結果をプレビュー

コンソールに式を入力すると、その式の結果をカーソルの下にプレビューできるようになりました。

sort()の結果をプレビュー

1. Consoleをクリックして、コンソールパネルを開く。
2. 右端の「Console Settings」のアイコンから設定を開く。
3. 「Eager evaluation」のチェックボックスをオンに。

引数のヒント

関数を入力すると、コンソールは関数が期待する引数を表示するようになりました。

引数のヒント

関数実行後のオートコンプリート

「Eager evaluation」をオンにすると、コンソールで入力した後に利用可能なプロパティと機能が表示されるようになりました。

上： Chrome 66、下: Chrome 68

1. Consoleをクリックして、コンソールパネルを開く。
2. 右端の「Console Settings」のアイコンから設定を開く。
3. 「Eager evaluation」のチェックボックスをオンに。

ES2017のオートコンプリート

ES2017のキーワード（awaitなど）は、コンソールでオートコンプリートされるようになりました。

「aw」を入力

より素早く、信頼性が高いUIとAudits

Chrome 68には、Lighthouse 3.0が付属しています。

新しいUI

LighthouseとChrome UXチームの協力により、Lighthouse 3.0のUIが新しくなりました。

Lighthouse 3.0の新しいUI

新しいAudits

Lighthouse 3.0には、4つの新しいAuditsが付属しています。

• First Contentful Paint
• robots.txt is valid
  robots.txtファイルの形式が誤っていると、クローラがWebサイトのクロール方法や索引付け方法を理解できないことがあります。
• Use video formats for animated content
  大きなGIFアニメは配信するのに非効率的です。アニメーションにはMPEG4/WebMビデオ、GIFではなく静的画像用にPNG/WebPを使用してネットワークバイトを節約することを検討してください。
• Avoid multiple, costly round trips to any origin
  preconnectまたはdns-prefetchリソースのヒントを追加して、重要なサードパーティーの起点への早期接続を確立することを検討してください。

新しいAudits

BigIntのサポート

Chrome 68では、BigIntという新しい数値プリミティブをサポートしています。 BigIntでは整数を任意の精度で表すことができます。コンソールで試してみてください。
これはデベロッパーツールの機能ではなく、新しいJavaScriptの機能です。

コンソール内のBigIntの例

Add property path to watch

ブレークポイントで一時停止した状態で、Scopeパネルでプロパティを右クリックし、「Add property path to watch」を選択して、そのプロパティをWatchパネルに追加することができます。

Add property path to watchの例

Show timestampsの移動

以前までコンソールのパネルの設定にあった「Show timestamps」が、デベロッパーツールの設定に移動しました。

デベロッパーツールの設定