Chrome 68 DevTools の新機能/変更点

# Eager Evaluation

コンソールで式を入力した時に、入力を確定させる前に結果がプレビュー表示されます。

次は `.sort()` の `)` を入力した直後の状態です。
<img width="607" alt="ev1.png" src="https://qiita-image-store.s3.amazonaws.com/0/36122/bceda382-7d88-0c74-fdd6-ab3ee88ae9c4.png">
ちょっとした値の確認であれば、式を入力後に Enter キーを入力する手間が不要になります。

ただし副作用を起こす場合はこの機能が無効になります。次は配列を宣言し、値を追加しようとしているところです。`push()` は破壊的な操作になるためプレビューが行われません。

<img width="607" alt="ev2.png" src="https://qiita-image-store.s3.amazonaws.com/0/36122/bd45c707-cecf-5249-d997-10cb1331963a.png">

また、この機能はデフォルトでは無効となっています。有効にするには **Console Settings** から **Eager evaluation** にチェックを入れる必要があります。

# 引数のヒントを表示

コンソールで関数のカッコ `(` を入力した際にその引数がツールチップで表示される機能です。
<img width="607" alt="args.png" src="https://qiita-image-store.s3.amazonaws.com/0/36122/7ca3f5a9-923f-c32e-96a5-ae4f535dcb5b.png">

メジャーな IDE ではよくある機能ですね。

# 関数実行後の自動補完

関数実行後の結果に対するコードの補完を自動で行います。
<img width="607" alt="autocomplete.png" src="https://qiita-image-store.s3.amazonaws.com/0/36122/604e7405-3674-4664-fb4a-63cfe3037cf0.png">

こちらもメジャーな IDE でよくある機能ではないでしょうか。

# コンソールの自動補完で ES2017 のキーワードをサポート

[ES2017(ES8)](https://www.ecma-international.org/ecma-262/8.0/index.html) のキーワードとして例えば `async` が自動で補完されます。
<img width="607" alt="async.png" src="https://qiita-image-store.s3.amazonaws.com/0/36122/417247df-e8bd-e43f-363d-04841867238a.png">

そもそも ES2017(ES8) ってどんな変更が入るんだっけ？という方は、例えば次の記事が参考になります。

- [今更ES2017 \(ES8\) まとめ \- Qiita](https://qiita.com/wingsys/items/8a4e4bbea16734e2feec)

# Audits パネルでの Lighthouse 3.0

Chrome 68 では Lighthouse が 3.0 になりました。

動作や UI の比較をしようと思ったのですが、執筆時点（2018/05/27）の Chrome Canary Version 69.0.3441.0 (Official Build) canary (64-bit) では 2.9.1 のままでした。Node または Chrome Extension だと 3.0 が使えるようです。

Lighthouse 3.0 については次のページで解説されているので参考にしてください。

- [Announcing Lighthouse 3\.0  \|  Web  \|  Google Developers](https://developers.google.com/web/updates/2018/05/lighthouse3)
- [Lighthouse 3\.0がリリースされます！使い方と新しい調査項目を確認しておきましょう – KOBIT](https://kobit.in/archives/11507)

# BigInt のサポート

[BigInt](https://developers.google.com/web/updates/2018/05/bigint) と呼ばれる任意精度のプリミティブ型数値をサポートしました。

これは DevTools 自体の機能ではなく JavaScript の機能ですがコンソール上でも実行することができます。

# プロパティを Watch 対象に追加しやすく

ブレークポイントで処理を止めた時に、プロパティの右クリックメニューに「**Add property path to watch**」が追加されました。

<img width="905" alt="add_watch.png" src="https://qiita-image-store.s3.amazonaws.com/0/36122/498ef77f-91d6-eb4c-58ce-c00714fdfb13.png">

Watch の `+` ボタンから手動で入力するのと比較して、特にオブジェクトの深い階層のプロパティを **Watch** ペインに追加しやすくなったと思います。

# "Show timestamps" チェックボックスを Settings に移動

以前は **Console Settings** にあった "Show timestamps" チェックボックスが Settings - Preferences - Console 内の **Show timestamps** に移動しました。

<img width="722" alt="timestamp.png" src="https://qiita-image-store.s3.amazonaws.com/0/36122/7be4d879-beb3-a22d-68c8-d2d2422391e5.png">

新しい **Console Settings**
<img width="722" alt="showtime_before.png" src="https://qiita-image-store.s3.amazonaws.com/0/36122/4aee5379-0454-e36f-d3d5-00630c45c5ae.png">

以前の **Console Settings**
<img width="723" alt="showtime_after.png" src="https://qiita-image-store.s3.amazonaws.com/0/36122/5a1be0ce-ce17-2a6a-b315-78d984f9b200.png">

ちなみに timestamp のチェックを入れるとコンソールタブ内の各行左側に日時が表示されます。
<img width="726" alt="showtime_after2.png" src="https://qiita-image-store.s3.amazonaws.com/0/36122/2d3cddfe-2b32-6a8d-cb8c-f28416ebb6ca.png">

# 参考

上記内容は主に次の公式ドキュメントを参考にしました。

- [What's New In DevTools \(Chrome 68\)  \|  Web  \|  Google Developers](https://developers.google.com/web/updates/2018/05/devtools)

また、新機能については [Google I/O '18](https://events.google.com/io/) のセッションでも紹介されています。動画はすでに YouTube にアップロードされていました。

- [What's new in Chrome DevTools \(Google I/O '18\) \- YouTube](https://www.youtube.com/watch?v=mfuE53x4b3k)

執筆時点の Chrome の安定最新版は 66 です。今回紹介した機能を試すには [Chrome Canary](https://www.google.co.jp/chrome/browser/canary.html) がおすすめです。