Console Logger tallentaa kaikki konsoliviestit (console.log, console.warn, console.error, console.info) ja näyttää ne kelluvassa paneelissa suoraan sivulla. Näet JavaScript-virheet, virheenkorjausviestit ja varoitukset reaaliajassa avaamatta selaimen DevToolsia. Viestit on värikoodattu tyypin mukaan, ja ne sisältävät aikaleiman sekä virheille pinonjäljityksen.
Selaimen DevToolsin avaaminen pelkästään konsoliviestien tarkistamiseksi vie arvokasta näyttötilaa — etenkin pienemmillä näytöillä tai kun täytyy nähdä koko sivu lokien seurannan aikana. Console Logger tarjoaa kevyen vaihtoehdon: kelluvan paneelin, joka näyttää kaikki konsoliviestit sitä mukaa kun ne syntyvät, sivun päällä. Paneeli tallentaa console.log-, console.warn-, console.error- ja console.info-kutsut sekä käsittelemättömät poikkeukset täydellisineen pinonjäljityksineen. Viestit on värikoodattu (virheet punaisella, varoitukset keltaisella, info sinisellä, lokit valkoisella/harmaalla) ja niihin sisältyy aikaleima tapahtumien ajoituksen seuraamiseksi. Suodatinpainikkeiden avulla voit näyttää vain tiettyjä viestityyppejä — näytä vain virheet kaatumista virheenkorjatessa tai vain varoitukset vanhentuneita toimintoja etsiessä. Paneeli on siirrettävissä, skaalattavissa ja puoliksi läpinäkyvä, joten se ei peitä liikaa sivun sisältöä.
Konsoliviestit ilmestyvät reaaliajassa sitä mukaa kun ne kirjataan. Näet sivun alustuslokit, API-vastausten käsittelyn, käyttäjän vuorovaikutustapahtumat ja virheilmoitukset — kaikki suoratoistona kelluvassa paneelissa.
Virheet punaisella, varoitukset oranssinkeltaisella, info sinisellä ja tavalliset lokit valkoisella/harmaalla. Erottelet kriittisen virheen ja tavallisen lokiviestin toisistaan välittömästi värin perusteella.
JavaScript-virheisiin sisältyy täydellinen pinonjäljitys tiedostonnimineen, funktionimineen ja rivinumeroineen. Napsauta tiedostoreferenssiä nähdäksesi tarkasti, mistä virhe on peräisin — avaamatta DevToolsia.
Yläreunassa olevilla suodatinpainikkeilla voit näyttää tai piilottaa tiettyjä viestityyppejä: Kaikki, Vain virheet, Vain varoitukset, Vain info, Vain lokit. Jokaisen suodattimen laskurimerkki näyttää kyseisen tyypin viestimäärän.
Jokaisessa viestissä näkyy sen kirjaamisaika (TT:MM:SS-muodossa). Seuraa tapahtumien järjestystä, tunnista suorituskykyongelmat (kuinka kauan API-kutsun ja vastauksen välillä kestää) ja yhdistä viestit käyttäjän toimiin.
Tyhjennä kaikki viestit aloittaaksesi alusta tai anna niiden kertyä sivua käyttäessäsi. Paneeli näyttää viestien kokonaismäärän ja se voidaan minimoida, kun sitä ei tarvita.
Haluatko nähdä konsoliviestit pitäen koko sivun näkyvissä? Console Logger antaa sinun seurata lokeja ilman, että DevTools-paneeli vie näyttötilaa. Täydellinen pienemmille näytöille tai esitysten ajaksi.
Jos JavaScript-koodisi kirjaa API-vastauksia, Console Logger näyttää ne reaaliajassa. Tarkastele pyyntöjen ja vastausten tietoja vaihtamatta sivun ja DevToolsin välillä.
Jotkin JavaScript-virheet epäonnistuvat hiljaisesti — näkyvää muutosta käyttöliittymässä ei tapahdu, mutta konsolissa on virhe. Console Logger tekee nämä virheet näkyviksi sivulla, jolloin huomaat ne tavallisen selailun aikana.
Pidä livedemon aikana Console Logger -paneeli näkyvissä jossakin kulmassa. Jos jokin menee pieleen, näet virheilmoituksen välittömästi ilman, että sinun tarvitsee keskeyttää demo avataksesi DevToolsin.
Kolmansien osapuolien skriptit (analytiikka, chat-widgetit, mainosverkostot) heittävät usein virheitä tai varoituksia. Console Logger tallentaa nämä, jotta voit seurata ulkoisten riippuvuuksien tilaa.
Avaa DevSuite Pro -kelluva telakka ja napsauta Console Logger -kuvaketta. Kelluva paneeli ilmestyy ja alkaa välittömästi tallentaa konsolitulosteita.
Käytä sivua tavalliseen tapaan — napsauta painikkeita, navigoi, lähetä lomakkeita. Konsoliviestit ilmestyvät paneeliin sitä mukaa kun sivun JavaScript kirjaa niitä.
Käytä suodatinpainikkeita näyttääksesi vain virheet, varoitukset tai lokit. Laskurimerkit kertovat kunkin tyypin viestimäärän.
Laajenna virheviestin pinonjäljitys nähdäksesi tiedoston ja rivinumeron, jossa virhe tapahtui. Käytä tätä tunnistamaan virheen lähde.
Napsauta "Tyhjennä" nollataksesi paneelin tai poista työkalu käytöstä sulkeaksesi sen. Sivulle ei jää mitään jälkeä.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.
