Console Logger bilježi sve izlaze konzole (console.log, console.warn, console.error, console.info) i prikazuje ih u plutajućem panelu izravno na stranici. Vidite JavaScript pogreške, poruke za otklanjanje pogrešaka i upozorenja u stvarnom vremenu bez otvaranja DevTools preglednika. Poruke su označene bojom prema vrsti i uključuju vremenske oznake i stack trace za pogreške.
Otvaranje DevTools preglednika samo za provjeru izlaza konzole zauzima dragocjeni prostor na zaslonu — posebno na manjim zaslonima ili kada trebate vidjeti cijelu stranicu dok pratite zapise. Console Logger pruža laganu alternativu: plutajući panel koji prikazuje sve izlaze konzole kako se pojavljuju, prelazeći iznad stranice. Panel bilježi console.log, console.warn, console.error, console.info i neuhvaćene iznimke s potpunim stack trace. Poruke su označene bojom (pogreške crvenom, upozorenja žutom, informacije plavom, zapisi bijelom/sivom) i uključuju vremenske oznake za praćenje kada se događaji pojavljuju. Gumbi filtera omogućuju prikaz samo određenih vrsta poruka — prikažite samo pogreške pri otklanjanju pada ili samo upozorenja pri traženju obavijesti o zastarjelosti. Panel je pomičan, promjenjive veličine i polu-proziran kako ne bi blokirao previše sadržaja stranice.
Poruke konzole pojavljuju se u stvarnom vremenu kako se bilježe. Vidite zapise inicijalizacije stranice, rukovanje odgovorima API-ja, događaje interakcije korisnika i poruke o pogreškama — sve uživo u plutajućem panelu.
Pogreške crvenom, upozorenja jantarnom/žutom, informacije plavom, a standardni zapisi bijelom/sivom. Trenutačno razlikujte kritičnu pogrešku od rutinske poruke zapisa samo prema boji.
JavaScript pogreške uključuju potpuni stack trace s nazivima datoteka, nazivima funkcija i brojevima redaka. Kliknite referencu na datoteku kako biste točno identificirali odakle je pogreška potekla bez otvaranja DevTools.
Gumbi filtera pri vrhu omogućuju prikaz/skrivanje određenih vrsta poruka: Sve, Samo pogreške, Samo upozorenja, Samo informacije, Samo zapisi. Oznaka broja na svakom filteru pokazuje koliko poruka te vrste postoji.
Svaka poruka prikazuje vrijeme kada je zabilježena (format HH:MM:SS). Pratite redoslijed događaja, identificirajte probleme s performansama (koliko dugo između poziva API-ja i odgovora) i korelacijte poruke s radnjama korisnika.
Obrišite sve poruke za novi početak ili nastavite prikupljati dok komunicirate sa stranicom. Panel prikazuje ukupan broj poruka i može se minimizirati kada nije potreban.
Trebate li vidjeti izlaz konzole dok stranica ostaje potpuno vidljiva? Console Logger omogućuje praćenje zapisa bez zauzimanja prostora na zaslonu DevTools paneluom. Savršeno na manjim zaslonima ili tijekom prezentacija.
Ako vaš JavaScript bilježi odgovore API-ja, Console Logger ih prikazuje u stvarnom vremenu. Vidite podatke zahtjeva/odgovora bez prebacivanja između stranice i DevTools.
Neke JavaScript pogreške nastaju tiho — bez vidljive promjene korisničkog sučelja, ali s pogreškom u konzoli. Console Logger čini te pogreške vidljivima na stranici kako biste ih primijetili tijekom normalnog pregledavanja.
Tijekom demo prezentacije uživo, držite panel Console Logger vidljivim u kutu. Ako nešto krene po zlu, odmah možete vidjeti poruku o pogrešci bez prekidanja demo prezentacije za otvaranje DevTools.
Skripte trećih strana (analitika, widgeti za chat, reklamne mreže) često izbacuju pogreške ili upozorenja. Console Logger ih bilježi kako biste mogli pratiti zdravlje vanjskih ovisnosti.
Otvorite plutajući dock DevSuite Pro i kliknite ikonu Console Logger. Pojavljuje se plutajući panel i odmah počinje bilježiti izlaz konzole.
Koristite stranicu normalno — kliknite gumbe, navigirajte, šaljite obrasce. Poruke konzole pojavljuju se u panelu kako ih bilježi JavaScript stranice.
Koristite gumbe filtera za prikaz samo pogrešaka, upozorenja ili zapisa. Oznake broja pokazuju koliko poruka postoji za svaku vrstu.
Za poruke o pogreškama, proširite stack trace da biste vidjeli datoteku i broj retka gdje je pogreška nastala. Koristite ovo za identificiranje izvora greške.
Kliknite "Obriši" za resetiranje panela ili deaktivirajte alat za zatvaranje. Na stranici ne ostaje nikakav trag.
Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.
