ブラウザで要素を右クリックして「要素の検査」or「検証」を選ぶと、デベロッパーツールが開いて要素のソースコードが直接読めるので便利だなーと思ってました。
……が、自分が思っていた挙動と違っていたのでご紹介。
勘違いしていた使い方
HTMLソースの要素をソースコード上でいちいち探さずに、マウスカーソルを当てた要素のソースを直接表示できる。すごく便利！
本来の挙動
マウスカーソルを当てた要素を「ブラウザがどう解釈しているか」を表示。
つまり
要素の検査や検証で表示されるソースコードは、ブラウザが解釈できなかったコードミスや、閉じタグ忘れなどはエラーとして表示されるのではなく「ないものとして」ソースが表示されます。
本来のソースコード ≠ 要素の検査で表示されるソースコード
両者は必ずしも一致しないので注意が必要です。
実際の例
●ソースコード
<td class=”company_name”>会社名</a></td>
●要素の検査での表示（</a>が消えます）
<td class=”company_name”>会社名</td>
コメントを残す