Chrome92 の非常に便利な新しい devtools 機能!

Chrome 92—devtools の新機能

Chrome は 6 週間ごとに新しいバージョンをリリースします。バージョン 92 は数日前にリリースされました。新機能のいくつかを見てみましょう！

CSS グリッド エディタ

グリッド レイアウトの要素は、スタイル内の属性を手動で変更できます。

css グリッド エディタ

display:grid の後ろのアイコンをクリックすると、グリッドのレイアウト属性の一部が表示されます。切り替え属性は要素に直接適用できます。

コンソールでのconstの2次宣言

コンソールでスクリプトを書いてconst変数を定義していたのですが、実行後に再度スクリプトを実行すると、 :

識別子はすでに宣言されています

デバッグ中にこれによって中断されることがよくあるため、実行する前にページを更新する必要があります。スクリプトを再度実行できます。これで、エラーなしで直接実行できるようになり、スニペットで実行する場合も同様に機能します。

#const の再宣言

要素の元の順序を表示

#要素が書き込まれる順序HTML で表示される場合があります 順序が一貫していません。Chrome では、表示と要素の順序の間にリンクが追加されました。アクセシビリティでソースの順序を表示にチェックを入れると、要素の元の順序が表示されます。

ソースの順序を表示

親要素をクリックすると、子要素にシリアル番号が表示されることがわかります。

シミュレーションの焦点

以前に同様の検索ボックスをデバッグしたとき、テキストを入力し、表示されたオプションから要素を検査するために検査を選択し、ドロップ一部の Web サイトのドロップダウン ボックスが消えると、要素も消えるため、あいまい一致によって生成されたドロップダウン ボックスをデバッグできなくなります。例:

入力キーワードWeb サイトの検索ボックスに一致する検索結果が表示され、右クリックしてそのいずれかを選択し、DOM 内のこの要素を表示します。

キーワードを入力してください

あいまい一致結果が消えます

こちらで確認できます時刻 、あいまい一致検索結果が消え、DOM 要素も消えました。

Chrome 92 では、デフォルトで「シミュレートされたフォーカス」機能がサポートされるようになりました。要素がチェックされていても、要素が消えることはありません:

シミュレートされたフォーカス

フロントエンドのデバッグにとって、これはまた良いニュースです。 ！ ！

実際、この設定はオンまたはオフにできます。devtools で [コマンドの実行] パネルを開き ([設定詳細] で開くことも、ショートカット Command Shift P を使用して開くこともできます)、「」と入力します。フォーカス」を選択し、「フォーカスされたページをエミュレートする」を選択します。

フォーカスされたページをエミュレートするを有効にすると、通常どおり使用できます。

Chrome Devtools は非常に強力なフロントエンド デバッグ ツールです。個人的には現時点で最高だと思います。多くの機能があります。Web ページの要素を確認したり、リクエストを表示したりするだけではありません。興味のある学生は、詳細は公式ウェブサイトへ。