de Riccardo Canella

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

Cum va puteti imbunatati fluxul de lucru utilizand 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, dreapta? 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 browser.

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.

Cum va puteti imbunatati fluxul de lucru utilizand consola JavaScript

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ă: introduceți doar toate console.log vrem să ne grupăm înainte de a console.group() (sau console.groupCollapsed() dacă vrem să fie închis în mod implicit). Apoi adăugați un console.groupEnd() la final pentru a închide grupul.

1611258065 346 Cum va puteti imbunatati fluxul de lucru utilizand consola JavaScript
Exemplu de utilizare a console.group

Rezultatele vor arăta astfel:

1611258066 529 Cum va puteti imbunatati fluxul de lucru utilizand consola JavaScript

Consolă.tabel

De când am descoperit console.table viața mea s-a schimbat. Afișarea matricilor JSON sau JSON foarte mari în interiorul unui console.log este o experiență terifiantă. console.table ne permite să vizualizăm aceste structuri într-un tabel frumos unde putem numi coloanele și le putem transmite ca parametri.

1611258066 774 Cum va puteti imbunatati fluxul de lucru utilizand consola JavaScript
Exemplu de utilizare a consolei.table

Rezultatul este minunat și foarte util în depanare:

1611258067 849 Cum va puteti imbunatati fluxul de lucru utilizand consola JavaScript

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

Aceste trei metode reprezintă cuțitul elvețian pentru fiecare dezvoltator care trebuie să depaneze. console.count numără și redă de câte ori count() a fost invocat pe aceeași linie și cu aceeași etichetă. console.time pornește un temporizator cu un nume specificat ca parametru de intrare și poate rula până la 10.000 de temporizatoare simultane pe o pagină dată. Odată inițiat, folosim un apel către console.timeEnd pentru a opri cronometrul și a imprima timpul scurs pe Consolă.

1611258067 336 Cum va puteti imbunatati fluxul de lucru utilizand consola JavaScript
Exemplu de utilizare a console.time și console.count

Ieșirea va arăta astfel:

1611258067 59 Cum va puteti imbunatati fluxul de lucru utilizand consola JavaScript

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. console.assert este ca console.trace dar va imprima numai dacă condiția trecută nu a trecut.

1611258068 267 Cum va puteti imbunatati fluxul de lucru utilizand consola JavaScript

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.

1611258068 176 Cum va puteti imbunatati fluxul de lucru utilizand consola JavaScript

Ș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ă (după tip) din construcția de producție folosind 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 despre Facebook