DevTools の新機能（Chrome 61）

Kayce Basques
Kayce Basques
X GitHub

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

以下の動画でリリースノートの概要をご覧になるか、このまま読み進めて詳細をご確認ください。

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

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

スロットル メニュー

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

絞り込みメニューの定義

図 2. [スロットリング] メニューにカーソルを合わせるか、[キャプチャ設定] メニューを開くと、[中価格帯のモバイル] と [低価格帯のモバイル] の定義が表示されます。

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

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

[使用状況] セクション

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

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

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

Time Cached 列

図 4. [Time Cached] 列

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

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

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

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

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

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

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

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

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

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

ES6 モジュールが Chrome 61 でネイティブに提供されます。デバッグが想定どおりに機能する以外に、DevTools に関してここで説明することはあまりありません。TodoMVC の Paul Irish 氏の ES6 モジュール実装にブレークポイントを設定してステップ実行してみると、その様子を自分で確認できます。

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

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

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

DevTools の新機能、更新、その他の関連事項について話し合うには、次のオプションを使用します。

DevTools の新機能

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