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 チーム