Web制作を始めたばかりのころ、私はデバッグが苦手でした。。でもやはり慣れていくうちに要領がつかめてきますし、これが原因だったかー！と気づけたときは嬉しいですよね。 今回はデバッグの手順についてまとめてみましたので、ご参考にどうぞ。

目視で記述の確認

目視でコードの記述を確認して、間違った記述がないかを探します。

ブラウザのデバッガ―を起動して、該当の要素に指定したStyleが効いているかを確認

Chromeのデバッガー（開発ツール）が使いやすいです。F12キーで起動します。デバッガーで要素にカーソルを当ててみて、高さはあるか、色は付くか、本当に押せているか（上に要素がかぶっていないか）などの確認をします。

その指定値を変更、削除してみて、変化が無いかを確認

怪しいの要素が見つかったら、その指定値を変更、削除してみて、変化が無いかを確認します。また、変化がない場合はその親要素、祖先要素を辿っていきます。

デバッガー上でDOM要素を順番に削除

どうしても原因の要素が見つからなかった場合、デバッガー上でDOM要素を順番に削除していきます。変化があったところで、原因となる要素を特定していくことができます。