DOM パネルの新しいコンテキスト メニューを使用すると、ノードを効率的に編集できます。[リソース] パネルで Service Worker を直接デバッグできます。カラー選択ツールで、すべてのマテリアル デザイン シェードから選択できます。JavaScript ライブラリのブラックボックス化がより簡単に。
DOM パネルの新しい改善されたコンテキスト メニュー
DOM パネルで最もよく使用するアクションを分析した結果、右クリックのコンテキスト メニューを整理し、整理し直すべきであるという結論に至りました。
要素の非表示や削除、特定の状態(:active や :hover など)のトリガー、HTML の編集がはるかに簡単になりました。トラックパッドを使用しているときに右クリックが不要な場合は、選択した要素の横にある小さな 3 つの点をクリックします。
[リソース] パネルで Service Worker をデバッグする
Service Worker は、いったん設定すれば便利ですが、早い段階から管理するのは難しいことがあります。デバッグを行うには、DevTools を終了して新しいブラウザ ウィンドウで chrome://serviceworker-internals/ を開く必要がありました。そのため、状況がさらに悪化しました。
もうだいじょうぶ![リソース] パネルから直接、現在のドメインの Service Worker をデバッグできるようになりました。まだ開発途中ですが、以前の現状からすでに大きな改善を遂げています。
すべての色: カラー選択ツールのマテリアル デザイン シェード
数週間前に、カラー選択ツールにマテリアル デザイン パレットが追加され、大胆なメインの色をすぐに使えるようになりました。実際にページ全体をデザインするには、必然的にすべてのマテリアル デザイン シェードへの完全アクセス権が必要になるため、それらを組み込みました。
シェードを表示するには、プライマリ カラーの 1 つを長押しし、代わりにシェードをクリックします。
設定で JavaScript ライブラリのブラックボックス化が簡単に
JavaScript Blackboxing は、かなり前から存在するものですが、なかなか見つけにくいものでした。これは、ページ上のスクリプトをブラックボックス化して、作成したコードだけに焦点を当てる(ラップするコードはすべて非表示にする)ことができる機能です。
[設定] に移動しました。次のように入力します。
その他の主なメリット
- レンダリングの切り替えにアクセスできない場合は、[レンダリング設定] を DevTools のメインメニュー([その他のツール] の下)に移動しました。よく見られる問題(FPS メーター)に加えて、[印刷メディアのエミュレート] も移動しました。
- アドレスバーに chrome://inspect を入力するのが面倒な場合は、[デバイスの検査] は、新しいメインメニューの [その他のツール] にも表示されます。
- [レンダリング] や [検索] などの閉じ可能なドロワータブを誤って閉じてしまった場合は、左側のメニューで新しいメニューを開き、再開できるようになりました。
いつものように、Twitter または以下のコメントでご意見をお寄せください。また、バグについては crbug.com/new までお送りください。
来月まで!
Paul Bakaus、DevTools チーム