Még a legkiválóbb webfejlesztési szakemberek is időről időre elkövethetnek hibákat. Tudod, a kódolás bonyolult dolog. Mindig van esély arra, hogy valami elromlik, miután úgy gondoljuk, a projekt befejeződött.
Tehát egy olyan webhely tesztelése, amely már kódolt és böngészőben fut, aligha nevezhető biztonságos játéknak. Szánj rá időt és ellenőrizd a HTML, a CSS vagy a JavaScript használatát, hogy biztosítsd a teljes böngészővel való kompatibilitást és a népszerű képernyőméretek megfelelő megjelenítését.
Valójában a webes technológia folyamatos fejlesztési folyamatban van, így sokkal egyszerűbb a webhely hibakeresése és az elrendezés tesztelése, mint egy évvel korábban volt. Egyre több új, fejlett eszköz és erőforrás jelenik meg minden nap erre a célra.
És ez a blogbejegyzés hasznos lehet, ha hibátlanítani szeretnéd a webhelyedet. Több mint 20 jelenlegi webes hibakeresési eszközt és erőforrást tartalmaz. Segítségükkel láthatod, hogyan néz ki webhelyed a különböző böngészőkben és különböző méretű képernyőkön.
Az alábbiakban felsorolt eszközök is megmutatják a kód hibáit, azonosítva azokat a potenciális problémákat, amelyek a jövőben károsak lehetnek.
Szóval készen állsz arra, hogy ellenőrizd az elrendezésedet, és felfedezz néhány hibát a kódodban? Ezután nézd át az alábbi listát, és válaszd ki azt a szerszámot, amelyik a legjobban illik céljaidhoz.
A bejegyzés angol verziója itt olvasható: Do You Make Mistakes in Your Code? Use Web Debugging Tools and Resources for Testing Layouts
***
Eszközök a kódok érvényesítéséhez
A Debug eszköz ablak megjeleníti az alkalmazáshoz tartozó hibakeresési munkamenet által generált kimenetet. Ha több alkalmazást hibaelhárít, mindegyik megjeleníti a kimenetét a megfelelő futtatási / hibakeresési konfiguráció után elnevezett tabon.
Ez a bővítés a fejlesztők és a webes rajongók számára készült. Lehetővé teszi a felhasználók számára, hogy könnyen ellenőrizzék az oldalakat a W3C HTML Validatorával. Nagyon egyszerű használni. Csak kattints a gombra és az oldal vizsgálásra kerül.
***
Szeretnéd ellenőrizni webes dokumentumaid jelölőnyelvét? Használd ezt az érvényesítési eszközt. Megvizsgálja a HTML, XHTML, SMIL, MathML és másban írt dokumentumok jelölési érvényességét.
***
Az eszköz Cascading Style Sheets (CSS) és (X) HTML-dokumentumok stíluslapok ellenőrzésére szolgál. Most kipróbálhatod a W3C Validator Suite ™ prémium szolgáltatást. Megvizsgálja az egész webhelyet és értékeli a W3C nyílt szabványoknak való megfelelőségét, hogy azonosítsa a webhely gyenge pontjait.
***
Ez az eszköz a HTML-dokumentumok érvényesítésére szolgál a címsávból. Minden egyszerű. Csak kattints az ikonra a címsávban, hogy érvényesítsd az aktuális dokumentumot anélkül, hogy elhagynád az oldalt. A hitelesítési hibák száma megjelenik a szerszámcsúcsban, és részletei a Chrome fejlesztői eszközei konzol lapján látható.
***
Teszteljük a dizájn reszponzivitását
Add meg az oldal URL-ját az oldal bal felső sarkában lévő mezőben, és nézd meg, hogyan jelenik meg a különböző eszközök képernyőin.
***
Itt láthatod, hogyan fog megjelenni a webhely a legnépszerűbb eszközök képernyőjén.
***
Böngésző támogatás ellenőrzése
A Ghostlab segítségével győződj meg róla, hogy minden felhasználó ugyanolyan élményben részesül függetlenül attól, milyen operációs rendszert, böngészőt vagy okostelefont használsz. A Ghostlab szinkronizálja a tekercseket, kattintásokat, újratöltéseket és beviteli alakzatokat. Vagyis nem az egyszerű oldal betöltését teszteli, hanem a teljes felhasználói élményt. A kiváló beépített felügyelő gyorsan bármilyen problémát feltérképez. Sőt, minden JavaScript-engedélyezett ügyfél azonnal csatlakozhat a Ghostlabhoz, így nincs szükség telepítésre. A Ghostlab kapcsolatba fog lépni velük, hogy tudassa velük a releváns változtatásokat.
***
Sok fejlesztő ezt a szolgáltatást a legjobbnak tartja, és nagymértékben támaszkodik rá. Ez valóban egy elengedhetetlen eszköz. Gyorsan megnézheted a legfontosabb IE-hibákat különböző verziókban, ami életmentő lehet.
***
Az IE Tab for Chrome egy böngészőbővítmény, amely lehetővé teszi az Internet Explorer használatát a weblapok tabon történő megjelenítéséhez. Hasznos, ha a weboldal Internet Explorer-szolgáltatásokat igényel. Például használhatod az IE tabot olyan weboldalak megjelenítéséhez, amelyekhez ActiveX-vezérlők szükségesek, internetes oldalak tesztelése IE motorral stb.
***
Live, Web-Based Browser Testing
Röviden, az eszköz azonnali hozzáférést biztosít minden asztali vagy mobil böngészőhöz. Teszteld élőben és búcsúzz el a virtuális beállításoktól vagy eszközöktől.
***
Automated testing in the cloud for CI
Ez az eszköz alkalmas arra, hogy minden tesztet egy erőteljes platformon futtass. Legyen automatizált böngésző, automatizált mobil vagy manuális teszt.
***
Teszteld webhelyedet ingyen több tucat böngészőben, és érj el azonnali eredményeket. Kapj hozzáférést több mint 1000 böngésző, operációs rendszer és bővítmény kombinációhoz.
Add meg a webhely URL-ját a megfelelő mezőben, válassz böngészőt és ellenőrizd a kompatibilitásukat. A szolgáltatás 7 napos ingyenes próbaverzióval rendelkezik.
***
Ezzel az eszközzel a böngészők élőben működhetnek, mintha a számítógépedre lettek volna telepítve. A szolgáltatás nem használ emulátort vagy hamis böngészőt. A legújabb böngészők azonnal elérhetőek. A böngészés a HTML5 <canvas> és a JavaScript segítségével működik, így nem kell semmit telepíteni. A közted és a Browserling közötti összes kapcsolat SSL titkosítva van, ezért a böngészés teljesen névtelen. Ingyenes terv áll rendelkezésre.
***
Nincs szükség telepítésre. Csak kattints a futtatáshoz és teszteld a böngészőket azonnal online.
***
Az eszközt az automatizált kompatibilitási teszteléshez alkalmazzák. Vizsgálja és jelzi a böngészők közötti kompatibilitás elrendezésbeli különbségeit és szkriptjeit a webhelyeden.
***
A Litmus a megfelelő eszköz az egyszeri böngésző teszteléshez. Adj meg egy URL-t, és megmutatja, hogyan jelenik meg a népszerű böngészőkben.
***
Lehetővé teszi a gyorsabb böngésző tesztelést, mivel a böngészők és a mobil szimulátorok gyors asztali alkalmazásokba vannak csomagolva. Mobilra tesztelheted: iOS, Android és BlackBerry egy alkalmazásban. Az eszköz könnyedén megtalálja a kompatibilitási problémákat, látja a böngésző kompatibilitási problémáit közvetlenül a kódban és párhuzamosan tesztelheted a böngészőket, akár 4 böngészőt és mobil eszközt is futtathatsz egymás mellett.
***
A TestingBot a felhőben böngészők közötti tesztelést tesz lehetővé Selenium segítségével. A webhelyed hibamentes lesz ezzel az egyszerű szolgáltatással, amely segít a webhelyek különböző böngészőkben történő tesztelésében, akár automatikusan, akár manuálisan, a nap 24 órájában. Ingyenes próbaverzió elérhető!
***
CSS & JS hibaelhárítás
Ez egy JavaScript kódminőségi eszköz. Egyszerűen fogalmazva, rávilágít a JavaScript programok hibáira. A JSLint segít abban, hogy jobb nyelven programozhass.
***
Nagyon kifejező szlogennel állítják, hogy "megbántja az érzéseidet * (és segít neked jobban kódolni)". Helyezd a CSS-edet a beviteli mezőbe, és nézd meg, van-e valami baj vele.
***
Online Javascript Compression Tool
Ez egy online JavaScript-kompresszor, amely lehetővé teszi a JavaScript fájlok tömörítését és minimalizálását. Általában 30-90% -kal csökkent. Az ilyen JavaScript fájlok ideálisak a termelési környezetekhez. A legtöbb fájlméret csökkentése a megjegyzések és az extra fehér tér karakterek eltávolításával történik, amelyek nem feltétlenül szükségesek.
***
Itt számos eszköz megtalálható a különböző fájlformátumok szépítésére, minimalizálására, formázására vagy tömörítésére.
***
Összefoglaló
Te mindig teszteled a létrehozott elrendezéseket? Szerinted fontos? Hasznosnak találod ezt az eszköztárat? Lehet, hogy a felsorolt eszközöket már használod, és készen állsz véleményed megosztására? Megjegyzéseidet szívesen várjuk a hozzászólás részben.