Javascriptで描画されたHTML要素を検出する方法

Question

###背景
こちらのteratail質問に、「tBodyがjavascriptで描画されている」という回答があります。おそらくGoogle Chromeデベロッパーツールのようなもので検証し、Javascriptを検出されたのだと想像しますが、手順がわかりませんでした。（私はChromeで静的なHTMLとCSSは一定検証できるのですが、Javascriptは経験が浅いので。）

###質問
**実際の手順としてどのように「Javascriptで描画されたHTML要素」を絞り込んでいくものなのでしょうか。**上記のteratail質問でも例示されているソニー銀行のサイトで調べ方をお教えいただけると大変ありがたいです。

例: Chrome dev tools -> Sources -> jsフォルダで云々などの詳細手順

Answer 1

「ソースを表示」の内容が元のHTMLで、それにJavaScriptでの操作を加えた物が、「開発者ツールで見られる物」なので、その差を見ます。

Comments

[fukazume]

ありがとうございます！

Answer 2

ソースで表示するのが妥当ですが、普通にjsを実行しない設定で表示すればわかると思います

Answer 3

次の差異を確認することで、Javascriptで追加された要素かそうでないかある程度絞り込めます。ある程度というのは、なにかのイベントをきっかけに描画される場合は差異として現れないかもしれないからです。

• javascriptを無効にした場合のhtml
• javascriptを有効にした場合のhtml

とはいえあまり、**「Javascriptで描画されたHTML要素を絞り込む」ということはほとんどしない気がします。「Javascriptで描画されたHTML要素を描画するコード探し出す」**ことはあります。が、これもあまりありません。後者についてもしやる場合は、id名やクラス名やタグなどでjsコードを検索します。

**本題に戻ります。おそらく、「Javascriptを手で動かして、HTML要素を得られるようにしたい」**というのがご質問の背景ですよね？であれば、スクレイピングのライブラリを使って、ブラウザでページを開いたのと同じHTMLを得ることを考えられたほうがよいです。

Comments

[fukazume]

実践的な観点から意図を汲んでいただき、ありがとうございます！