Chrome 開発者ツール Tips_html/css_WEB-ITnose

Chrome Developer Tools は、Web 開発者に認められた優れたフロントエンド デバッグ ツールです。このツールを使用すると、多くの興味深いことができます。

HTML 要素をすばやく編集する

[要素] パネルで、編集するために開く必要がある DOM 要素タグをダブルクリックします。完了すると、ページが自動的に更新され、タグが閉じられます。

[要素] パネルで Ctrl + F または F3 を押し、検索バーに検索したいコンテンツを入力します。存在する場合は、DOM 内で異なる色でマークされます。

行と列をすばやく見つけます

ソースパネルで、対応する js または css ファイルを選択し、Ctrl + O を押し、選択したファイルで「: 行番号: 列番号」を使用すると、対応する行と列をすばやく見つけます。

すべての子ノードを展開します

[要素] パネルを選択し、DOM 要素を選択し、Alt キーを押しながら、切り取られた頭のある位置でマウスの左ボタンをクリックして、すべての子ノードを展開します。

複数カーソル編集

画像のように、jsファイル内の複数の場所を同時に編集する場合、追加を間違えた場合は、Ctrlを押しながらマウスの左ボタンをクリックしてカーソルを追加できます。 Ctrl + U を使用すると、最後のカーソルを元に戻すことができます。

疑似クラスのトリガー

ページ内のホバークラスはマウスを置くとトリガーされます。CSS はスタイルを変更しますが、マウスを離すと元のスタイルに戻ります。デバッグ。 DOM 要素上でマウスを右クリックして右クリック メニューを開き、[要素の状態を強制する] を選択して、対応する疑似クラスを選択します。

$0 を使用して現在の要素を取得します

[要素] パネルで DOM 要素を選択し、コンソールに $0 を入力して現在の要素を取得します

定義済みのコード スニペットを実行します

左側のサイドバーで選択します: ソース> スニペット を右クリックして [新規] を選択し、新しいファイルを作成します。名前を付けた後、ファイル名を右クリックして、ポップアップ メニューで [実行] を選択すると、実行できます。それ。