de Kyle Gill

Comandand consola Javascript

Comandând consola Javascript

Trucuri utile pentru depanare, formatare și eficiență

Consola este unul dintre primele instrumente despre care dezvoltatorii învață. Consola este instrumentul pe care dezvoltatorii îl folosesc atunci când depanează propriile aplicații. legea instrumentului afirmă că este ușor să dezvolți încredere excesivă într-un instrument familiar.

„Presupun că este tentant, dacă singurul instrument pe care îl aveți este un ciocan, să tratați totul ca și cum ar fi un cui”. -Maslow

Aceeași idee poate fi aplicată consolei. Într-un ecosistem în care instrumentele, comenzile rapide de la tastatură și fluxul API-ului, cum ar fi laptele și mierea în țara promisă, este greu de justificat să ridici un ciocan nou când cel vechi funcționează bine. Crede-mă în asta, totuși, acele ciocănituri din spatele ciocanului tău nu sunt doar pentru a smulge unghiile.

Ceea ce urmează sunt câteva dintre cele mai simple trucuri pe care le-am găsit pentru depanare în consolă.

# 1: Argumente de împachetare

Dacă înfășurați argumentul trecut console.log în {} veți afișa datele pe care le conectați sub formă de obiect. Obiectul va avea un nume frumos pentru a vă spune ce ați încercat să scoateți.

Mai degrabă decât să vedeți o consolă întreagă de obiecte cu câmpuri similare, cum ar fi id și nume în consola dvs., astfel:

1611062766 846 Comandand consola Javascript

Veți obține numele variabilei în fața datelor care sunt tipărite astfel:

Comandand consola Javascript
Jos ambiguitatea!

# 2: Copierea datelor în clipboard

Puteți copia datele înregistrate în consolă în clipboard-ul computerului. Acest lucru mi se pare util atunci când doriți să manipulați un obiect într-un REPL sau să extrageți datele pe care le depanați.

1611062767 481 Comandand consola Javascript

Faceți clic dreapta lângă datele pe care doriți să le copiați și selectați „Stocați ca variabilă globală”. Aceasta va salva datele ca o variabilă în consolă cu un nume temporar. (Dacă este prima dată când o faci într-o fereastră de consolă, va fi temp1.) Apoi puteți utiliza copy() comandă introducând numele temp1 ca argument. Aceasta copiază datele stocate în clipboard, pe care le puteți lipi așa cum ați face orice altceva pe care îl copiați.

Este deosebit de util atunci când o interogare a bazei de date nu returnează date într-un format care se potrivește cu modul în care datele dvs. sunt manipulate pe frontend. Vă puteți arăta cum sunt mutate sau transformate datele.

# 3: Expresii de scurtcircuit

Dacă scurtcircuitați o expresie cu a || puteți crea cod de refactorizare sau adăugați într-o declarație de depanare mult mai rapid. Acest lucru este util în special cu funcțiile săgeată cu o singură linie, unde doriți să vedeți ce date primiți ca argument.

// THISsomeFunction = data => (  <div>    <Component data={data} />  </div>)
// BECOMES...someFunction = data =&gt; console.log(data) || (  <div>    <Component data={data} />  </div>)
// RATHER THAN...someFunction = data =&gt; {  console.log(data)    return (    <div>      <Component data={data} />    </div>  )}

Treceți peste înfășurarea întregii funcții cu aparate dentare și adăugarea unei returnări. Se pare că nu este o afacere atât de mare până când nu optimizați performanța și faceți-o de o mie de ori încercând să vă dați seama ce păcat de reacție flagrant ați comis.

# 4: Jurnal, Eroare, Avertizare

Pe lângă console.log(), consola are alte câteva funcții pentru a imprima date în consolă în diferite formate predefinite. Printre acestea se numără:

  • console.log()
1611062768 773 Comandand consola Javascript
  • console.warn()
1611062768 932 Comandand consola Javascript
  • console.error()
1611062769 101 Comandand consola Javascript

# 5: Formatare personalizată pentru ieșirea consolei

