このページは Cloud Translation API によって翻訳されました。

DevTools の新機能（Chrome 68）

Kayce Basques

Chrome 68 の DevTools の新機能:

積極的な評価。式を入力すると、コンソールに結果がプレビューされます。
引数のヒント。関数を入力すると、その関数に想定される引数がコンソールに表示されます。
関数のオートコンプリート。document.querySelector('p') などの関数呼び出しを入力すると、その戻り値がサポートする関数とプロパティがコンソールに表示されます。
コンソールの ES2017 キーワードawait などのキーワードをコンソールのオートコンプリート UI で使用できるようになりました。
監査パネルの Lighthouse 3.0。監査の迅速化と一貫性の向上、新しい UI、新しい監査が導入されます。
BigInt サポート。コンソールで JavaScript の新しい任意精度整数をお試しください。
監視ペインにプロパティパスを追加する[Scope] ペインから [Watch] ペインにプロパティを追加します。
[タイムスタンプを表示] を [設定] に移動しました。

注: 実行中の Chrome のバージョンを chrome://version でご確認ください。以前のバージョンを実行している場合、これらの機能は存在しません。それ以降のバージョンを実行している場合、これらの機能は変更されている可能性があります。Chrome では約 6 週間ごとにメジャーバージョンが自動更新されます。

このまま続きをお読みになるか、以下のリリースノートの動画版をご覧ください。

アシストコンソール

Chrome 68 には、オートコンプリートとプレビューに関連する新しいコンソール機能がいくつか搭載されています。

積極的な評価

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

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

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

積極的な評価を有効にするには:

コンソールを開きます。
コンソールの設定 を開きます。
[積極的な評価] チェックボックスをオンにします。

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 の例

プロパティパスをウォッチに追加する

ブレークポイントで一時停止した状態で、[Scope] ペインでプロパティを右クリックし、[Add property path to watch] を選択して、そのプロパティを [Watch] ペインに追加します。

監視するプロパティパスの追加の例。

図 7. ウォッチにプロパティパスを追加するの例

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

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

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

Chrome Canary、Dev、Beta を既定の開発ブラウザとして使用することをご検討ください。これらのプレビューチャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブプラットフォーム API をテストしたり、ユーザーが実際に体験する前にサイト上の問題を検出したりできます。

Chrome DevTools チームへのお問い合わせ

投稿内の新機能や変更点、または DevTools に関するその他のことについて話し合うには、次のオプションを使用します。

crbug.com からご提案やフィードバックをお送りください。
DevTools の問題を報告するには、DevTools でその他のオプション アイコン > [ヘルプ] > [DevTools の問題を報告する] を選択します。
@ChromeDevTools にツイートします。
「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。