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

DevTools の新機能（Chrome 63）

Kayce Basques

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

マルチクライアントリモートデバッグのサポート。
Workspace 2.0。
4 件の新しい監査。
カスタムデータでプッシュ通知をシミュレートする。
カスタムタグでバックグラウンド同期イベントをトリガーする

注: 実行中の Chrome のバージョンは chrome://version で確認できます。Chrome は約 6 週間ごとに新しいメジャーバージョンに自動更新されます。

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

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

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

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

マルチクライアントリモートデバッグは、crbug.com で最も多く寄せられた DevTools の問題であり、Chromium プロジェクト全体では 3 位でした。また、マルチクライアントサポートにより、他のツールを DevTools と統合したり、これらのツールを新しい方法で使用したりする興味深い機会も数多く開かれます。次に例を示します。

ChromeDriver などのプロトコルクライアント、VS Code と Webstone 用の 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 の講演の「Authoring」パート（14:28 頃）で、Workspaces 2.0 の動作を確認してください。

4 件の新しい監査

Chrome 63 では、[監査] パネルで次の 4 つの新しい監査が導入されました。

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

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

[Audits] パネルで使用されるプロジェクトについて詳しくは、Lighthouse をご覧ください。

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

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

シンプルなプッシュのデモに移動します。
[プッシュ通知を有効にする] をクリックします。
通知を許可するよう求めるメッセージが表示されたら [許可] をクリックします。
DevTools を開きます。
[Service Worker] ペインに移動します。
[Push] テキストボックスに何かを入力します。

図 1. [Service Worker] ペインの [Push] テキストボックスでカスタムデータを使用したプッシュ通知のシミュレーションを行う
[Push] をクリックして通知を送信します。

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

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

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

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

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

図 3. [同期] をクリックすると、DevTools がカスタムタグ update-content が付いたバックグラウンド同期イベントを Service Worker に送信します。

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

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

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

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

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