Kuinka voit parantaa työnkulkua JavaScript-konsolilla

Verkkokehittäjänä tiedät hyvin tarpeen koodin virheenkorjaus. Käytämme usein ulkoisia kirjastoja lokeihin ja niiden muotoiluun ja / tai näyttämiseen joissakin tapauksissa, mutta selaintemme konsoli on paljon tehokkaampi kuin luulemme.

Kun ajattelemme konsolia, tulee ensin mieleen ja console.log, eikö? Mutta menetelmiä on paljon enemmän kuin kuvittelemme. Nyt näemme, miten konsolin käytöstä saat kaiken irti, ja annan sinulle vinkkejä näiden menetelmien helpottamiseksi

Mikä on konsoli?

JavaScripti-konsoli on sisäänrakennettu ominaisuus nykyaikaisissa selaimissa, ja siinä on valmiiden kehitystyökalut kuoren kaltaisessa käyttöliittymässä. Sen avulla kehittäjä voi:

  • Tarkastele lokia virheistä ja varoituksista, jotka tapahtuvat verkkosivulla.
  • Ole vuorovaikutuksessa verkkosivun kanssa JavaScript-komennoilla.
  • Virheenkorjaus sovellukset ja kulkea DOM suoraan selaimessa.
  • Tarkasta ja analysoi verkon toiminta

Pohjimmiltaan se antaa sinulle mahdollisuuden kirjoittaa, hallita ja seurata JavaScriptiä suoraan selaimessasi.

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

Nämä ovat luultavasti kaikkien käytetyimmät menetelmät. Voit välittää useamman kuin yhden parametrin näille menetelmille. Jokainen parametri arvioidaan ja ketjutetaan merkkijonossa, jonka rajaa välilyönti, mutta objektien tai taulukoiden tapauksessa voit siirtyä niiden ominaisuuksien välillä.

Console.group

Tämän menetelmän avulla voit ryhmitellä joukon konsoli.logeja (mutta myös virhetietoja ja niin edelleen) ryhmään, joka voidaan tiivistää. Syntaksi on oikeastaan ​​hyvin yksinkertainen: kirjoita vain kaikki console.logryhmittelemämme ryhmät ennen console.group()(tai console.groupCollapsed()jos haluamme sen olevan suljettu oletusarvoisesti). console.groupEnd()Sulje sitten ryhmä lisäämällä sen loppuun a .

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

Console.table

Sen jälkeen kun huomasin, console.tableelämäni on muuttunut. JSON: n tai erittäin suurten JSON-taulukoiden näyttäminen a: n sisällä console.logon kauhistuttava kokemus. Sen console.tableavulla voimme visualisoida nämä rakenteet kauniissa taulukossa, jossa voimme nimetä sarakkeet ja välittää ne parametreiksi.

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 virheenkorjauksen. console.countLaskee ja antaa ulos monta kertaa, että count()on sovellettu samalla linjalla ja samalla tunnisteella. Käynnistää console.timeajastimen, jonka nimi on määritetty tuloparametriksi, ja se voi ajaa jopa 10000 samanaikaista ajastinta tietyllä sivulla. Kun se on aloitettu, käytämme puhelua console.timeEndlopettamaan ajastimen ja tulostamaan kuluneen ajan konsolille.

Tulos näyttää tältä:

Console.trace ja Console.assert

Nämä menetelmät yksinkertaisesti tulostavat pinon jäljen siitä pisteestä, johon sitä kutsuttiin. Kuvittele, että luot JS-kirjaston ja haluat ilmoittaa käyttäjälle, missä virhe luotiin. Siinä tapauksessa nämä menetelmät voivat olla erittäin hyödyllisiä. Se console.asserton kuin console.tracemutta tulostaa vain, jos läpäistävä ehto ei läpäissyt

Kuten näemme, tulos on juuri se, mitä React (tai mikä tahansa muu kirjasto) näyttäisi meille, kun luomme poikkeuksen.

Poistetaanko kaikki konsolit?

Konsolien käyttö pakottaa meidät usein poistamaan ne. Tai joskus unohdamme tuotantorakenteen (ja huomaamme ne vahingossa vain päiviä ja päiviä myöhemmin). En tietenkään kehota ketään käyttämään konsoleja väärin siellä, missä niitä ei tarvita (muutoksen syöttökahvassa oleva konsoli voidaan poistaa, kun näet sen toimivan). Sinun tulisi jättää virhelokit tai jälkilokit kehitystilaan helpottamaan vianetsintää. Käytän Webpackia paljon sekä töissä että omissa projekteissani. Tämän työkalun avulla voit poistaa kaikki konsolit, joita et halua jäädä (tyypin mukaan) tuotantorakenteesta, käyttämällä uglifyjs-webpack-plugin?

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')var debug = process.env.NODE_ENV !== "production";.....optimization: { minimizer: !debug ? [ new UglifyJsPlugin({ // Compression specific options uglifyOptions: { // Eliminate comments comments: false, compress: { // remove warnings warnings: false, // Drop console statements drop_console: true }, } })] : []}

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

Jos pidit artikkelista, taputa ja seuraa minua :)

Thx ja pysy kuulolla?

Seuraa viimeisiä uutisiani ja vinkkejäni Facebookissa