Ang Broken Image Finder ay nag-i-iscan ng bawat <img> at CSS background-image sa pahina, nade-detect ang mga sirang load (404s, CORS failures, tainted canvases), at ipinapakita ang mga ito sa isang malinis na listahan. Mag-filter sa broken/all/CSS backgrounds, pumunta at i-highlight ang bawat imahe sa pahina, at i-copy ang listahan ng mga sirang URL para sa mabilis na bug report.
Ang mga sirang imahe ay isa sa mga pinaka-halatang bug sa isang webpage — ngunit nakakagulat na madali itong makaligtaan habang nag-QA dahil tahimik silang nabibigo. Nakukuha silang lahat ng Broken Image Finder. Kapag na-activate na, ang tool ay dumadaan sa DOM para sa bawat <img> element (tinitingnan ang naturalWidth / naturalHeight para ma-detect ang mga nabigong load) at bawat CSS background-image URL (sinusubukan ang bawat isa gamit ang isang bagong Image() para i-verify na naglo-load ito). Ang mga resulta ay kinakategorya bilang OK / Broken / Loading at ipinapakita sa isang filterable na listahan na may mga stat count sa itaas. Ang bawat entry ay nagpapakita ng URL, uri (img o CSS bg), dimensyon kung naka-load, at alt text kung mayroon. Ang mga sirang imahe ay naka-highlight ng pula at may "Locate" button na nag-i-iscroll sa element para makita at nagpapakinang ng pulang outline sa paligid nito. Ang isang "Copy Broken URLs" na button ay kumukuha ng lahat ng mga nabigong URL nang sabay-sabay para sa bug-report. Gumagana sa anumang pahina nang hindi kailangan ng access sa mga backend log — isang mabilis na visual QA gate.
Sinusuri ang bawat <img> element kasama ang bawat background-image URL sa mga computed style. Ang mga Data URI at blob URL ay nilalaktawan (laging valid ang mga ito).
Ang mga stat sa isang sulyap ay nagpapakita ng kalusugan ng mga imahe sa pahina. Ang mga numero ay nag-a-update nang live habang ang mga async probe ay natatapos.
Magpalit sa pagitan ng mga tab na Broken, All, at CSS Backgrounds. Manatiling nakapokus sa kung ano ang dapat ayusin.
I-click ang Locate sa anumang imahe para mag-scroll sa element nito sa pahina at magpakitang-kilap ng pulang highlight sa paligid nito.
Sa isang click ay makokopya ang listahan ng mga sirang image URL — i-paste sa isang bug report o ibahagi sa backend team.
Limitado sa 500 CSS-background scan para manatiling responsive ang UI sa mga pahinang maraming content.
Patakbuhin sa staging bago mag-deploy para mahuli ang mga 404 na dulot ng mga refactor, pinalitang pangalan ng asset, o CDN migration.
Regular na i-iscan ang mga live na pahina — ang mga sirang imahe ay nakakasama sa SEO at sa tiwala ng user, at madalas silang nakakalusot sa mga automated test.
Kapag ang mga editor ay nag-u-upload ng mga imahe, ang ilan ay maaaring hindi makarating sa final URL. I-scan para mahuli ang mga patay na reference.
Kung umaasa ka sa mga external image service (avatar, hot-linked product photos), i-iscan nang regular para mahuli ang mga outage.
Pagkatapos ilipat ang mga asset sa isang bagong CDN o bucket, i-iscan ang bawat mahalagang pahina para i-verify na ang migration ay hindi nakasira ng anuman.
I-click ang icon ng Broken Images sa DevSuite Pro dock. Magbubukas ang isang panel at awtomatikong mag-i-iscan sa pahina.
Ang mga stat sa itaas ng panel ay nagpapakita ng Total / OK / Broken / Loading. Kung ang Broken > 0, lumipat sa Broken tab para makita sila.
I-click ang Locate sa anumang row para i-scroll ang element nito sa view sa pahina — isang pulang outline ang magpapakinang sa paligid nito sa loob ng 2 segundo.
I-click ang Copy Broken URLs para makuha ang buong listahan — i-paste sa isang ticket, chat, o backend investigation.
Pagkatapos ng mga backend fix, i-click ang Re-scan Page para i-verify na lahat ng imahe ay naglo-load na nang tama.
I-install ang DevSuite Pro nang libre at i-unlock ang 64+ developer tools para sa iyong browser.
