Cum vă puteți îmbunătăți fluxul de lucru utilizând consola JavaScript

Ca dezvoltator web, știți foarte bine nevoia de a depana codul. Adesea folosim biblioteci externe pentru jurnale și pentru a le forma și / sau afișa în unele cazuri, dar consola browserelor noastre este mult mai puternică decât credem.

Când ne gândim la consolă, primul lucru care ne vine în minte și console.log, nu? Dar există mult mai multe metode decât cele pe care ni le imaginăm. Acum vom vedea cum să profitați la maximum de consolă și vă voi oferi câteva sfaturi pentru a le face mai ușor de citit aceste metode

Ce este Consola?

Consola JavaScript este o funcție încorporată în browserele moderne care vine cu instrumente de dezvoltare out-of-the-box într-o interfață de tip shell. Permite unui dezvoltator să:

  • Vizualizați un jurnal de erori și avertismente care apar pe o pagină web.
  • Interacționați cu pagina web folosind comenzi JavaScript.
  • Depanați aplicațiile și traversați DOM-ul direct în browser.
  • Inspectați și analizați activitatea rețelei

Practic, vă permite să scrieți, să gestionați și să monitorizați JavaScript chiar în browserul dvs.

Console.log, Console.error, Console.warn și Console.info

Acestea sunt probabil cele mai utilizate metode dintre toate. Puteți trece mai mult de un parametru acestor metode. Fiecare parametru este evaluat și concatenat într-un șir delimitat de spațiu, dar în cazul obiectelor sau al matricelor puteți naviga între proprietățile lor.

Console.group

Această metodă vă permite să grupați o serie de console.logs (dar și informații despre erori și așa mai departe) sub un grup care poate fi prăbușit. Sintaxa este într-adevăr foarte simplă: trebuie doar să introduceți toate cele pe console.logcare dorim să le grupăm înainte de a console.group()(sau console.groupCollapsed()dacă dorim ca aceasta să fie închisă în mod implicit). Apoi adăugați un console.groupEnd()la final pentru a închide grupul.

Rezultatele vor arăta astfel:

Consolă.tabel

De când am descoperit console.tableviața mea s-a schimbat. Afișarea matricilor JSON sau JSON foarte mari în interiorul unei console.logeste o experiență terifiantă. Ne console.tablepermite să vizualizăm aceste structuri într-un tabel frumos unde putem numi coloanele și le putem transmite ca parametri.

Rezultatul este minunat și foarte util în depanare:

Console.count, Console.time și Console.timeEnd

Aceste trei metode reprezintă cuțitul elvețian pentru fiecare dezvoltator care trebuie să depaneze. Cele mai console.countcontează și ieșirile de câte ori count()a fost invocat pe aceeași linie și cu aceeași etichetă. console.timePornește un temporizator cu un nume specificat ca parametru de intrare, și poate rula până la 10.000 de cronometre simultane pe o anumită pagină. Odată inițiat, folosim un apel către console.timeEndpentru a opri cronometrul și pentru a imprima timpul scurs pe Consolă.

Ieșirea va arăta astfel:

Console.trace și Console.assert

Aceste metode imprimă pur și simplu o urmă de stivă din punctul în care a fost apelată. Imaginați-vă că creați o bibliotecă JS și doriți să informați utilizatorul unde a fost generată eroarea. În acest caz, aceste metode pot fi foarte utile. Este console.assertca și console.tracedar se va imprima numai dacă condiția trecută nu a trecut.

După cum putem vedea, rezultatul este exact ceea ce React (sau orice altă bibliotecă) ne-ar arăta atunci când generăm o excepție.

Ștergeți toate consolele?

Folosirea consolei ne obligă deseori să le eliminăm. Sau uneori uităm de construcția de producție (și le observăm doar din greșeală zile și zile mai târziu). Desigur, nu sfătuiesc pe nimeni să abuzeze de console acolo unde nu sunt necesare (consola din mânerul de intrare pentru schimbare poate fi ștearsă după ce vedeți că funcționează). Ar trebui să lăsați jurnalele de erori sau jurnalele de urmărire în modul de dezvoltare pentru a vă ajuta să depanați. Folosesc Webpack foarte mult, atât la locul de muncă, cât și în propriile proiecte. Acest instrument vă permite să ștergeți toate consolele pe care nu doriți să rămână (în funcție de tip) din versiunea de producție utilizând 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 }, } })] : []}

Configurarea este cu adevărat banală și simplifică munca, așa că distrează-te cu consola (dar nu o abuza!)

Dacă ți-a plăcut articolul te rog bate din palme și urmărește-mă :)

Thx și rămâi la curent?

Urmăriți ultimele mele știri și sfaturi pe Facebook