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

DevTools の新機能（Chrome 63）

Kayce Basques

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

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

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

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

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

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

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

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

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

ワークスペース 2.0

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

ワークスペース 2.0 は 1.0 をベースにして、より有用な UX を追加し、トランスパイルされたコードの自動マッピングを改善しています。この機能は本来、Chrome Developer Summit（CDS）2016 の直後にリリースされる予定でしたが、いくつかの問題を解消するために延期されました。

Workspaces 2.0 の動作については、CDS 2016 での DevTools の講演の「作成」のパート（14:28 頃）をご覧ください。

4 件の新しい監査

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

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

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

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

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

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

シンプルな push デモに移動します。
[Enable Push Notifications] をクリックします。
通知を許可するかどうかを確認するメッセージが表示されたら、[許可] をクリックします。
DevTools を開きます。
[Service Worker] ペインに移動します。
[Push] テキストボックスに何かを入力します。

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

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

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

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

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

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

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

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

デフォルトの開発ブラウザとして 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 動画にコメントを残してください。