ブラウザの「要素の検査」について

ブラウザで要素を右クリックして「要素の検査」or「検証」を選ぶと、デベロッパーツールが開いて要素のソースコードが直接読めるので便利だなーと思ってました。

……が、自分が思っていた挙動と違っていたのでご紹介。

勘違いしていた使い方

HTMLソースの要素をソースコード上でいちいち探さずに、マウスカーソルを当てた要素のソースを直接表示できる。すごく便利!

本来の挙動

マウスカーソルを当てた要素を「ブラウザがどう解釈しているか」を表示。

つまり

要素の検査や検証で表示されるソースコードは、ブラウザが解釈できなかったコードミスや、閉じタグ忘れなどはエラーとして表示されるのではなく「ないものとして」ソースが表示されます。

本来のソースコード ≠ 要素の検査で表示されるソースコード

両者は必ずしも一致しないので注意が必要です。

実際の例

●ソースコード
<td class=”company_name”>会社名</a></td>

●要素の検査での表示(</a>が消えます)
<td class=”company_name”>会社名</td>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

one × 5 =