Posted at

Chrome 60 DevTools の新機能/変更点

More than 1 year has passed since last update.


新機能


Lighthouse による新しい Audits パネル

Lighthouse はサイトの品質を向上させる事を目的とした、Google によるオープンソースの監査ツールです。

Chrome で実行するにはエクステンションとして別途インストールする必要がありましたが、標準で Audits パネルに組み込まれました。ページに対して次のカテゴリを計測し、スコアを算出します。カテゴリは実施時に変更可能です。

各カテゴリの詳細内容も確認できます。

Chrome 59 で同じページを計測した結果です。


サードパーティバッジ

NetworkConsole パネルにサードパーティバッジが表示されるようになりました。

バッジにマウスカーソルをあてるとツールチップで名前が表示されます。

デフォルトでは非表示なので、表示するにはコマンドメニュー(Command+Shift+P (Mac)、Ctrl+Shift+P (Windows, Linux))から Show thrid party badges を実行して有効化する必要があります。


新しい "Continue to Here" ジェスチャー

JavaScript デバッガのブレークポイントで処理をブレークした後、その先の行でブレークポイントを置かず処理を再開、ブレークする事が出来るようになりました。

次の例では、262行目で止まった後、Command (Mac) または Control (Windows, Linux) キーを押して268行目にジャンプしています。

ジャンプ可能な箇所は青くハイライト表示されます。


変更点


より有益なオブジェクトプレビュー

Console パネルのオブジェクトプレビューがより親切な表示になりました。

次は Chrome 59 の Console パネルでオブジェクトを表示した結果です。child の値が Object と表示されていますが、どんな Object なのか不明です。

Chrome 60 で同様のオブジェクトを表示した結果です。child の値として {1: 100} と表示されるため、より分かりやすくなります。


より有益なコンテキストメニュー

Console パネルのコンテキストメニューがより親切になりました。

各項目のドメインがサブタイトルに表示され、iframe の項目にマウスカーソルをあてるとページ側で該当する要素がハイライト表示されます。

Chrome 59 の画面。


Coverage タブの更新がリアルタイムに

Chrome 59 で追加された Coverage タブの内容がリアルタイムで表示されるようになりました。

chrome60_coverage.gif

Chrome 59 ではキャプチャを終了してから表示されています。

chrome59_coverage.gif

Coverage 機能については次のエントリが参考になります。


ネットワークスロットルの簡略化

NetworkPerformance パネルのネットワークスロットルメニューが Offline, Slow 3G, Fast 3G の3つに簡略化されました。

次は Chrome 59 でのスロットルメニュー。

Chrome 60 でのスロットルメニュー。各メニューの遅延、ダウンロード、アップロードの値は誤解を招きやすいため、表示されなくなりました。

標準で表示されるメニューは簡素化されていますが、細かいスロットルの調節をしたい場合は、Custom の「Add...」メニューから好みの設定で追加することができます。


非同期コールスタックの標準化

非同期関数呼び出しの実行が把握しやすくなる非同期コールスタック機能が標準化されました。

以前はこの機能を使うとパフォーマンスに影響があったのですが、デフォルトでオンにしても十分問題ない速度になったようです。もしこの機能をオフにしたい場合は、設定画面またはコマンドメニューから設定することが出来ます。


Chrome 60 の新機能/変更点を試すには

執筆時点での Chrome の最新リリースは 59 です。Chrome 60 の新機能を試す方法として、例えば Chrome Canary をインストールするのがお手軽です。

最新は Version 61.0.3139.4 (Official Build) canary (64-bit) です。60 ではないのでご注意下さい。


参考