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 ページの要素を確認したり、リクエストを表示したりするだけではありません。興味のある学生は、詳細は公式ウェブサイトへ。