Lucruri pe care probabil nu le știați că le puteți face cu Consola pentru dezvoltatori Chrome

Chrome vine cu instrumente de dezvoltator încorporate. Aceasta vine cu o mare varietate de caracteristici, cum ar fi Elemente, rețea și securitate. Astăzi, ne vom concentra 100% pe consola sa JavaScript.

Când am început codificarea, am folosit doar consola JavaScript pentru înregistrarea valorilor, cum ar fi răspunsurile de pe server sau valoarea variabilelor. Dar, de-a lungul timpului, și cu ajutorul tutorialelor, am descoperit că consola poate face mult mai mult decât mi-am imaginat vreodată.

Iată lucruri utile pe care le puteți face cu acesta. Dacă citiți acest lucru în Chrome (sau în orice alt browser) pe un desktop, puteți chiar să deschideți instrumentele sale pentru dezvoltatori și să le încercați imediat.

1. Selectați DOM Elements

Dacă sunteți familiarizat cu jQuery, știți cât de importante sunt selectorii $ („. class”) și $ („# id”). Ele selectează elementele DOM în funcție de clasa sau ID-ul asociat acestora.

Dar când nu aveți acces la jQuery în DOM, puteți face același lucru în consola pentru dezvoltatori.

$ (‘tagName’) $ (‘. class’) $ (‘# id’) și $ (‘. class #id’) sunt echivalente cu document.querySelector (‘‘). Aceasta returnează primul element din DOM care se potrivește cu selectorul.

Puteți utiliza $$ („tagName”) sau $$ („. class”) – rețineți semnele de dolar duble – pentru a selecta toate elementele DOM în funcție de un anumit selector. Acest lucru le plasează și într-o matrice. Puteți continua din nou și puteți selecta un anumit element dintre ele specificând poziția acelui element în matrice.

De exemplu, $$ (‘. className’) vă va oferi toate elementele care au clasa className și $$ (‘. className’) [0] și $$ (‘. className’) [1] vă va oferi primul și respectiv al doilea element.

2. Convertiți browserul într-un editor

De câte ori v-ați întrebat dacă ați putea edita un text în browserul însuși? Răspunsul este da, vă puteți converti browserul într-un editor de text. Puteți adăuga text și elimina text de oriunde din DOM.

Nu mai trebuie să inspectați elementul și să editați codul HTML. În schimb, accesați consola pentru dezvoltatori și tastați următoarele:

Acest lucru va face conținutul editabil. Acum puteți edita aproape orice și orice în DOM.

3. Găsiți evenimente asociate cu un element în DOM

În timpul depanării, trebuie să fiți interesat să găsiți ascultătorii de evenimente legați de un element din DOM. Consola pentru dezvoltatori facilitează găsirea acestora.

getEventListeners ($ (‘selector’)) returnează o matrice de obiecte care conține toate evenimentele legate de acel element. Puteți extinde obiectul pentru a vizualiza evenimentele:

Pentru a găsi ascultătorul pentru un anumit eveniment, puteți face așa ceva:

Aceasta va afișa ascultătorul asociat unui anumit eveniment. Aici eventName [0] este o matrice care listează toate evenimentele unui anumit eveniment. De exemplu:

… va afișa ascultătorul asociat evenimentului de clic al elementului cu ID-ul „prenume”.

4. Monitorizați evenimentele

Dacă doriți să monitorizați evenimentele legate de un anumit element din DOM în timp ce acestea sunt executate, puteți face acest lucru și în consolă. Există diferite comenzi pe care le puteți utiliza pentru a monitoriza unele sau toate aceste evenimente:

5. Găsiți momentul executării unui bloc de cod

Consola JavaScript are o funcție esențială numită console.time („labelName”) care ia ca argument un nume de etichetă, apoi pornește cronometrul. Există o altă funcție esențială numită console.timeEnd („labelName”) care ia de asemenea un nume de etichetă și termină cronometrul asociat cu acea etichetă.

De exemplu:

Cele două linii de cod de mai sus ne oferă timpul necesar de la pornirea temporizatorului până la terminarea temporizatorului.

Putem îmbunătăți acest lucru pentru a calcula timpul necesar pentru executarea unui bloc de cod.

De exemplu, să presupunem că vreau să găsesc timpul necesar pentru executarea unei bucle. Pot face așa:

6. Aranjați valorile unei variabile într-un tabel

Să presupunem că avem o serie de obiecte care arată ca următoarele:

Când introducem numele variabilei în consolă, aceasta ne oferă valorile sub forma unei matrice de obiecte. Acest lucru este foarte util. Puteți extinde obiectele și puteți vedea valorile.

Dar acest lucru devine dificil de înțeles atunci când proprietățile cresc. Prin urmare, pentru a obține o reprezentare clară a variabilei, le putem afișa într-un tabel.

console.table (variableName) reprezintă variabila și toate proprietățile ei într-o structură tabelară. Iată cum arată acest lucru:

7. Inspectați un element din DOM

Puteți inspecta direct un element din consolă:

8. Enumerați proprietățile unui element

Dacă doriți să enumerați toate proprietățile unui element, puteți face acest lucru direct din Consolă.

dir ($ (‘selector’)) returnează un obiect cu toate proprietățile asociate elementului său DOM. Puteți să le extindeți pentru a le vizualiza mai detaliat.

9. Obțineți valoarea ultimului dvs. rezultat

Puteți utiliza consola ca calculator. Și când faceți acest lucru, poate fi necesar să urmați un calcul cu un al doilea. Iată cum puteți extrage rezultatul unui calcul anterior din memorie:

Iată cum arată acest lucru:

10. Ștergeți consola și memoria

Dacă doriți să ștergeți consola și memoria acesteia, trebuie doar să tastați:

Apoi apăsați Enter. Asta este tot ce există.

Acestea sunt doar câteva exemple de ceea ce puteți face cu consola JavaScript a Chrome. Sper că aceste sfaturi vă vor ușura viața.

Vă mulțumim pentru lectură. Dacă ți-a plăcut această postare, te rog să o recomandi altor persoane de aici, pe Medium, apăsând butonul inimii de mai jos. Puteți găsi mai multe despre mine sau mă puteți urmări pe Twitter și aici pe Medium.