Console Logger captează toate ieșirile console (console.log, console.warn, console.error, console.info) și le afișează într-un panou flotant direct pe pagină. Vizualizează erorile JavaScript, mesajele de depanare și avertismentele în timp real, fără a deschide browser DevTools. Mesajele sunt codificate prin culori în funcție de tip și includ marcaje de timp și stack traces pentru erori.
Deschiderea browser DevTools doar pentru a verifica ieșirile console ocupă spațiu prețios pe ecran — în special pe ecrane mai mici sau când trebuie să vezi pagina completă în timp ce monitorizezi loguri. Console Logger oferă o alternativă ușoară: un panou flotant care afișează toate ieșirile console pe măsură ce se produc, suprapus pe pagină. Panoul captează console.log, console.warn, console.error, console.info și excepțiile necapturate cu stack traces complete. Mesajele sunt codificate prin culori (erorile în roșu, avertismentele în galben, info în albastru, logurile în alb/gri) și includ marcaje de timp pentru urmărirea momentului producerii evenimentelor. Butoanele de filtrare îți permit să afișezi doar anumite tipuri de mesaje — afișează doar erorile când depanezi o blocare sau doar avertismentele când cauți notificări de depreciere. Panoul este deplasabil, redimensionabil și semi-transparent, astfel încât să nu blocheze prea mult conținutul paginii.
Mesajele console apar în timp real pe măsură ce sunt înregistrate. Vizualizează logurile de inițializare a paginii, gestionarea răspunsurilor API, evenimentele de interacțiune ale utilizatorului și mesajele de eroare — toate transmise live în panoul flotant.
Erorile în roșu, avertismentele în chihlimbar/galben, info în albastru și logurile standard în alb/gri. Distinge instantaneu între o eroare critică și un mesaj de log de rutină, doar prin culoare.
Erorile JavaScript includ stack trace-ul complet cu numele fișierelor, numele funcțiilor și numerele de linie. Dă clic pe referința fișierului pentru a identifica exact locul de origine al erorii, fără a deschide DevTools.
Butoanele de filtrare din partea de sus îți permit să afișezi/ascunzi tipuri specifice de mesaje: Toate, Doar erori, Doar avertismente, Doar info, Doar loguri. Insigna de număr de pe fiecare filtru arată câte mesaje există pentru acel tip.
Fiecare mesaj afișează momentul înregistrării (format HH:MM:SS). Urmărește secvența evenimentelor, identifică probleme de performanță (cât durează între apelul API și răspuns) și corelează mesajele cu acțiunile utilizatorului.
Șterge toate mesajele pentru a o lua de la capăt sau continuă acumularea pe măsură ce interacționezi cu pagina. Panoul afișează numărul total de mesaje și poate fi minimizat când nu este necesar.
Ai nevoie să vezi ieșirile console păstrând pagina completă vizibilă? Console Logger îți permite să monitorizezi logurile fără ca panoul DevTools să ocupe spațiu pe ecran. Perfect pe ecrane mai mici sau în timpul prezentărilor.
Dacă JavaScript-ul tău înregistrează răspunsurile API, Console Logger le afișează în timp real. Vizualizează datele de cerere/răspuns fără a comuta între pagină și DevTools.
Unele erori JavaScript eșuează silențios — nicio modificare vizibilă în UI, dar o eroare în console. Console Logger le face vizibile pe pagină, astfel încât le observi în timpul navigării normale.
În timpul unui demo live, păstrează panoul Console Logger vizibil într-un colț. Dacă ceva nu merge, poți vedea imediat mesajul de eroare fără a întrerupe demo-ul pentru a deschide DevTools.
Script-urile terțe (analiză, widget-uri de chat, rețele publicitare) generează adesea erori sau avertismente. Console Logger le captează, astfel încât poți monitoriza starea de sănătate a dependențelor externe.
Deschide dock-ul flotant DevSuite Pro și dă clic pe pictograma Console Logger. Un panou flotant apare și începe imediat să capteze ieșirile console.
Folosește pagina normal — dă clic pe butoane, navighează, trimite formulare. Mesajele console apar în panou pe măsură ce sunt înregistrate de JavaScript-ul paginii.
Folosește butoanele de filtrare pentru a afișa doar erorile, avertismentele sau logurile. Insignele de număr arată câte mesaje există pentru fiecare tip.
Pentru mesajele de eroare, extinde stack trace-ul pentru a vedea fișierul și numărul de linie unde s-a produs eroarea. Folosește aceasta pentru a identifica sursa bug-ului.
Dă clic pe "Șterge" pentru a reseta panoul sau dezactivează instrumentul pentru a-l închide. Nu rămâne nicio urmă pe pagină.
Instalează DevSuite Pro gratuit și deblochează peste 39 de instrumente pentru dezvoltatori în browserul tău.
