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

DevTools の新機能（Chrome 68）

Kayce Basques

DevTools の新機能（Chrome 68）:

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

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

以下のリリースノートをお読みいただくか、動画版をご覧ください。

アシストコンソール

Chrome 68 では、予測入力とプレビューに関連するコンソールの新機能がいくつか追加されています。

積極的な評価

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

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

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

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

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

DevTools では、式が副作用を引き起こすかどうかが積極的に評価されません。

引数のヒント

関数を入力すると、その関数が予期する引数がコンソールに表示されます。

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

図 2. コンソールの引数ヒントのさまざまな例

注:

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

関数の実行後に予測入力を行う

積極的評価を有効にすると、関数の入力後に利用できるプロパティと関数もコンソールに表示されます。

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

図 3. 上のスクリーンショットは以前の動作、下のスクリーンショットは関数の予測入力をサポートする新しい動作を示しています。

予測入力内の ES2017 キーワード

ES2017 のキーワード（await など）がコンソールの予測入力 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 の [More options] > [Help] > [Report a DevTools issues] を使用して、DevTools の問題を報告します。
@ChromeDevTools でツイートしてください。
DevTools の新機能に関する YouTube 動画または DevTools のヒントの YouTube 動画にコメントを残してください。