DevTools の新機能（Chrome 61）

Kayce Basques

Chrome 61 で予定されている DevTools の新機能と主な変更点は次のとおりです。

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

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

Device Mode の [Throttling] メニューがデフォルトで公開され、 ローエンドまたはミドルクラスのモバイルデバイスを購入できます

スロットリング メニュー

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

スロットリング メニューの定義

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

ストレージ使用量を表示する

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

[Usage] セクション

図 3. [使用量] セクションを見ると、https://airhorner.com はそのうちの 66.9 KB を オリジンの割り当ては 15,214 MB です

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

[キャッシュ ストレージ] タブの新しい [キャッシュされた時間] 列には、Service Worker がいつキャッシュに できます。

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

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

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

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

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

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

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

[設定] を開き、新しい [Flamechart のマウスホイール アクション] 設定で、 マウスホイールは [パフォーマンス] パネルで動作します。

たとえば、録音の [Main] セクションでマウスホイールを使用した場合や、 デフォルトの動作では、ズームインまたはズームアウトします。[ [スクロール] がオンになっている場合、この操作で上または下にスクロールできます。

「Flamechart のマウスホイール アクション」設定

図 6. [Flamechart のマウスホイール アクション] 設定

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

ES6 モジュールは Chrome 61 でネイティブにリリースされます。Chronicle に関する処理については、 それ以外は、DevTools は想定どおりに機能します。と にブレークポイントを設定してみましょう。 Paul Irish による TodoMVC の ES6-Module-implementation の実践方法を確認します。

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

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

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

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

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

DevTools の新機能

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