DevTools の新機能（Chrome 68）

Kayce Basques

Chrome 68 の DevTools の新機能:

以下でリリースノートの動画版をご覧ください。

Assistive Console

Chrome 68 では、自動補完とプレビューに関連するいくつかの新しいコンソール機能が導入されています。

先行評価

コンソールで式を入力すると、その式の結果のプレビューがカーソルの下に表示されるようになります。

明示的に実行される前に、sort() オペレーションの結果がコンソールに出力されています。

図 1. sort() オペレーションが明示的に実行される前に、その結果がコンソールに出力されている

先行評価を有効にするには:

  1. コンソールを開きます。
  2. [コンソール設定] コンソール設定ボタン を開きます。
  3. [Eager evaluation] チェックボックスをオンにします。

式が副作用を引き起こす場合、DevTools は早期評価を行いません。

引数に関するヒント

関数を入力すると、関数で想定される引数がコンソールに表示されるようになります。

コンソールの引数ヒント。

図 2. コンソールの引数のヒントの例

注:

  • 引数（?options など）の前に疑問符が付いている場合、その引数は省略可です。
  • 引数（...items など）の前の省略記号は、スプレッドを表します。
  • CSS.supports() などの一部の関数は、複数の引数シグネチャを受け入れます。

関数の実行後の自動補完

早期評価を有効にすると、関数を入力した後に使用可能なプロパティと関数もコンソールに表示されるようになります。

document.querySelector('p') を実行すると、その要素で使用可能なプロパティと関数がコンソールに表示されます。

図 3. 上のスクリーンショットは古い動作を示し、下のスクリーンショットは関数の自動補完をサポートする新しい動作を示しています。

オートコンプリートの ES2017 キーワード

await などの ES2017 キーワードが、コンソールの自動入力 UI で使用できるようになりました。

コンソールの自動入力 UI に「await」が候補として表示されるようになりました。

図 4. コンソールの自動入力 UI に await が候補として表示されるようになりました

より迅速で信頼性の高い監査、新しい UI、新しい監査

Chrome 68 には Lighthouse 3.0 が搭載されています。以降のセクションでは、主な変更点について説明します。詳細については、Lighthouse 3.0 の発表をご覧ください。

より迅速で信頼性の高い監査

Lighthouse 3.0 には、コードネーム Lantern の新しい内部監査エンジンが搭載されています。これにより、監査がより速く完了し、実行間のばらつきが軽減されます。

新しい UI

Lighthouse 3.0 では、Lighthouse チームと Chrome UX（リサーチとデザイン）チームのコラボレーションにより、新しい UI も導入されています。

Lighthouse 3.0 の新しいレポート UI。

図 5. Lighthouse 3.0 の新しいレポート UI

新しい監査

Lighthouse 3.0 には、4 つの新しい監査も含まれています。

  • First Contentful Paint
  • robots.txt が無効です
  • アニメーション コンテンツでの動画形式の使用
  • 送信元への複数の往復を回避し、費用を削減

BigInt のサポート

Chrome 68 では、BigInt という新しい数値プリミティブがサポートされています。BigInt を使用すると、任意の精度で整数を表すことができます。コンソールで試してみましょう。

コンソールの BigInt の例。

図 6. コンソールの BigInt の例

プロパティパスを Watch に追加

ブレークポイントで停止しているときに、[スコープ] ペインでプロパティを右クリックし、[プロパティパスを Watch に追加] を選択して、そのプロパティを Watch ペインに追加します。

プロパティパスを Watch に追加する例。

図 7. プロパティパスを Watch に追加するの例

[タイムスタンプを表示] を設定に移動

以前は [コンソール設定] コンソール設定ボタン にあった [タイムスタンプを表示] チェックボックスは、[設定] に移動しました。

プレビュー チャネルをダウンロードする

デフォルトの開発用ブラウザとして Chrome の Canary、Dev、Beta のいずれかを使用することを検討してください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたりできます。また、ユーザーよりも早くサイトの問題を見つけることもできます。

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。