DevTools の新機能（Chrome 63）

Kayce Basques
Kayce Basques

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

で確認できます。

詳しくは以下の動画をご覧ください。

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

VS Code や WebStorm などの IDE からアプリをデバッグした経験があれば、 が、DevTools を開くとデバッグ セッションがおかしくなることが判明しました。また、この問題により、 DevTools を使用して WebDriver テストをデバッグする。

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

マルチクライアントのリモート デバッグは、crbug.com で DevTools で最も人気のあった問題第 1 位でした。 第 3 位に選ばれましたマルチクライアントのサポートにより、 他のツールを DevTools に統合したり、新しいツールでこれらのツールを使用したりする できます。例:

  • ChromeDriver などのプロトコル クライアントや、VS Code や WebStorm 向けの Chrome デバッグ拡張機能 WebSocket のクライアント（Puppeteer など）を DevTools と同時に実行できるようになりました。
  • 2 つの個別の WebSocket プロトコル クライアント（Puppeteer や chrome-remote-interface など）。 同じタブに同時に接続できるようになりました
  • 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 頃）で、 2.0 の実例を見てみましょう。

4 件の新しい監査

Chrome 63 では、[監査] パネルに新たに 4 つの監査が表示されます。

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

[Audits] パネルを使用して ページの品質を改善できます

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

カスタムデータでプッシュ通知をシミュレートする

DevTools でプッシュ通知のシミュレーションが以前から存在していますが、1 つの制限があります。 カスタムデータを送信できませんでした。ただし、新しい [Push] テキスト ボックスが [Service Worker] ペインに表示されるので、 可能になりました。今すぐ試す:

  1. シンプルな push デモに移動します。
  2. [Enable Push Notifications] をクリックします。
  3. 通知を許可するかどうかを確認するメッセージが表示されたら、[許可] をクリックします。
  4. DevTools を開きます。
  5. [Service Worker] ペインに移動します。

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

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

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

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

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

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

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

バックグラウンド同期イベントをトリガーすることも以前から [Service Workers] ペインに表示されていましたが、 これでカスタムタグを送信できるようになりました。

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

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

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

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

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

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

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

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

DevTools の新機能

「DevTools の新機能」シリーズで紹介されているすべてのリスト。