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

DevTools の新機能（Chrome 61）

Kayce Basques

Chrome 61 で DevTools に追加される新機能と主な変更点は次のとおりです。

モバイルデバイスのスロットリングシミュレーション。CPU とネットワークのスロットリングを同時に設定して、ミッドティアまたはローエンドのモバイルデバイスをシミュレートします。
ストレージ使用量。送信元が使用しているストレージの量をテクノロジー（IndexedDB、キャッシュ、ローカル、セッションなど）ごとに確認できます。
タイムスタンプをキャッシュに保存する。Service Worker がレスポンスをキャッシュに保存した日時を表示します。
コマンドメニューから FPS メーターを有効にします。
[パフォーマンス] パネルでマウスホイールとトラックパッドの動作を変更する
ES6 モジュールをネイティブにデバッグする。

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

詳細については、以下のリリースノートの動画版をご覧いただくか、以下をお読みください。

Device Mode でローエンドおよびミッドレンジモバイルデバイスをシミュレートする

[Device Mode] の [Throttling] メニューがデフォルトで公開され、数回のクリックでローエンドまたはミッドティアのモバイルデバイスをシミュレートできるようになりました。

図 1. スロットリングメニュー

図 2. [スロットリング] メニューにカーソルを合わせるか、[キャプチャ設定] メニューを開いて、[ミッドティアモバイル] と [ローエンドモバイル] の定義を確認します。

ストレージ使用量を確認する

[Application] パネルの [Clear Storage] タブにある新しい [Usage] セクションには、送信元が使用しているストレージの量と、このデバイスにおける送信元の最大割り当てが表示されます。

[Usage] セクション

図 3. [Usage] セクションには、https://airhorner.com がオリジンの割り当て 15,214 MB のうち 66.9 KB を使用していることが示されます。

Service Worker がレスポンスをキャッシュに保存した日時を表示する

[キャッシュストレージ] タブの新しい [キャッシュに保存された時間] 列には、Service Worker がレスポンスをキャッシュに保存した時間が表示されます。

[キャッシュされた時間] 列

図 4. [キャッシュされた時間] 列

コマンドメニューから FPS メーターを有効にする

コマンドメニューから FPS メーターを有効にできるようになりました。

コマンドメニューから FPS メーターを有効にする

図 5. コマンドメニューから FPS メーターを有効にする

パフォーマンス録画でズームやスクロールのマウスホイール動作を設定する

[設定] を開き、新しい [Flamechart マウスホイール] 設定を設定して、[Performance] パネルでのマウスホイールの動作を変更します。

たとえば、記録の [Main] セクションでマウスホイールを使用したり、トラックパッドを 2 本の指でスワイプしたりすると、デフォルトの動作ではズームインまたはズームアウトが実行されます。設定を [スクロール] に変更すると、この操作で上下にスクロールするようになりました。

[フレームチャートのマウスホイールアクション] 設定

図 6. [フレームチャートのマウスホイールアクション] 設定

ES6 モジュールのデバッグサポート

ES6 モジュールは Chrome 61 でネイティブにリリースされます。DevTools に関しては、デバッグが想定どおりに機能すること以外、何もする必要はありません。ブレークポイントを設定し、TodoMVC の Paul Irish による ES6-Module-implementation の手順を実際に確認してみましょう。

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

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

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

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

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