1行のコードで開発者があなたのページのDOM要素をデバッグする

何回苦しんだことがありますか 特定の問題を1つ見つける あなたのCSSレイアウトをめちゃくちゃにしますか？終了タグの欠落か​​ら不適切にネストされた兄弟姉妹まで、CSSの問題は一ダースです。そしてと このCSSレイアウトデバッガ, プロセスだけ ずっと楽になりました.

この1行のコードは DOMをトラバースする そして 各要素の概要 別の色で。このようにすることができます 見やすくする CSSがどのように機能しているか（または機能していないか） すぐに問題のある箇所を見つける.

GitHubは開発者を可能にします コードを少し節約する 要旨と呼ばれます。これらはすべてオープンソースで無料です。 あなた自身の使用のために保存する. それがこのCSSデバッガがとても便利な理由です。それは結合します Chrome DevToolsの最新の才能 とともに ブラウザのブックマークレットのシンプルさ.

このコードを使用するには、まず最初に 好きなバージョンをコピーしてください 要旨ページから。次にあなた そのコードを貼り付ける ターミナルウィンドウに それを実行します. あなたはに終わるはずです このような結果：

今、それは可能です このコードをブックマークレットとして保存します ブラウザのツールバーでChromeユーザーの方なら、 このJSコードをコードスニペットとして保存する 実行がはるかに簡単です.

このコードスニペットは 何度も思い出した ボタンをクリックするだけで。あなたはできる すべてのページを解析する, 親と子のDOM要素を問わず、これらのカラフルなCSSの概要がいっぱい.

ただし、Chromeだけに限定してはいけません。このスニペット すべての主要ブラウザに対応, Firefox、Safari、Opera、およびInternet Explorerを含む.

そして、これがどのように機能するのかを知りたいという人には、 注釈付きバージョン 各行のコメント付き.

この要旨はに満ちています 関連するユーザーのコメント そして 他の開発者からの更新 それをより小さくそしてより効率的にするのを助けます。しかし現状では、これは最も簡単な方法の1つです。 1行のコードで任意のDOMをデバッグする.