Chrome開発者ツールで画像URLを一括取得する方法

2026.01.21 ｜

制作Note

コメントはまだありません

今回は、Webページ上の画像URLをサクッと取得する方法をご紹介します。

「このページの画像URL、全部知りたいな…」って思ったこと、ありませんか？

そんなとき、Chrome開発者ツールのConsole機能を使えば、たった1行のコードで一括取得できちゃいます！

📌 今回やること

特定のWebページにあるすべての画像URLを一覧表示します。

🛠️ 手順解説

1対象ページを開く

まずはChromeで対象のページにアクセスします。

2開発者ツールを開く

以下のいずれかの方法で開発者ツールを起動しましょう。

方法	Windows	Mac
キーボード①	`F12`	`F12`
キーボード②	`Ctrl + Shift + I`	`Cmd + Option + I`
マウス操作	右クリック →「検証」	右クリック →「検証」

💡

個人的には F12 キーが一番ラクでおすすめです 👍

3Consoleタブを選択

開発者ツールが開いたら、上部のタブから 「Console」 をクリックします。

^^^^^^^^

ここをクリック！

4コードを貼り付ける

Console欄（ > マークの横の入力エリア）に、以下のコードをコピペしてください。

JavaScript

...document.querySelectorAll('img')].forEach(img => console.log(img.src));

// もしくは、

Array.prototype.slice.call(document.querySelectorAll('img')).forEach(function(img) { console.log(img.src); });

5Enterキーで実行！

Enter を押すと…

🎉

画像URLがズラッと一覧表示されます！

🎁 【おまけ】結果をクリップボードにコピーしたい場合

「表示されたURLをまとめてコピーしたい！」という方は、こちらのコードを使ってみてください。

JavaScript

copy([...document.querySelectorAll('img')].map(img => img.src).join('\n'));

実行すると、URLリストがクリップボードに自動コピーされます。

あとはメモ帳やスプレッドシートに Ctrl + V（Macは Cmd + V）で貼り付けるだけ！

🔍 コードの解説（気になる方向け）

[...document.querySelectorAll('img')]

→
ページ内のすべての <img> 要素を配列として取得

.forEach(img => console.log(img.src))

→
各画像の src 属性（URL）をConsoleに出力

📝 まとめ

Chrome開発者ツールのConsole機能を使えば、ちょっとしたDOM操作が簡単にできます。

今回のテクニックは、以下のような場面で役立ちますよ：

✓
画像素材の収集
✓
サイトの画像パス確認
✓
画像のリネーム作業の下準備

ぜひ活用してみてください！

最後まで読んでいただき、ありがとうございました 🙏

制作Note