DevTools ダイジェスト - 効率的な要素編集、Service Worker のデバッグ、マテリアル デザイン シェード

DOM パネルの新しいコンテキスト メニューを使用すると、ノードを効率的に編集できます。[リソース] パネルで Service Worker を直接デバッグできます。カラー選択ツールで、すべてのマテリアル デザイン シェードから選択できます。JavaScript ライブラリのブラックボックス化がより簡単に。

DOM パネルの新しい改善されたコンテキスト メニュー

新しい DOM コンテキスト メニューが表示されます。

DOM パネルで最もよく使用するアクションを分析した結果、右クリックのコンテキスト メニューを整理し、整理し直すべきであるという結論に至りました。

要素の非表示や削除、特定の状態(:active や :hover など)のトリガー、HTML の編集がはるかに簡単になりました。トラックパッドを使用しているときに右クリックが不要な場合は、選択した要素の横にある小さな 3 つの点をクリックします。

[リソース] パネルで Service Worker をデバッグする

Service Worker は、いったん設定すれば便利ですが、早い段階から管理するのは難しいことがあります。デバッグを行うには、DevTools を終了して新しいブラウザ ウィンドウで chrome://serviceworker-internals/ を開く必要がありました。そのため、状況がさらに悪化しました。

リソース内の Service Worker

もうだいじょうぶ![リソース] パネルから直接、現在のドメインの Service Worker をデバッグできるようになりました。まだ開発途中ですが、以前の現状からすでに大きな改善を遂げています。

すべての色: カラー選択ツールのマテリアル デザイン シェード

数週間前に、カラー選択ツールにマテリアル デザイン パレットが追加され、大胆なメインの色をすぐに使えるようになりました。実際にページ全体をデザインするには、必然的にすべてのマテリアル デザイン シェードへの完全アクセス権が必要になるため、それらを組み込みました。

シェードを表示するには、プライマリ カラーの 1 つを長押しし、代わりにシェードをクリックします。

設定で JavaScript ライブラリのブラックボックス化が簡単に

JavaScript Blackboxing は、かなり前から存在するものですが、なかなか見つけにくいものでした。これは、ページ上のスクリプトをブラックボックス化して、作成したコードだけに焦点を当てる(ラップするコードはすべて非表示にする)ことができる機能です。

[設定] に移動しました。次のように入力します。

ブラックボックス化

その他の主なメリット

  • レンダリングの切り替えにアクセスできない場合は、[レンダリング設定] を DevTools のメインメニュー([その他のツール] の下)に移動しました。よく見られる問題(FPS メーター)に加えて、[印刷メディアのエミュレート] も移動しました。
  • アドレスバーに chrome://inspect を入力するのが面倒な場合は、[デバイスの検査] は、新しいメインメニューの [その他のツール] にも表示されます。
  • [レンダリング] や [検索] などの閉じ可能なドロワータブを誤って閉じてしまった場合は、左側のメニューで新しいメニューを開き、再開できるようになりました。

いつものように、Twitter または以下のコメントでご意見をお寄せください。また、バグについては crbug.com/new までお送りください。

来月まで!
Paul Bakaus、DevTools チーム