DevTools の新機能（Chrome 63）

Kayce Basques

ご利用の再開ありがとうございます。Chrome 63 の DevTools に追加される新機能は次のとおりです。

詳しくは、この記事を読み進めるか、以下の動画をご覧ください。

マルチクライアント リモート デバッグのサポート

VS Code や WebStorm などの IDE からアプリのデバッグを試したことがあれば、DevTools を開くとデバッグ セッションが中断されることに気づいたことがあるでしょう。この問題により、DevTools を使用して WebDriver テストをデバッグすることもできなくなりました。

Chrome 63 以降、DevTools はデフォルトで複数のリモート デバッグ クライアントをサポートするようになりました。設定は不要です。

マルチクライアント リモート デバッグは、crbug.com で最も報告されている DevTools の問題であり、Chromium プロジェクト全体で 3 番目に多い問題でした。マルチクライアント サポートにより、他のツールを DevTools と統合したり、それらのツールを新しい方法で使用したりできる可能性が大幅に広がります。次に例を示します。

  • ChromeDriver や VS Code と Webstorm 用の Chrome デバッグ拡張機能などのプロトコル クライアントと、Puppeteer などの WebSocket クライアントを DevTools と同時に実行できるようになりました。
  • Puppeteer や chrome-remote-interface など、2 つの個別の WebSocket プロトコル クライアントが同じタブに同時に接続できるようになりました。
  • chrome.debugger API を使用する Chrome 拡張機能を DevTools と同時に実行できるようになりました。
  • 複数の異なる Chrome 拡張機能が、同じタブで chrome.debugger API を同時に使用できるようになりました。

Workspaces 2.0

ワークスペースは、DevTools で長い間使用されてきました。この機能を使用すると、DevTools を IDE として使用できます。DevTools 内でソースコードに変更を加えると、変更はファイル システム上のプロジェクトのローカル バージョンに保持されます。

Workspaces 2.0 は 1.0 をベースに構築されており、より便利な UX が追加され、トランスパイルされたコードの自動マッピングが改善されています。この機能は、元々は Chrome Developer Summit（CDS）2016 の直後にリリースされる予定でしたが、チームがいくつかの問題を解決するために延期しました。

Workspaces 2.0 の動作を確認するには、CDS 2016 の DevTools の講演の「作成」部分（14:28 頃）をご覧ください。

4 つの新しい監査

Chrome 63 では、[Audits] パネルに 4 つの新しい監査が追加されました。

  • 画像を WebP として配信します。
  • 適切なアスペクト比の画像を使用します。
  • 既知のセキュリティの脆弱性を含んだフロントエンドの JavaScript ライブラリは使用しないでください。
  • ブラウザのエラーがコンソールに記録されます。

Audits パネルを使用してページの品質を改善する方法については、Chrome DevTools で Lighthouse を実行するをご覧ください。

[監査] パネルを提供するプロジェクトの詳細については、Lighthouse をご覧ください。

カスタムデータを使用してプッシュ通知をシミュレートする

プッシュ通知のシミュレーションは DevTools で長い間使用されてきましたが、カスタムデータを送信できないという制限がありました。しかし、Chrome 63 の [Service Worker] ペインに新しい [Push] テキスト ボックスが追加されたため、この問題は解決しました。今すぐ試す:

  1. シンプルなプッシュ デモに移動します。
  2. [Enable Push Notifications] をクリックします。
  3. Chrome で通知を許可するよう求められたら、[許可] をクリックします。
  4. DevTools を開きます。
  5. [Service Workers] ペインに移動します。

  6. [Push] テキスト ボックスに何かを入力します。

    カスタムデータを使用してプッシュ通知をシミュレートする。

    図 1. [Service Worker] ペインの [Push] テキスト ボックスを使用して、カスタムデータを含むプッシュ通知をシミュレートする

  7. [Push] をクリックして通知を送信します。

    シミュレートされたプッシュ通知

    図 2. シミュレートされたプッシュ通知

カスタムタグでバックグラウンド同期イベントをトリガーする

バックグラウンド同期イベントのトリガーは、Service Workers ペインにも長い間ありましたが、カスタムタグを送信できるようになりました。

  1. DevTools を開きます。
  2. [Service Workers] ペインに移動します。
  3. [同期] テキスト ボックスにテキストを入力します。
  4. [Sync] をクリックします。

カスタム バックグラウンド同期イベントをトリガーする

図 3. [同期] をクリックすると、DevTools はカスタムタグ update-content を含むバックグラウンド同期イベントをサービス ワーカーに送信します。

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

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

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

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

DevTools の新機能

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