• Traducere

Cum să folosiți consola pentru dezvoltatori pentru a întoarce Google Chromeîn asemănare editor de text? Ce semnificație are pictograma, cunoscută pentru mulți de la jQuery? $ ? Cum pot afișa un set de valori în consolă, formatat ca un tabel destul de decent? Dacă răspunsurile la aceste întrebări nu vin imediat în minte, atunci fila Consolă dintre instrumentele pentru dezvoltatori Chrome nu s-a dezvăluit încă în toată gloria.

La prima vedere, avem în fața noastră o consolă JavaScript complet obișnuită, care este potrivită doar pentru afișarea jurnalelor de răspuns ale serverului sau a valorilor variabile. Apropo, așa l-am folosit când am început să programez. Cu toate acestea, de-a lungul timpului, am câștigat experiență, am învățat puțin mai mult și am descoperit în mod neașteptat că consola Chrome poate face o mulțime de lucruri despre care habar n-aveam. Vreau să vorbesc despre asta astăzi. Da, dacă nu citiți pe un telefon mobil acum, puteți încerca toate acestea imediat.

1. Selectarea elementelor DOM

Comenzile formularului $('tagName'), $('.class'), $('#id')Şi $(‘.class #id’) returnează primul element DOM care se potrivește cu selectorul. În plus, dacă jQuery este disponibil în document, „$”-ul său va fi suprascris de această funcționalitate de consolă.

Există un alt design aici: $$ . Utilizarea lui arată ca $$('tagName') sau $$('.class'). Vă permite să selectați toate elementele DOM care se potrivesc cu un selector și să le plasați într-o matrice. Lucrul cu acesta nu este diferit de alte matrice. Pentru a selecta un anumit element, îl puteți accesa prin index.

De exemplu, comanda $$(‘.className’) ne va furniza o matrice cu toate elementele paginii cu numele clasei specificat la apelarea acesteia. Echipe $$(‘.className’)Şi $$(‘.className’)  va da acces, respectiv, la primul și al doilea element al tabloului rezultat.

Experimentarea cu comenzi $ Şi $$

2. Transformă browserul într-un editor de text

Document.body.contentEditable=true
După executarea acestuia în consolă, documentul deschis în browser poate fi editat fără a fi nevoie să căutați fragmentul dorit în codul HTML.

3. Găsirea handlerelor de evenimente legate de un element

GetEventListeners($('selector'))
Ca urmare a execuției sale, va fi produsă o matrice de obiecte care conține o listă de evenimente la care elementul poate răspunde.

Manipulatori de evenimente

Pentru a găsi un handler pentru un anumit eveniment, puteți utiliza următoarea construcție:

GetEventListeners($('selector')).eventName.listener
Această comandă va imprima codul funcției de gestionare a evenimentelor. Aici eventName este o matrice care conține toate evenimentele de un anumit tip. De exemplu, în practică ar putea arăta astfel:

GetEventListeners($(‘#firstName’)).click.listener
Ca urmare, vom primi codul funcției asociate evenimentului clic element cu id prenume.

4. Monitorizarea evenimentelor

• Echipă monitorEvents($('selector')) vă permite să organizați monitorizarea tuturor evenimentelor asociate cu elementul căruia îi corespunde selectorul. Când are loc un eveniment, se face o intrare în consolă. De exemplu, comanda monitorEvents($(‘#firstName’)) vă va permite să înregistrați toate evenimentele asociate cu un element al cărui identificator este prenume.
• Echipă monitorEvents($(‘selector’),’eventName’) similar cu cel precedent, dar vizează un anumit eveniment. Aici, pe lângă selectorul de elemente, numele evenimentului este transmis și funcției. Această comandă vă va permite să afișați în consolă date despre apariția unui eveniment. De exemplu, comanda monitorEvents($(‘#firstName’),’click’) va afișa informații numai despre eveniment clic element cu id prenume.
• Echipă monitorEvents($(‘selector’),[‘eventName1’,’eventName3”,….]) vă permite să monitorizați mai multe evenimente selectate. Aici este transmisă funcției o matrice de șiruri, care conține numele evenimentelor. De exemplu, această comandă: monitorEvents($(‘#firstName’),[‘click’,’focus’]) va scoate informații despre eveniment către consolă clicŞi se concentreze pentru elementul cu id prenume.
• Echipă unmonitorEvents($('selector')) vă permite să opriți monitorizarea și înregistrarea evenimentelor în consolă.

5. Măsurarea timpului de execuție a unui fragment de cod

Console.time(„ora mea”); //Pornește un cronometru etichetat myTime console.timeEnd("myTime"); //Oprește temporizatorul etichetat myTime //Ieșire: myTime:123.00 ms
Exemplul de mai sus vă permite să aflați timpul dintre pornirea și oprirea unui cronometru. Puteți face același lucru în interiorul unui program JavaScript și puteți găsi timpul de execuție al unei bucăți de cod.

Să presupunem că trebuie să aflu durata unei bucle. O poți face astfel:

Console.time(„ora mea”); // Pornește un temporizator etichetat myTime for(var i=0; i< 100000; i++){ 2+4+5; } console.timeEnd("mytime"); // Останавливает таймер с меткой myTime //Вывод - myTime:12345.00 ms

6. Afișarea valorilor variabilelor sub formă de tabele

Var myArray=[(a:1,b:2,c:3),(a:1,b:2,c:3,d:4),(k:11,f:22),(a:1 ,b:2,c:3)]
Dacă îl afișați în consolă, se va dovedi structura ierarhică sub forma, de fapt, a unui şir de obiecte. Aceasta - oportunitate utila, ramurile structurii pot fi extinse prin vizualizarea conținutului obiectelor. Cu toate acestea, cu această abordare, este dificil de înțeles, de exemplu, cum se leagă proprietățile elementelor similare. Pentru a face mai convenabil lucrul cu astfel de date, acestea pot fi convertite în formă tabelară. Pentru a face acest lucru, utilizați următoarea comandă:

Console.table(variableName)
Vă permite să afișați o variabilă și toate proprietățile acesteia sub forma unui tabel. Iată cum arată.

Afișarea unei matrice de obiecte sub formă de tabel

7. Vizualizați codul elementului

• Echipă inspectați($('selector')) vă permite să deschideți codul elementului corespunzător selectorului din panou Elemente unelte Dezvoltator Google Chrome. De exemplu, comanda inspectați($(‘#firstName’)) vă va permite să vizualizați codul unui element cu un identificator prenume. Echipă inspectați($$(‘a’)) va deschide codul pentru al patrulea link care este prezent în DOM.
• Comenzile formularului $0 , $1 , $2 Vă permite să navigați rapid la articolele vizualizate recent. De exemplu, $0 va deschide codul celui mai recent element vizualizat și așa mai departe.

8. Afișarea unei liste de proprietăți ale elementelor

Dir($('selector'))
Returnează un obiect care conține proprietăți asociate cu element dat DOM. Ca și în alte cazuri similare, conținutul acestui obiect poate fi examinat prin vizualizarea structurii lui arborescente.

9. Apelarea ultimului rezultat primit

2+3+4 9 //- Rezultatul însumării este 9 $_ 9 // Ultimul rezultat obținut este afișat $_ * $_ 81 // Deoarece ultimul rezultat este 9, obținem 81 Math.sqrt($ _) 9 // Rădăcină pătrată din ultimul rezultat, care a fost 81 $_ 9 // Obținem din nou 9 - rezultatul calculului anterior

10. Curățarea consolei și a memoriei

Clar()
După ce apăsați Enter, consola curată va fi pregătită pentru noi experimente.
Asta este.

11, 12, 13, 14…

Consola pentru dezvoltatori vă permite să adăugați aplicațiile Android la Google.Play, să urmăriți statisticile acestora, să schimbați descrierea și să primiți rapoarte financiare despre vânzări aplicatii platite. Consola în sine este disponibilă la https://play.google.com/apps/publish

Dacă vă conectați la consolă pentru prima dată, atunci puteți începe cu setările, unde setați numele dezvoltatorului și drepturile de acces ale altor persoane.

Numele dezvoltatorului este numele public care apare în descrierea fiecărei aplicații din Google.Play. Deși poate fi schimbat cu ușurință, este mai bine să alegeți numele în mod responsabil, mulți utilizatori asociază aplicațiile cu numele dezvoltatorului.

Acolo trebuie indicată și adresa. e-mail si telefon. Ele nu sunt publicate și sunt necesare în scopuri interne.

În secțiunea „Conturi și drepturi de acces”, puteți invita orice număr de alți dezvoltatori și le puteți defini drepturile. Pentru ca utilizatorii să se poată conecta în consolă, trebuie să aibă cont Google. Jurnalul de activitate vă permite să urmăriți activitățile tuturor utilizatorilor.

Rapoartele financiare sunt disponibile numai pentru aplicațiile plătite. Mai întâi trebuie să faceți clic pe linkul „Configurați un cont de vânzător”, să indicați numele complet și parametrii contului sau cardului bancar la care vor fi trimiși banii câștigați. Acumulările apar în dolari și sunt transferate atunci când este atins pragul de 100 USD. Prin urmare, este mai bine să aveți unul în dolari card bancar, acest lucru se face în orice bancă, obțineți detaliile cardului de la aceeași bancă și indicați-le în profilul dvs. de vânzător. Astfel nu veți depinde de cursurile de schimb și veți primi exact suma pe care Google v-a creditat-o.

Pentru Rusia, prețul minim pentru aplicație este de 30 de ruble, maximul de 6 mii de ruble. Pentru Ucraina, prețurile variază de la 8 la 1650 grivne. De asemenea, rețineți că Google ia un comision de 30% din fiecare vânzare, așa că din prețul minim stabilit de 30 de ruble, veți primi de fapt doar 21 de ruble. Acest lucru trebuie luat în considerare la calcularea profitului.

Fiecare browser are propriul său instrument de dezvoltator este ceea ce mulți numesc pur și simplu o „consolă”, luați în considerare Consola în browser Chrome. Arata cam asa:

De fapt, Consola din browserul Chrome este un instrument cu ajutorul căruia nu numai că poți vizualiza conținutul paginii afișate de browser, ci și erori existente(ceea ce fac cel mai des testerii), dar este, de asemenea, mult mai ușor și mai rapid să corectați aceste erori (ceea ce fac cel mai adesea dezvoltatorii), să măsoare diverși indicatori și să manipulați pagina.

Cum se deschide consola în browserul Chrome:

- tasta F12;

- apăsarea simultană Tastele Ctrl+ Shift + I;

— RMB pe un element de pagină –> Vizualizare cod;

- meniul browser -> Instrumente suplimentare–> Instrumente pentru dezvoltatori.

Poate fi amplasat în partea de jos a paginii sau în lateral, sau poate fi deblocat într-o fereastră separată. Deci, să ne uităm la fiecare filă a consolei deschise separat.

În total, are 8 file, fiecare dintre ele afișând anumite date:

1 – Elemente(conține tot codul html/css al paginii și vă permite să selectați elemente pentru cercetare, precum și să le editați)

2 – Consolă(afișează prezența/absența erorilor/avertizărilor în cod)

3 – Surse(vă permite să efectuați operații pe codul paginii)

4 – Reţea(urmărește timpul de execuție a anumitor solicitări și solicitările în sine)

5 – Cronologie(măsoară timpul de încărcare a paginii)

6 – Profiluri(vă permite să creați JavaScript, profile CPU)

7 – Resurse ( vă permite să vizualizați anumite date salvate)

8 – Audituri(verifică anumiți parametri)

Acum să trecem prin fiecare dintre ele separat și mai detaliat:

Panou Elemente

Panoul Elemente arată aspectul paginii exact așa cum ar fi redat în browser. Puteți modifica vizual conținutul site-ului prin modificarea codului html/css din panoul de elemente. După cum probabil ați observat (sau poate nu), fereastra din stânga afișează un document html, iar fereastra din dreapta afișează css. Efectuând manipulări simple cu date, puteți modifica conținutul și designul paginii deschise. De exemplu, puteți modifica textul din fereastră dacă îl editați în corpul html și, de asemenea, puteți schimba fontul paginii prin modificarea valorii acestuia în câmpul css. Dar acest lucru nu va salva datele introduse, ci va ajuta pur și simplu la evaluarea vizuală a modificărilor aplicate. În plus, puteți vizualiza codul unui anumit element de pagină. Pentru a face acest lucru, faceți clic dreapta pe el și selectați comanda „Vizualizare cod”.

Panoul Elements are o caracteristică foarte interesantă. Puteți vedea cum ar arăta pagina deschisă pe un dispozitiv cu o extensie de ecran diferită. Făcând clic pe pictograma telefonului din stânga filei Elemente, se deschide o fereastră în care puteți modifica dimensiunea ecranului dorit, emulând astfel un anumit dispozitiv și controlând afișarea paginii de pe acesta. Arata cam asa:

Când faceți clic pe butonul Selectați modelul, va apărea un drop-down cu o selecție uriașă de dispozitive. Alege ceea ce ai nevoie - și voila! Pagina este afișată ca și cum ar fi un dispozitiv. În acest fel, panoul Elements poate fi folosit nu numai pentru a vizualiza sau edita o pagină, ci și pentru a emula dispozitive de afișare. Totul este unificat și disponibil în Chrome!

Panou Consolă

Cea mai populară filă pentru testeri, deoarece aici vedem erori găsite în cod la executarea scriptului. Se afișează și acest panou diverse feluri avertismente si recomandari (ca in poza de mai sus). Toate mesajele afișate în filă pot fi filtrate. Eroarea afișează și locația sa și făcând clic pe ea veți fi dus la fila Surse, unde eroarea va fi afișată în designul general al paginii.

Ștergeți câmpul filei Consolă (în cazul în care trebuie să eliminați mesajele despre greșelile anterioare) se poate face făcând clic pe pictograma cerc tăiată. Puteți filtra mesajele din consolă după tip - erori, avertismente, informații, ieșire standard, mesaje de depanare, corectate - selectând unul dintre opțiunile disponibile console.

Panou Surse

De regulă, această filă este locul în care programatorii depanează codul. Are 3 ferestre (de la stânga la dreapta):

1. Zonă fișierele sursă. Conține toate fișierele conectate la pagină, inclusiv JS/CSS.
2. Zona de text. Conține textul fișierelor.
3. Zona de informare și control.

În zona fișierelor sursă, elementul dorit este selectat, în zona text, este depanat direct, iar în zona de informații și control, puteți porni/opri codul depanat.

Panou Reţea

Funcția principală a acestei file este înregistrarea weblog. Oferă vizibilitate în timp real asupra resurselor solicitate și încărcate. Puteți identifica ce resurse sunt încărcate și procesate Mai mult timp pentru a ști ulterior unde și în ce mod poate fi optimizată pagina.

De asemenea, este de remarcat faptul că în această filă în modul Rânduri mari de solicitare puteți vizualiza cererile care sunt trimise către server, precum și răspunsurile care vin de la acesta, conținutul și caracteristicile acestora.

Panoul de performanță

Această filă este utilizată dacă este necesar revizuire completă timpul petrecut. Pe ce s-a cheltuit, cât de mult a fost necesar pentru un proces sau altul. Absolut toată activitatea este afișată aici, inclusiv încărcarea resurselor și executarea Javascript.

Acest panou face posibilă profilarea timpului de execuție și a utilizării memoriei unei aplicații web sau a unei pagini, ajutând astfel să înțelegem exact unde sunt cheltuite multe resurse și cum poate fi optimizat codul.

CPUprofiler oferă informații despre timpul petrecut cu executarea JavaScript.

Profiler heap afișează alocarea memoriei.

Profil JavaScript detalii unde exact timpul a fost petrecut la executarea scripturilor.

Proiectat pentru a examina elementele încărcate. Permite interacțiunea cu baza de date HTML5, Stocare locală, Cookie-uri, AppCache etc. În această filă puteți șterge cookie-urile prin deschidere această filăși făcând clic pe pictograma cerc tăiată

Panou Audituri

Acest panou funcționează ca un analizor de pagină în timp ce se încarcă. Ca rezultat al auditului, recomandările par să optimizeze încărcarea paginii și să mărească viteza de răspuns. Exemple de metode de optimizare pot fi văzute în fereastra de mai jos.

Panoul de securitate

Panoul de securitate afișează informații despre fiecare solicitare și evidențiază cele din cauza cărora site-ul nu primește în stare râvnita pictogramă verde.

În plus, puteți obține următoarele informații:

• despre verificarea certificatului, dacă site-ul și-a confirmat autenticitatea cu un certificat TLS;
• Conexiune TLS, indicând dacă site-ul dvs. utilizează protocoale moderne securizate;
• securitatea surselor secundare încărcate.

De fapt, instrumentele pentru dezvoltatori (Consola în browserul Chrome) sunt un lucru foarte util care ne poate veni adesea la îndemână nouă, testerilor. Chiar mai mult informatii utile pe site-ul https://developers.google.com/web/tools/chrome-devtools/

Cum să folosiți consola pentru dezvoltatori pentru a transforma Google Chrome într-un fel de editor de text? Ce semnificație are pictograma, cunoscută pentru mulți de la jQuery? $ ? Cum pot afișa un set de valori în consolă, formatat ca un tabel destul de decent? Dacă răspunsurile la aceste întrebări nu vin imediat în minte, atunci fila Consolă dintre instrumentele pentru dezvoltatori Chrome nu s-a dezvăluit încă în toată gloria.

La prima vedere, avem în fața noastră o consolă JavaScript complet obișnuită, care este potrivită doar pentru afișarea jurnalelor de răspuns ale serverului sau a valorilor variabile. Apropo, așa l-am folosit când am început să programez. Cu toate acestea, de-a lungul timpului, am câștigat experiență, am învățat puțin mai mult și am descoperit în mod neașteptat că consola Chrome poate face o mulțime de lucruri despre care habar n-aveam. Vreau să vorbesc despre asta astăzi. Da, dacă nu citiți pe un telefon mobil acum, puteți încerca toate acestea imediat.

1. Selectarea elementelor DOM

Dacă sunteți familiarizați cu jQuery, nu este pentru mine să vă spun despre importanța constructelor precum $('.class')Şi $('id'). Pentru cei care nu știu, vă permit să selectați elemente DOM specificând clasele și identificatorii alocați acestora. Consola pentru dezvoltatori are o funcționalitate similară. Aici „$”, totuși, nu are nimic de-a face cu jQuery, deși face în esență același lucru. Acesta este un alias pentru funcție document.querySelector().

Comenzile formularului $('tagName'), $('.class'), $('#id')Şi $(‘.class #id’) returnează primul element DOM care se potrivește cu selectorul. În plus, dacă jQuery este disponibil în document, „$”-ul său va fi suprascris de această funcționalitate de consolă.

Există un alt design aici: $$ . Utilizarea lui arată ca $$('tagName') sau $$('.class'). Vă permite să selectați toate elementele DOM care se potrivesc cu un selector și să le plasați într-o matrice. Lucrul cu acesta nu este diferit de alte matrice. Pentru a selecta un anumit element, îl puteți accesa prin index.

De exemplu, comanda $$(‘.className’) ne va furniza o matrice cu toate elementele paginii cu numele clasei specificat la apelarea acesteia. Echipe $$(‘.className’)Şi $$(‘.className’)  va da acces, respectiv, la primul și al doilea element al tabloului rezultat.

Experimentarea cu comenzi $ Şi $$

2. Transformă browserul într-un editor de text

Te-ai prins vreodată să te gândești că ar fi bine să editezi textul paginii web pe care o depanezi direct în browser? Dacă da, atunci vă va plăcea comanda prezentată mai jos.

Document.body.contentEditable=true

După executarea acestuia în consolă, documentul deschis în browser poate fi editat fără a fi nevoie să căutați fragmentul dorit în codul HTML.

3. Găsirea handlerelor de evenimente legate de un element

În timpul depanării, poate fi necesar să găsiți handlere de evenimente care sunt legate de elemente. Acest lucru este foarte ușor de făcut folosind consola. Tot ce trebuie să faceți este să utilizați această comandă:

GetEventListeners($('selector'))

Ca urmare a execuției sale, va fi produsă o matrice de obiecte care conține o listă de evenimente la care elementul poate răspunde.

Manipulatori de evenimente

Pentru a găsi un handler pentru un anumit eveniment, puteți utiliza următoarea construcție:

GetEventListeners($('selector')).eventName.listener

Această comandă va imprima codul funcției de gestionare a evenimentelor. Aici eventName este o matrice care conține toate evenimentele de un anumit tip. De exemplu, în practică ar putea arăta astfel:

GetEventListeners($(‘#firstName’)).click.listener

Ca urmare, vom primi codul funcției asociate evenimentului clic element cu id prenume.

4. Monitorizarea evenimentelor

Dacă doriți să observați apariția evenimentelor legate de un anumit element DOM, consola vă poate ajuta în acest sens. Iată câteva comenzi pe care le puteți folosi pentru a monitoriza evenimentele.

• Echipă monitorEvents($('selector')) vă permite să organizați monitorizarea tuturor evenimentelor asociate cu elementul căruia îi corespunde selectorul. Când are loc un eveniment, se face o intrare în consolă. De exemplu, comanda monitorEvents($(‘#firstName’)) vă va permite să înregistrați toate evenimentele asociate cu un element al cărui identificator este prenume.
• Echipă monitorEvents($(‘selector’),’eventName’) similar cu cel precedent, dar vizează un anumit eveniment. Aici, pe lângă selectorul de elemente, numele evenimentului este transmis și funcției. Această comandă vă va permite să afișați în consolă date despre apariția unui eveniment. De exemplu, comanda monitorEvents($(‘#firstName’),’click’) va afișa informații numai despre eveniment clic element cu id prenume.
• Echipă monitorEvents($(‘selector’),[‘eventName1’,’eventName3”,….]) vă permite să monitorizați mai multe evenimente selectate. Aici este transmisă funcției o matrice de șiruri, care conține numele evenimentelor. De exemplu, această comandă: monitorEvents($(‘#firstName’),[‘click’,’focus’]) va scoate informații despre eveniment către consolă clicŞi se concentreze pentru elementul cu id prenume.
• Echipă unmonitorEvents($('selector')) vă permite să opriți monitorizarea și înregistrarea evenimentelor în consolă.

5. Măsurarea timpului de execuție a unui fragment de cod

Funcția de vizualizare este disponibilă în consola Chrome console.time('labelName'), care ia o etichetă ca argument și pornește un cronometru. Încă o funcție console.timeEnd('labelName'), oprește temporizatorul căruia îi este atribuită eticheta transmisă. Iată un exemplu de utilizare a acestor funcții:

Console.time(„ora mea”); //Pornește un cronometru etichetat myTime console.timeEnd("myTime"); //Oprește temporizatorul etichetat myTime //Ieșire: myTime:123.00 ms

Exemplul de mai sus vă permite să aflați timpul dintre pornirea și oprirea unui cronometru. Puteți face același lucru în interiorul unui program JavaScript și puteți găsi timpul de execuție al unei bucăți de cod.

Să presupunem că trebuie să aflu durata unei bucle. O poți face astfel:

Console.time(„ora mea”); // Pornește un temporizator etichetat myTime for(var i=0; i< 100000; i++){ 2+4+5; } console.timeEnd("mytime"); // Останавливает таймер с меткой myTime //Вывод - myTime:12345.00 ms

6. Afișarea valorilor variabilelor sub formă de tabele

Să presupunem că avem o serie de obiecte ca aceasta:

Var myArray=[(a:1,b:2,c:3),(a:1,b:2,c:3,d:4),(k:11,f:22),(a:1 ,b:2,c:3)]

Dacă îl afișați în consolă, obțineți o structură ierarhică sub forma, de fapt, a unei matrice de obiecte. Aceasta este o caracteristică utilă; ramurile structurii pot fi extinse prin vizualizarea conținutului obiectelor. Cu toate acestea, cu această abordare, este dificil de înțeles, de exemplu, cum se leagă proprietățile elementelor similare. Pentru a face mai convenabil lucrul cu astfel de date, acestea pot fi convertite în formă tabelară. Pentru a face acest lucru, utilizați următoarea comandă:

Console.table(variableName)

Vă permite să afișați o variabilă și toate proprietățile acesteia sub forma unui tabel. Iată cum arată.

Afișarea unei matrice de obiecte sub formă de tabel

7. Vizualizați codul elementului

Puteți ajunge rapid la codul elementului din consolă folosind următoarele comenzi:

• Echipă inspectați($('selector')) vă permite să deschideți codul elementului corespunzător selectorului din panou Elemente Instrumente pentru dezvoltatori Google Chrome. De exemplu, comanda inspectați($(‘#firstName’)) vă va permite să vizualizați codul unui element cu un identificator prenume. Echipă inspectați($$(‘a’)) va deschide codul pentru al patrulea link care este prezent în DOM.
• Comenzile formularului $0 , $1 , $2 Vă permite să navigați rapid la articolele vizualizate recent. De exemplu, $0 va deschide codul celui mai recent element vizualizat și așa mai departe.

8. Afișarea unei liste de proprietăți ale elementelor

Dacă trebuie să vizualizați lista de proprietăți a unui element, consola vă va ajuta și în acest sens. Următoarea comandă este folosită aici:

Dir($('selector'))

Returnează un obiect care conține proprietăți asociate cu elementul DOM dat. Ca și în alte cazuri similare, conținutul acestui obiect poate fi examinat prin vizualizarea structurii lui arborescente.

9. Apelarea ultimului rezultat primit

Consola poate fi folosită ca calculator, așa cum probabil toată lumea știe. Dar puțini știu că are instrumente încorporate care vă permit să utilizați rezultatele calculelor anterioare în comenzi. Prin proiectare $_ puteți prelua din memorie rezultatul expresiei anterioare. Cam asa arata:

2+3+4 9 //- Rezultatul însumării este 9 $_ 9 // Ultimul rezultat obținut este afișat $_ * $_ 81 // Deoarece ultimul rezultat este 9, obținem 81 Math.sqrt($ _) 9 // Rădăcină pătrată din ultimul rezultat, care a fost 81 $_ 9 // Obținem din nou 9 - rezultatul calculului anterior

10. Curățarea consolei și a memoriei

Dacă trebuie să ștergeți consola și memoria, utilizați această comandă simplă:

După ce apăsați Enter, consola curată va fi pregătită pentru noi experimente.
Asta este.

11, 12, 13, 14…

Sincer vorbind, asta nu este tot. Am arătat doar câteva dintre capacitățile neevidente ale consolei Google Chrome. De fapt, sunt mult mai multe dintre ele. Sunt sigur că îmi poți extinde lista cu propriile tale descoperiri.

Sper că povestea mea te-a ajutat să înveți ceva util, care economisește timp despre consola Chrome, care merită să devină parte din arsenalul de zi cu zi al unui programator web.

Command API Corzi cromate DevTools conține număr mare funcții convenabile a executa sarcini simple: selectarea și verificarea elementelor DOM, afișarea datelor în format care poate fi citit, rularea și verificarea profilelor și monitorizarea evenimentelor DOM.

Nota: acest API este disponibil numai în interiorul consolei. Obțineți acces la linie de comandă API-ul din scripturile de pe pagină nu este posibil.

$_

$_ returnează valoarea ultimei expresii executate.

Exemplul de mai jos evaluează la expresia simplă (2 + 2). Apoi $_ este executat și i se atribuie aceeași valoare:

În acest exemplu, expresia executată conținea o matrice de nume. Executarea $_.length va da lungimea matricei, iar expresia $_ în sine va lua valoarea ultimei expresii executate, care este 4:

$0 – $4

Comenzile $0 , $1 , $2 , $3 și $4 funcționează ca referințe la ultimele 5 elemente DOM care au fost vizualizate în panoul Elemente sau la ultimele 5 obiecte JS din heap care au fost selectate în panoul Profiluri. $0 returnează ultimul element sau obiectul selectat, $1 returnează cel dinaintea acestuia și așa mai departe.

În exemplul de mai jos, un element de mediu de clasă este selectat în panoul Elemente. În consolă, $0 a luat aceeași valoare:

În imaginea de mai jos, este selectat un alt element de pe aceeași pagină. $0 se referă acum la acest element, iar $1 la cel anterior:

$(selector)

$(selector) returnează o referință la primul element DOM cu selectorul CSS specificat. Această funcție este o prescurtare pentru funcția document.querySelector().

Clic clic dreapta mouse-ul peste rezultat și selectați „Afișare în panoul de elemente” pentru a căuta elementul în DOM sau „Derulați la vizualizare” pentru a-l vedea pe pagină.

Nota: Dacă utilizați biblioteci precum jQuery care folosesc simbolul $, atunci funcționalitatea acelei biblioteci va fi folosită.

$$(selector)

$$(selector) returnează o matrice de elemente care conțin selectorul specificat. Această comandă este echivalentă cu apelarea document.querySelectorAll() .

Următorul exemplu folosește $$() pentru a crea o matrice cu toate elementele în document și returnează proprietatea src a fiecărui element:

Var imagini = $$("img"); pentru (fiecare în imagini) ( console.log(images.src); )

Nota: Apăsați Shift + Enter în consolă pentru a accesa linie nouă fără a rula scriptul.

$x(cale)

$x(cale) returnează o matrice de elemente care se potrivesc cu expresia XPath dată.

Acest exemplu va returna toate elementele

$x("//p")

Și acesta este toate elementele

Element care contine :

$x("//p[a]")

clar()

clear() șterge istoricul consolei.

Clar();

copie (obiect)

copy(obiect) copiează reprezentarea șir a obiectului specificat în clipboard.

Copiere ($0);

depanare (funcție)

Când această funcție este apelată, este apelat depanatorul, ceea ce vă permite să o executați pas cu pas în panoul Surse.

Depanare(getData);

Utilizați undebug(fn) pentru a termina depanarea sau interfața pentru a elimina toate punctele de întrerupere.

dir(obiect)

dir(obiect) afișează o listă cu toate proprietățile obiectului specificat. Această metodă este un înlocuitor pentru metoda console.dir().

Următorul exemplu arată diferența dintre apelarea document.body pe linia de comandă și utilizarea dir() pentru a afișa același element:

document.corp; dir(document.corp);

Pentru mai multe informații, consultați secțiunea console.dir() a API-ului Console.

dirxml(obiect)

dirxml(object) scoate o reprezentare XML a obiectului specificat. Această metodă este echivalentă cu metoda console.dirxml().

inspectați (obiect/funcție)

inspect(obiect/funcție) se deschide și selectează elementul sau obiectul specificat în panoul corespunzător: Elemente sau Profile.

Acest exemplu deschide document.body în panoul Elemente:

Inspectare(document.corp);

Când treceți o funcție, aceasta deschide documentul în panoul Surse.

getEventListeners (obiect)

getEventListeners(obiect) returnează toți ascultătorii de evenimente legați la obiectul specificat. Valoarea returnată este un obiect care conține matrice pentru toate tipurile de evenimente găsite (de exemplu, „clic” sau „keydown”). Elementele fiecărei matrice sunt obiecte care descriu ascultătorul fiecărui tip. De exemplu, următorul exemplu va imprima toți ascultătorii de evenimente ai obiectului document:

GetEventListeners(document);

Dacă un obiect are mai mult de un ascultător atașat, matricea conține elemente pentru fiecare dintre ele. De exemplu, aici doi ascultători de evenimente „mousedown” sunt atașați elementului #scrollingList:

Puteți vizualiza proprietățile fiecăruia dintre aceste obiecte:

chei (obiect)

keys(object) returnează o matrice de nume de proprietăți obiect. Pentru a obține valoarea proprietăților, utilizați values() .

Să presupunem că aplicația dvs. declară următorul obiect:

Var player1 = ( „nume”: „Ted”, „nivel”: 42)

Lăsați jucătorul1 să fie declarat global, apoi cheile(player1) și values(player1) vor scoate următoarele:

monitor (funcție)

Când suni functie specificataÎn consolă este afișat un mesaj care spune că această funcție a fost apelată cu argumentele corespunzătoare.

Funcția sum(x, y) ( return x + y; ) monitor(suma);

Pentru a anula, utilizați unmonitor(function) .

monitorEvents(obiect, )

Când unul dintre evenimentele specificate are loc pe obiectul specificat, obiectul Event este scris în consolă. Puteți specifica un anumit eveniment, o serie de evenimente sau unul dintre „tipurile” de evenimente. Exemple de mai jos.

Următoarea interogare monitorizează toate modificările în dimensiunea obiectului fereastră.

MonitorEvents(fereastră, „redimensionare”);

Această interogare monitorizează toate evenimentele de „redimensionare” și „defilare” de pe obiectul fereastră:

MonitorEvents(fereastră, [„redimensionare”, „defilare”)

De asemenea, puteți specifica unul dintre „tipurile” de evenimente disponibile din tabelul de mai jos:

De exemplu, această interogare monitorizează toate evenimentele de tip „cheie” pe un element selectat din panoul Elemente:

MonitorEvents($0, „cheie”);

Iată un exemplu de rezultat după tastarea caracterelor într-un câmp de text:

profile() și profileEnd()

Pentru a rula profilarea:

Profil(„Profilul meu”)

Pentru a termina:

ProfileEnd(„Profilul meu”)

Profilurile pot fi, de asemenea, imbricate:

Profil ("A"); profil ("B"); profileEnd("A"); profileEnd("B");

Rezultat:

Nota: Profilele pot rula simultan și nu trebuie să fie închise în ordinea în care au fost create.

tabel (date, )

Datele obiectului de ieșire în format tabel. De exemplu, pentru a afișa o listă de nume, trebuie să faceți următoarele:

Nume de var = ( 0: ( prenume: „John”, prenume: „Smith” ), 1: ( prenume: „Jane”, prenume: „Doe” ) ); tabel(nume);

undebug (funcție)

undebug(funcția) oprește depanarea funcției specificate.

Undebug(getData);

unmonitor(funcție)

unmonitor(function) oprește monitorizarea funcției specificate.

Unmonitor(getData);

unmonitorEvents(obiect, )

unmonitorEvents(object, ) oprește monitorizarea obiectului și evenimentelor specificate:

UnmonitorEvents(fereastra);

De asemenea, puteți opri monitorizarea evenimentelor individuale:

MonitorEvents($0, „mouse”); unmonitorEvents($0, "mousemove");

valori (obiect)

values(object) returnează o matrice care conține valorile tuturor proprietăților obiectului specificat.