新機能
Lighthouse による新しい Audits パネル
Lighthouse はサイトの品質を向上させる事を目的とした、Google によるオープンソースの監査ツールです。
Chrome で実行するにはエクステンションとして別途インストールする必要がありましたが、標準で Audits パネルに組み込まれました。ページに対して次のカテゴリを計測し、スコアを算出します。カテゴリは実施時に変更可能です。
- Progressive Web App
- Performance
- Accessibility
- Best Practices
各カテゴリの詳細内容も確認できます。
Chrome 59 で同じページを計測した結果です。
サードパーティバッジ
Network と Console パネルにサードパーティバッジが表示されるようになりました。
バッジにマウスカーソルをあてるとツールチップで名前が表示されます。
デフォルトでは非表示なので、表示するにはコマンドメニュー（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 タブの内容がリアルタイムで表示されるようになりました。
Chrome 59 ではキャプチャを終了してから表示されています。
Coverage 機能については次のエントリが参考になります。
- What's New In DevTools (Chrome 59) | Web | Google Developers
- Chromeバージョン59のデベロッパーツールにCSS、JSのカバレッジタブが追加されるらしい - Qiita
ネットワークスロットルの簡略化
Network と Performance パネルのネットワークスロットルメニューが 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 ではないのでご注意下さい。