A Broken Image Finder átvizsgál minden <img> elemet és CSS background-image-et az oldalon, felismeri a törött betöltéseket (404-esek, CORS hibák, szennyezett vásznak), és áttekinthető listában jeleníti meg őket. Szűrjön törött/összes/CSS háttér szerint, ugorjon a képekhez és emelje ki azokat az oldalon, majd másolja ki a törött URL-ek listáját gyors hibajelentésekhez.
A törött képek az egyik legszembetűnőbb hiba egy weboldalon — mégis meglepően könnyű elnézni őket QA közben, mert csendben hiúsulnak meg. A Broken Image Finder az összeset elkapja. Aktiváláskor az eszköz végigmegy a DOM-on minden <img> elemért (a naturalWidth / naturalHeight ellenőrzésével, hogy felismerje a sikertelen betöltéseket), valamint minden CSS background-image URL-ért (mindegyiket egy friss Image() objektummal próbálva, hogy megerősítse a betöltést). Az eredmények OK / Broken / Loading kategóriákba kerülnek, és szűrhető listában jelennek meg statisztikai számlálókkal a tetején. Minden bejegyzés mutatja az URL-t, a típust (img vagy CSS bg), a méreteket, ha betöltődött, és az alt szöveget, ha van. A törött képek pirossal vannak kiemelve, és van egy „Locate” gombjuk, amely az elemet a látható területre görgeti és piros kerettel villogtatja körbe. A „Copy Broken URLs” gomb egyszerre gyűjti össze az összes hibás URL-t hibajelentésbe másoláshoz. Bármely oldalon működik backend naplókhoz való hozzáférés nélkül — gyors vizuális QA kapuként.
Ellenőriz minden <img> elemet és minden background-image URL-t a számított stílusokban. A data URI-k és blob URL-ek kihagyásra kerülnek (ezek mindig érvényesek).
Egy pillantással áttekinthető statisztikák mutatják az oldal képeinek állapotát. A számok élőben frissülnek, ahogy az aszinkron vizsgálatok lezárulnak.
Váltson a Broken, All és CSS Backgrounds fülek között. Koncentráljon arra, amit javítani kell.
Kattintson a Locate gombra bármelyik képnél, hogy az oldalon a látható területre görgesse az elemet, és piros kiemeléssel villogtassa körbe.
Egy kattintással kimásolja a törött képek URL-jeinek listáját — illessze be egy hibajelentésbe, vagy ossza meg a backend csapattal.
500 CSS-háttér vizsgálatra korlátozva, hogy a felület reszponzív maradjon tartalomdús oldalakon is.
Futtassa staging környezetben deploy előtt, hogy elkapja a refaktorálások, átnevezett assetek vagy CDN-migrációk okozta 404-eseket.
Rendszeresen vizsgálja át az élő oldalakat — a törött képek árt a SEO-nak és a felhasználói bizalomnak, és gyakran átcsúsznak az automatizált teszteken.
Amikor szerkesztők képeket töltenek fel, előfordulhat, hogy némelyik sosem jut el a végleges URL-ig. Vizsgáljon át, hogy elkapja a halott hivatkozásokat.
Ha külső képszolgáltatásokra támaszkodik (avatarok, hotlinkelt termékfotók), vizsgáljon rendszeresen, hogy elkapja a kimaradásokat.
Miután az assetek egy új CDN-re vagy tárolóba kerültek, vizsgáljon át minden kulcsfontosságú oldalt, hogy megerősítse: a migráció nem tört el semmit.
Kattintson a Broken Images ikonra a DevSuite Pro dokkban. Megnyílik egy panel, és automatikusan átvizsgálja az oldalt.
A panel tetején lévő statisztikák mutatják a Total / OK / Broken / Loading értékeket. Ha a Broken > 0, váltson a Broken fülre a megtekintéshez.
Kattintson a Locate gombra bármelyik sornál, hogy az elemet a látható területre görgesse az oldalon — 2 másodpercig piros kerettel villog körülötte.
Kattintson a Copy Broken URLs gombra a teljes lista kigyűjtéséhez — illessze be egy ticketbe, chatbe vagy backend vizsgálatba.
A backend javítások után kattintson a Re-scan Page gombra, hogy megerősítse: minden kép most már megfelelően töltődik be.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 64+ fejlesztői eszközt böngészőjéhez.
