A Console Logger rögzít minden console kimenetet (console.log, console.warn, console.error, console.info), és egy közvetlenül az oldalon megjelenő lebegő panelen jeleníti meg azokat. Valós időben láthatod a JavaScript hibákat, debug üzeneteket és figyelmeztetéseket anélkül, hogy megnyitnád a böngésző DevTools-t. Az üzenetek típus szerint színkódoltak, és tartalmazzák az időbélyegeket, valamint a hibák verem-nyomkövetéseit.
A böngésző DevTools megnyitása csak a console kimenet ellenőrzéséhez értékes képernyőterületet foglal el — különösen kisebb képernyőkön, vagy ha az oldalt teljes egészében kell látni a naplók figyelése közben. A Console Logger egy könnyűsúlyú alternatívát kínál: egy lebegő panelt, amely az összes console kimenetet megjeleníti az eseményekkel egy időben, az oldalra vetítve. A panel rögzíti a console.log, console.warn, console.error, console.info üzeneteket, valamint a nem kezelt kivételeket teljes verem-nyomkövetéssel. Az üzenetek színkódoltak (hibák pirosban, figyelmeztetések sárgában, info kékben, naplók fehérben/szürkében), és időbélyegeket tartalmaznak az események bekövetkezésének nyomon követéséhez. A szűrőgombok lehetővé teszik, hogy csak adott üzenettípusokat jelenítsd meg — csak a hibákat egy összeomlás hibakeresésénél, vagy csak a figyelmeztetéseket az elavulási megjegyzések keresésekor. A panel húzható, átméretezhető és félig átlátszó, hogy ne takarja el az oldaltartalmat.
A console üzenetek valós időben jelennek meg, ahogy naplózódnak. Láthatod az oldal inicializálási naplóit, az API-válaszok kezelését, a felhasználói interakciók eseményeit és a hibaüzeneteket — mindezt élőben streamelve a lebegő panelen.
Hibák pirosban, figyelmeztetések borostyán/sárgában, info kékben, általános naplók fehérben/szürkében. Azonnal megkülönböztethetők a kritikus hibák és a rutinszerű naplóüzenetek csupán a szín alapján.
A JavaScript hibák tartalmazzák a teljes verem-nyomkövetést fájlnevekkel, függvénynevekkel és sorszámokkal. Kattints a fájlhivatkozásra, hogy pontosan azonosíthasd a hiba forrását a DevTools megnyitása nélkül.
A felső szűrőgombok lehetővé teszik adott üzenettípusok megjelenítését/elrejtését: Összes, Csak hibák, Csak figyelmeztetések, Csak info, Csak naplók. Az egyes szűrőkön lévő számlálójelvény mutatja, hány üzenet tartozik az adott típushoz.
Minden üzenet mutatja a naplózás idejét (ÓÓ:PP:MM formátumban). Kövesd az események sorrendjét, azonosítsd a teljesítményproblémákat (mennyi idő telik el az API hívás és a válasz között), és kösd össze az üzeneteket a felhasználói műveletekkel.
Töröld az összes üzenetet, hogy tiszta lappal indulj, vagy hagyd felhalmozódni azokat az oldallal való interakció közben. A panel mutatja az összes üzenet számát, és minimalizálható, ha nincs rá szükség.
Látni szeretnéd a console kimenetet, miközben a teljes oldal látható marad? A Console Logger lehetővé teszi a naplók figyelését anélkül, hogy a DevTools panel elfoglalná a képernyőterületet. Tökéletes kisebb képernyőkön vagy bemutatók alatt.
Ha a JavaScript-ed naplózza az API-válaszokat, a Console Logger valós időben mutatja azokat. Lásd a kérés/válasz adatokat anélkül, hogy az oldal és a DevTools között kellene váltogatnod.
Néhány JavaScript hiba csendesen siklik el — nincs látható UI-változás, de hiba jelenik meg a console-ban. A Console Logger láthatóvá teszi ezeket az oldalon, így normál böngészés közben is észreveszed.
Élő bemutató alatt tartsd a Console Logger panelt láthatóan egy sarokban. Ha valami hiba történik, azonnal láthatod a hibaüzenetet anélkül, hogy megszakítanád a bemutatót a DevTools megnyitásával.
A harmadik féltől származó szkriptek (analitika, csevegőpaneletek, reklámhálózatok) gyakran dobnak hibákat vagy figyelmeztetéseket. A Console Logger rögzíti ezeket, így figyelheted a külső függőségek állapotát.
Nyisd meg a DevSuite Pro lebegő dockot, és kattints a Console Logger ikonra. Megjelenik egy lebegő panel, és azonnal elkezdi rögzíteni a console kimenetet.
Használd az oldalt normálisan — kattints gombokra, navigálj, küldj be űrlapokat. A console üzenetek megjelennek a panelen, ahogy az oldal JavaScript-je naplózza azokat.
Használd a szűrőgombokat, hogy csak a hibákat, figyelmeztetéseket vagy naplókat jelenítsd meg. A számlálójelvények mutatják, hány üzenet létezik az egyes típusokhoz.
Hibaüzeneteknél nyisd ki a verem-nyomkövetést, hogy lásd a fájlt és a sorszámot, ahol a hiba keletkezett. Ezzel azonosíthatod a hiba forrását.
Kattints a "Törlés" gombra a panel alaphelyzetbe állításához, vagy deaktiváld az eszközt a bezáráshoz. Az oldalon nem marad nyom.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 39+ fejlesztői eszközt böngészőjéhez.
