リンク切れ画像ファインダーは、ページ上のすべての `<img>` と CSS の `background-image` をスキャンし、読み込みエラー（404、CORS 失敗、キャンバスの汚染など）を検出してクリーンなリストに表示します。リンク切れのみ／すべて／CSS 背景などのフィルタリング、ページ上の各画像へのジャンプとハイライト表示、バグレポート用のリンク切れ URL リストのコピーが可能です。
リンク切れ画像は、ウェブページ上で最も目立つバグの一つですが、QA（品質保証）中には静かに失敗するため意外と見落としがちです。リンク切れ画像ファインダーは、それらをすべてキャッチします。有効にすると、ツールはすべての `<img>` 要素を走査して（`naturalWidth` / `naturalHeight` をチェックして読み込み失敗を検出）、すべての CSS `background-image` URL を調査（新しい `Image()` で読み込みを検証）します。結果は OK ／ リンク切れ ／ 読み込み中 に分類され、上部には統計カウントが表示されます。各エントリには、URL、タイプ（img または CSS bg）、読み込まれた場合の寸法、および代替テキスト（alt）が表示されます。リンク切れ画像は赤色で強調表示され、「場所を特定」ボタンをクリックするとその要素がビューにスクロールされ、周囲が赤色の枠線で点滅します。「リンク切れ URL をコピー」ボタンを使うと、バグレポートに貼り付けるためにすべての失敗 URL を一度に取得できます。バックエンドのログにアクセスすることなく、あらゆるページで動作する、迅速なビジュアル QA ゲートとして機能します。
すべての `<img>` 要素に加えて、計算済みスタイル内のすべての `background-image` URL をチェックします。データ URI や blob URL は常に有効であるためスキップされます。
ページ内の画像の健全性を一目で把握できます。非同期のプローブが解決されるたびに数値がリアルタイムで更新されます。
「リンク切れ」「すべて」「CSS 背景」のタブを切り替えられます。修正が必要な対象に集中できます。
任意の画像の「場所を特定」をクリックすると、ページ上のその要素までスクロールし、周囲を赤色で点滅させて強調表示します。
ワンクリックでリンク切れ画像の URL リストをコピーできます。バグレポートへの貼り付けや、バックエンドチームとの共有に便利です。
コンテンツの多いページでも UI の応答性を維持するため、CSS 背景のスキャンは最大500件に制限されています。
デプロイ前にステージング環境で実行し、リファクタリングやアセット名の変更、CDN 移行などによって発生した 404 エラーをキャッチします。
公開中のページを定期的にスキャンしてください。リンク切れ画像は SEO やユーザーの信頼を損なうものであり、自動テストをすり抜けることがよくあります。
編集者が画像をアップロードしても、最終的な URL に反映されない場合があります。デッドリファレンクをキャッチするためにスキャンします。
外部の画像サービス（アバターや直リンクの商品写真など）に依存している場合、定期的にスキャンしてサービスの停止をキャッチします。
アセットを新しい CDN やバケットに移動した後、主要なすべてのページをスキャンして、移行によって何も壊れていないことを検証します。
DevSuite Pro のドックにある「リンク切れ画像」アイコンをクリックします。パネルが開き、自動的にページのスキャンが開始されます。
パネル上部の統計（合計／OK／リンク切れ／読込中）を確認します。リンク切れが 0 より大きい場合は、「リンク切れ」タブに切り替えて確認してください。
任意の行の「場所を特定」をクリックすると、その要素がページ上のビューにスクロールされ、2秒間赤色の枠線が点滅します。
「リンク切れ URL をコピー」をクリックしてフルリストを取得し、チケットやチャット、あるいはバックエンドの調査用に貼り付けます。
バックエンドでの修正後、「ページを再スキャン」をクリックして、すべての画像が正しく読み込まれるようになったことを確認します。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
