DevTools の新機能（Chrome 63）

Kayce Basques
Kayce Basques
X GitHub

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

詳しくは、以下をお読みいただくか、以下の動画をご覧ください。

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

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

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

マルチクライアント リモート デバッグは、crbug.com で最も人気のある DevTools の問題の 1 つであり、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 を同時に使用できるようになりました。

ワークスペース 2.0

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

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

CDS 2016 の DevTools の講演の「オーサリング」パート（14:28 あたり）で、Workspaces 2.0 の動作を確認できます。

4 つの新しい監査

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

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

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

[監査] パネルの基盤となるプロジェクトについて詳しくは、Lighthouse をご覧ください。

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

DevTools では、プッシュ通知のシミュレートは以前から可能でしたが、カスタムデータを送信できないという制限がありました。しかし、Chrome 63 の [Service Worker] ペインに新しい [Push] テキスト ボックスが追加されたため、それが可能になりました。今すぐ試す:

  1. Simple Push Demo に移動します。
  2. [Enable Push Notifications] をクリックします。
  3. Chrome で通知を許可するかどうかを確認するメッセージが表示されたら、[許可] をクリックします。
  4. DevTools を開きます。
  5. [サービス ワーカー] ペインに移動します。

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

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

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

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

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

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

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

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

  1. DevTools を開きます。
  2. [サービス ワーカー] ペインに移動します。
  3. [Sync] テキスト ボックスにテキストを入力します。
  4. [Sync] をクリックします。

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

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

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

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