非常に今更ながら

どうも、はむばねです。
タイトルの通り、非常に今更な話なのですが。
ブラウザ標準の開発ツールが、普通に便利であることに気付いた件について。
ブラウザでF12を押すと出てくるやつですね。

一応、今までも使ってたは使ってたんですけどね。
エラーの確認くらいにしか使ってなかったのですよ。
しかしあれ、それぞれの要素に何のスタイルが適用されてるかとか、その要素に対してどんだけマージンや余白が切られてるのかとかまで表示してくれる機能があるんですね。
しかも、こっちで指定した奴だけじゃなくてブラウザデフォルトで要素に適用されるやつまで。
更に、他部分で上書きされてるスタイルはそのことも示してくれる。
少なくともChromeの開発ツールでは、ですが。

いや正直、ブラウザ標準だからって舐めてましたわ。
ていうか以前、「どのスタイルが適用されてるのか適用されてないのか表示してくれたり、空白がどの要素に関連したものなのかをグラフィカルに表示してくれるようなツールないのかな」って思ってたんですが。
まさにドンピシャやないか。
私が望んだものは、既に私の手の中にあったんや……！
今までは、cssでborder入れて手動でデバッグしてましたからね。

しかし、これを知らなかったとか恥ずかしくて人には言えんな。
まぁ、他に書くことないからブログには書くわけですけれど。

強いて問題点を挙げるとすれば、今回開発ツールを使おうと思ったのはJavaScriptで出力しているhtmlを確認するためだったのですが。
普通に、その目的は達せなかったという点かな！
document.writeどかで出力した奴は表示できそうなのですが、innerHTMLでぶっ込んだコードは表示できない……の、かな……？
結局、ソースの方から頑張って追った模様。
まぁ今回は正直これ以上調べるより力技で追った方が早いと思われたためそうしたわけですが、もうちょっと規模が大きくなってくるとそうもいくまい……。
これはこれで、ちょっとやり方を考えないといけませんね。

あと、現時点ではツールの使い方に慣れてなくて、手動でborder入れてデバッグした方が早いという説もある。
逆に、border入れて確認する作業は手慣れすぎてて最早手癖でできるレベルですからね。
まぁ、これに関しては使っているうちに逆転していくでしょう。
C言語やってた時も、最初はgdb使うよりプログラム内に手動で出力入れた方が早いと思ったもんよ。