chrome開発ツールの特性

Chrome開発ツールはChromeブラウザに基づいて、開発者がコードをデバッグするのを助けるコントロールパネルです.その機能は豊富で、私たちがそろっているのは難しいです.ここには明らかではありませんが、実用的な機能がいくつかあります.DOM要素の状態を変更してDOM要素を右クリックすると、「Force Element State」という機能オプションがリストされます.サブメニューを展開すると、いくつかの一般的な偽類が表示されます.:active、:hover、:focus、and:visited.これらの擬似クラス効果をCSSまたはJSでデバッグしたい場合は、この機能を使用します.DOMブレークポイントJSのブレークポイントデバッグに詳しいですが、DOMもブレークポイントデバッグできることを知っている人は少ないです!依然としてDOM要素を右クリックすると、Break onという選択肢が表示され、展開はSubtree ModificationsAttributes Modifications・およびNode Removalの3つの選択肢があります.JSがDOM要素を変更しようとすると、要素に追加されたブレークポイントがトリガーされます.

Subtree Modifications、サブエレメントの追加、変更、削除時にトリガー

Attributes Modifications、エレメント属性が変更されるとトリガー

Node Removal、エレメントを除去するとトリガー

Console API私たちが最もよく知っているのはconsole.logに違いないが、consoleの方法はこれだけではなく、興味のある方は公式ドキュメントを見ることができる.ここではもう一つの実用的な方法について説明します.console.countコードブロックの実行回数を統計することができ、1つの関数が何度も実行されたのではないかと疑うと、簡単に統計することができます.

function login(user) {
    console.count("Login called");
    // login() code...
}

このように、呼び出すたびにloginとコンソールに印刷される回数Audits Auditsは、ページの性能に問題があることをチェックし、CSSやJSの導入位置、Gzip圧縮がオンになっているか、ブラウザキャッシュや適用されていないCSSルールがうまく利用されているかなど、最適化の意見を出すことができる.知能が強いのではないでしょうか.はい、この4つを見て、あなたは視野を広げるかもしれません.小児科を感じるかもしれませんが、chrome開発者ツールの強さは決してそれだけではありません.お勧めの実用的な機能があれば、コメントで共有してください.
原文