chromeでページのソースを表示と検証の違い

Question

最近chromeでhtmlを見るために「ページのソースを表示」と「検証」を使っているのですが
たまに同一のページなのに表示されるソースが違う時があり困っています
（タグのclass名が違っていたりなど）

どのように使い分けるのでしょうか

Answer 1

「ページのソースを表示」は文字通り HTML ファイルの内容を表示します。
一方、「検証」のほうは実際のHTML要素のツリー構造（DOMツリー）の内容を表示します。
JavaScript等で動的に変更／追加された要素も含め、現時点での実態を見るには「検証」を選択します。

HTMLファイルの中で元から定義されていた要素に対し、JavaScriptでCSSクラス名を変更／追加／削除することは良く行われることですが、この場合も最終的にどんなクラス名が設定されているかを確認するには、「検証」を選択する必要があります。

ご参考になれば。

Answer 2

ソースは、そのURLにアクセスした際にダウンロードされてくるソースそのものです。
検証は、JavaScriptなどの動作の結果、現在の表示となっている状態のHTML（DOM構造）です。

Answer 3

jquery等で動的にhtmlを生成している場合はソース表示と検証では違うかもしれませんね。
よくあるバナー画像のスライドとか？