DOM パネルの新しいコンテキスト メニューを使用して、ノードを効率的に編集できます。[リソース] パネルからサービス ワーカーを直接デバッグします。カラー選択ツールで、すべてのマテリアル デザイン シェードから選択できます。ブラックボックス JS ライブラリをより簡単にテストできます。
DOM パネルの新しいコンテキスト メニュー
DOM パネルで最も使用頻度の高いアクションを分析した結果、右クリック コンテキスト メニューを整理し、再編成する必要があると判断しました。
要素のすばやい非表示化や削除、:active や :hover などの特定の状態のトリガー、HTML の編集が、より簡単に行えるようになりました。トラックパッドを使用している場合や、右クリックが面倒な場合は、選択した要素の横にあるその他アイコンをクリックします。
[リソース] パネルで Service Worker をデバッグする
サービス ワーカーは、一度設定すれば素晴らしい機能ですが、最初のうちは理解しづらいかもしれません。この問題は、デバッグの際に DevTools を離れて chrome://serviceworker-internals/ を新しいブラウザ ウィンドウで開く必要があるため、状況をさらに悪化させていました。
今はそうではありません！これで、[リソース] パネルから現在のドメインのサービス ワーカーを直接デバッグできるようになりました。まだ開発中ですが、以前の状況から大幅に改善されています。
すべての色: カラー選択ツールのマテリアル デザインの色合い
数週間前、カラー選択ツールにマテリアル デザイン パレットを追加し、すぐに使えるプライマリ カラーと太字の色を用意しました。実際にページ全体をデザインするには、マテリアル デザインのすべてのシェードに完全にアクセスする必要があります。そのため、それらを組み込んでいます。
シェードを表示するには、メインカラーのいずれかを長押しして、代わりにシェードをクリックします。
設定で JavaScript ライブラリのブラックボックス化を簡単に
JavaScript ブラックボックス化は以前から存在していますが、その発見はそれほど簡単ではありませんでした。これは、ページ上のスクリプトをブラックボックス化して、作成したコードのみに集中できるようにする（ラップコードをすべて非表示にする）機能です。
[設定] に移動しました。次のように入力します。
その他の主な新機能
- レンダリングの切り替えボタンにアクセスできない場合レンダリングの設定が DevTools のメインメニュー（[その他のツール] の下）に移動しました。通常の設定（FPS メーターなど）に加えて、[印刷メディアをエミュレート] も移動しました。
- アドレスバーに「chrome://inspect」と入力しなくても、新しいメインメニューの [その他のツール] に [デバイスを検査] も追加されました。
- レンダリングや検索など、閉じることができるドロワータブを誤って閉じてしまった場合は、左側の新しいメニューから、閉じたタブを再び開くことができます。
いつものように、Twitter または下記のコメント欄からご意見をお寄せください。バグは crbug.com/new に送信してください。
どうぞよろしくお願いいたします。
Paul Bakaus と DevTools チーム