Puteți face mai mult decât să implementați formatarea încorporată cu console.log, warn, și error. Poți juca rolul de artist acolo unde consola este pânza ta!

Poate încercați să imprimați o pastilă frumoasă în jurul rezultatului pe care doriți să-l subliniați:

1611062769 200 Comandand consola Javascript
Abilități necesare: HTML, CSS și experiență de calcul cuantic

Iată fragmentul:

De asemenea, puteți stoca CSS pentru a fi utilizate ca stiluri într-o variabilă pe care să o aplicați la ieșire. Puteți să vă punk colegii cu un strop de curcubeu pentru a urmări tot ceea ce produceți. Dacă doriți curcubee umungous să urmeze totul, încercați acest lucru:

1611062769 435 Comandand consola Javascript
Eficient atunci când evacuați frustrarea

# 6: Tipărirea JSON ca tabel

Fără să știe mulți, consola are o metodă încorporată pentru imprimarea datelor tabulare în format tabel. Acest lucru poate fi extraordinar pentru examinarea rapidă a datelor JSON.

1611062770 468 Comandand consola Javascript

# 7: Numărare ușoară

console.count() metoda poate face foarte ușor să țineți cont de câte ori ați atins un punct din codul dvs. Nu mai trebuie să vă aruncați codul în variabile incrementale.

1611062771 747 Comandand consola Javascript

Sfat profesional: puteți înlocui „număr” cu o etichetă dintr-o variabilă și va contoriza de câte ori a fost accesată metoda de numărare cu acea etichetă.

Am găsit că acest lucru este util atunci când încerc să depanez condițiile cursei sau redarea inutilă într-o aplicație React.

# 8: Utilizarea elementelor DOM

Puteți selecta un element DOM în fila Elemente și apoi accesați-l cu $0. Browserul va păstra de fapt un istoric unde $0 reprezintă selecția curentă. $1 reprezintă selecția anterioară. $2 a doua ultima selecție și așa mai departe până la 5 elemente.

1611062772 542 Comandand consola Javascript
Cu o viteză de tastare de aproximativ 15 cuvinte pe minut

Vă puteți întreba: când aș vrea vreodată să schimb HTML-ul interior al aplicației mele de pe consolă? Și răspunsul ar fi probabil doar atunci când doriți un exemplu GIF foarte simplu pentru o postare pe blog. Dar și acesta are cazurile sale de utilizare.

# 9: Declarația de depanare

Dacă ați adăugat vreodată un console.log, ați intrat în instrumentele browserului și ați adăugat un punct de întrerupere, pentru a vedea ce se întâmplă când ajunge la acel cod, eliberați-vă cu debugger afirmație.

Dacă adăugați debugger pe o linie din Javascript browserul se va opri și va deschide instrumentele de depanare și va întrerupe executarea.

1611062773 840 Comandand consola Javascript
Comandă rapidă!

Deși nu este o caracteristică a consolei, este un lucru grozav de știut. Informațiile de conectare la consolă nu sunt la fel de eficiente sau eficiente ca instrumentele de depanare încorporate în browsere (cum ar fi fila Surse Chrome sau fila Debugger Firefox). Pentru a vă îmbunătăți în continuare depanarea, căutați resurse care se scufundă în aceste instrumente.

Cu toate acestea, consola rămâne o modalitate foarte rapidă și eficientă de a vedea fluxul aplicațiilor în aplicații în care se declanșează o mulțime de metode diferite de redare a vieții și redare și îmbunătățirea modului în care le utilizați și vă va face un dezvoltator mai bun.

Mulțumesc pentru lectură!

Dacă aveți propriile sfaturi, vă rugăm să împărtășiți! Mi-ar plăcea să aud de la dvs. aici în comentarii, pe Twitter sau prin e-mail.

Dacă ați găsit ceea ce ați citit interesant sau util, simțiți-vă binevenit să lăsați o palmă sau două, să vă abonați pentru actualizări viitoare sau să retweetați / distribuiți acest tweet:?