WebブラウザのDevToolsで確認できるかと思います。(以下Google Chromeの場合)
Elements タブで画像が表示されている要素を確認すると次のようになっているのが確認できると思います。
<img
alt="Image"
draggable="true"
src="https://pbs.twimg.com/media/Fy9bAcwaIAAw6P_?format=jpg&name=900x900"
class="css-9pa8cd"
/>
(実際には改行はなく1行)
"読込指定" というのが何を指すのかにもよりますが、 img
要素の src
属性で読み込み指定されている、というのも1つの回答になるかと思います。
Network タブで上記 src
に指定されているURLに含まれる文字列 Fy9bAcwaIAAw6P_
を全文検索してみると
https://syndication.twitter.com/srv/timeline-profile/screen-name/[twitterアカウント]?[クエリパラメータ]
というリクエストのレスポンスHTMLに含まれる <script id="__NEXT_DATA__" type="application/json"></script>
タグに囲まれたJSONの media_url_https
プロパティの値として取得しているのが分かります。
ので、このJSONが読み込み指定しているデータだということもできそうです。
同じように Network タブで media_url_https
を全文検索すると、
で参照している可能性がありそうなことが分かります。
あとは Sources タブで上記のファイル中に含まれる media_url_https
を参照していそうな箇所に breakpoint を張ってステップ実行していけば冒頭の img
要素を生成している処理にたどり着けそうです。
これも読み込み指定している処理と呼べそうです。
(JSについてあまり詳しくないですが、minifyされたフレームワークコードのように見えるので、この手段で実際に見つけるのは困難ではないかと思われます)
いずれにせよ、
この時、画像は上記コード内のどこで読込指定していますか?
に対しては、上記コード内のどこでもないが、 iframe をロードしている処理が間接的にかかわっている、という回答になるかと考えます。
aは、下記オブジェクトのことですか?
testメソッドはどこに書いてありますか?
これらも Sources タブでステップ実行していくとわかるかと思いますが、前者はその通りで、後者はこちらです。