DevTools の新機能（Chrome 61）

Kayce Basques

Chrome 61 の DevTools の新機能と主な変更点は次のとおりです。

以下のリリースノートの動画版をご覧ください。詳しくは、以下をご覧ください。

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

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

スロットル処理メニュー

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

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

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

ストレージの使用状況を表示する

[アプリケーション] パネルの [ストレージの消去] タブの新しい [使用量] セクションには、オリジンが使用しているストレージの量と、このデバイス上のオリジンの最大割り当てが表示されます。

[使用状況] セクション

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

サービス ワーカーがレスポンスをキャッシュに保存したタイミングを確認する

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

キャッシュに保存された時間列

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

コマンド メニューから FPS メーターを使用する

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

コマンド メニューから FPS メーターを使用する

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

パフォーマンス レコーディングでズームまたはスクロールするようにマウスホイールの動作を設定する

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

たとえば、録画の [メイン] セクションでマウスホイールを使用する場合や、トラックパッドで 2 本の指でスワイプする場合、デフォルトの動作はズームインまたはズームアウトです。設定を [スクロール] に変更すると、このジェスチャーで上下にスクロールできるようになりました。

[Flamechart のマウスホイール操作] の設定

図 6. Flamechart のマウスホイール操作の設定

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

ES6 モジュールは Chrome 61 でネイティブに提供されています。DevTools に関しては、デバッグが想定どおりに機能する以外に、特に重要なことはありません。Paul Irish の ES6 モジュール実装の TodoMVC でいくつかのブレークポイントを設定してステップ実行し、実際に確認してみてください。

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

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

Chrome DevTools チームに問い合わせる

次のオプションを使用して、DevTools の新機能、アップデート、その他のトピックについて話し合います。

DevTools の新機能

DevTools の新機能シリーズで取り上げられたすべての内容のリスト。