Kuinka voit parantaa työnkulkuasi JavaScript-konsolin avulla

Web-kehittäjänä tiedät erittäin hyvin, että sinun on korjata koodi. Käytämme usein lokkeihin ulkoisia kirjastoja ja joissakin tapauksissa niiden muotoilua ja / tai näyttämistä, mutta selaimesi konsoli on paljon tehokkaampi kuin luulemme.

Kun ajattelemme konsolia, ensimmäinen asia, joka tulee mieleen ja console.log, eikö niin? Mutta menetelmiä on paljon enemmän kuin mitä kuvittelemme. Nyt näemme, kuinka voit hyödyntää konsolin käyttöä parhaalla mahdollisella tavalla, ja annan sinulle vinkkejä näiden menetelmien luettavuuden parantamiseksi.

Mikä on konsoli?

JavaScript-konsoli on moderneissa selaimissa sisäänrakennettu ominaisuus, joka toimitetaan kuoren kaltaisessa käyttöliittymässä valmiiden kehitysvälineiden kanssa. Sen avulla kehittäjä voi:

  • Tarkastele lokisivua virheistä ja varoituksista, joita tapahtuu verkkosivulla.
  • Ole vuorovaikutuksessa verkkosivun kanssa JavaScriptin komentojen avulla.
  • Debug-sovellukset ja kulje DOM suoraan selaimessa.
  • Tarkasta ja analysoi verkon toimintaa

Pohjimmiltaan se antaa sinun kirjoittaa, hallita ja seurata JavaScriptiä suoraan selaimesi sisällä.

Console.log, Console.error, Console.warn ja Console.info

Nämä ovat luultavasti eniten käytettyjä menetelmiä kaikista. Voit siirtää useamman kuin yhden parametrin näihin menetelmiin. Jokainen parametri arvioidaan ja yhdistetään merkkijonolla, joka on rajoitettu välilyönnillä, mutta objektien tai taulukkojen tapauksessa voit selata niiden ominaisuuksia.

Console.group

Tämän menetelmän avulla voit ryhmitellä joukon console.logs (mutta myös virhetietoja ja niin edelleen) ryhmään, joka voidaan tiivistää. Syntaksi on todella yksinkertainen: kirjoita vain kaikki console.log, jonka haluamme ryhmitellä ennen console.group () (tai console.groupCollapsed (), jos haluamme sen sulkeutuvan oletuksena). Lisää lopuksi console.groupEnd () loppuun sulkeaksesi ryhmän.

Esimerkki console.groupin käytöstä

Tulokset näyttävät tältä:

Console.table

Sen jälkeen kun löysin konsolin.pöytä, elämäni on muuttunut. JSON: n tai erittäin suurten JSON-taulukkojen näyttäminen console.logissa on pelottava kokemus. Console.table antaa meille mahdollisuuden visualisoida nämä rakenteet kauniissa taulukossa, jossa voimme nimetä sarakkeet ja siirtää ne parametreiksi.

Esimerkki console.table -sovelluksen käytöstä

Tulos on upea ja erittäin hyödyllinen virheenkorjauksessa:

Console.count, Console.time ja Console.timeEnd

Nämä kolme menetelmää ovat Sveitsin armeijan veitsi jokaiselle kehittäjälle, joka tarvitsee virheenkorjausta. Console.count laskee ja tulostaa, kuinka monta kertaa laskua () on käytetty samalla rivillä ja samalla etiketillä. Console.time käynnistää ajastimen, jonka nimi on määritetty syöttöparametriksi, ja voi ajaa jopa 10 000 samanaikaista ajastinta tietyllä sivulla. Kun aloittaminen tapahtuu, kutsumme console.timeEnd -sovellukseen pysäyttääksesi ajastimen ja tulostaaksesi kuluneen ajan konsoliin.

Esimerkki kuinka console.time ja console.count käytetään

Tulos näyttää tältä:

Console.trace ja Console.assert

Nämä menetelmät tulostavat vain pinojäljen siitä kohdasta, jossa sitä kutsuttiin. Kuvittele, että luot JS-kirjaston ja haluat ilmoittaa käyttäjälle, missä virhe syntyi. Tällöin nämä menetelmät voivat olla erittäin hyödyllisiä. Console.assert on kuin console.cece, mutta tulostetaan vain, jos läpäissyt ehto ei läpäissyt.

Kuten voimme nähdä, lähtö on juuri sitä, mitä React (tai mikä tahansa muu kirjasto) näyttäisi meille, kun luot poikkeuksen.

Poista kaikki konsolit

Konsolien käyttö pakottaa meidät usein poistamaan ne. Tai joskus unohdamme tuotannon rakennuksen (ja huomaamme ne erehdyksessä vain päiviä ja päiviä myöhemmin). En tietenkään suosittele ketään väärinkäyttämään konsoleja siellä, missä niitä ei tarvita (muutoksen syöttökahvan konsoli voidaan poistaa, kun huomaat, että se toimii). Sinun tulisi jättää virhelokit tai jäljityslokit kehitystilaan vianmäärityksen helpottamiseksi. Käytän Webpackia paljon, sekä työssä että omissa projekteissani. Tämän työkalun avulla voit poistaa kaikki konsolit, joita et halua jäädä (tyypin mukaan) tuotantokokoonpanosta käyttämällä uglifyjs-webpack-plugin

const UglifyJsPlugin = vaadi ('uglifyjs-webpack-plugin')
var debug = process.env.NODE_ENV! == "tuotanto";

.....
optimointi: {
        minimoija:! debug? [
            uusi UglifyJsPlugin ({
                // Pakkauskohtaiset vaihtoehdot
                uglifyOptions: {
                    // Poista kommentit
                    kommentit: väärä,
                    puristaa: {
                       // poista varoitukset
                       varoitukset: vääriä,
                       // Pudota konsolilausekkeet
                       drop_console: totta
                    },
                }
           })]: []
}

Kokoonpano on todella triviaalia ja se yksinkertaistaa työtä, joten pidä hauskaa konsolin kanssa (mutta älä käytä sitä väärin!)

Jos pidit artikkelista, taputtele ja seuraa minua :)
Thx ja pysy kuulolla
Seuraa viimeisimpiä uutisia ja vinkkejä Facebookissa