Cum se configurează smartphone-uri și PC-uri. Portal informativ
  • Acasă
  • Fier
  • Folosind Consola pentru dezvoltatori JavaScript. Funcții convenabile din Consola pentru dezvoltatori Chrome despre care este posibil să nu știți

Folosind Consola pentru dezvoltatori JavaScript. Funcții convenabile din Consola pentru dezvoltatori Chrome despre care este posibil să nu știți

Salutare dragi prieteni. Panoul (consola) dezvoltatorului din browser este un instrument indispensabil pentru fiecare proprietar de site, cu ajutorul căruia puteți vizualiza rapid codul html și stilurile css ale paginii. Și, de asemenea, aflați despre erorile care au apărut la încărcarea site-ului și verificați site-ul pentru a răspunde.

Este lucrul cu cod html, stiluri css și adaptabilitate în panoul pentru dezvoltatori pe care îl vom lua în considerare astăzi. Acestea sunt instrumentele necesare pentru majoritatea sarcinilor.

Pentru o înțelegere generală a imaginii, să dăm un exemplu când s-ar putea să aveți nevoie de un panou pentru dezvoltatori.

Să presupunem că vii pe blogul meu și te interesează ce font folosesc sau colorez și așa mai departe. În general, poate fi orice element de pe site. Și ai vrut să faci același lucru pe site-ul tău.

Apoi te uiți prin panoul pentru dezvoltatori din browser la elementul necesar, unde poți vedea codul html și stilurile css pentru acesta.

Un alt caz de utilizare pentru panou este atunci când vrei să faci ceva pe site, dar nu știi încă cum va arăta.

În acest caz, puteți utiliza și panoul pentru dezvoltatori și puteți vedea cum va arăta ideea dvs. în browser. La urma urmei, tot ceea ce faci în panoul pentru dezvoltatori este vizibil doar pentru tine. Și pentru ca vizitatorii să vă vadă experimentele, va trebui să transferați stiluri și coduri în fișierele site-ului.

Deschiderea panoului webmasterului și cunoașterea interfeței

Panoul pentru dezvoltatori este prezent în fiecare browser modern. Pentru a-l deschide, trebuie să apăsați tasta F12 de pe tastatură.

Interfața panoului va diferi în diferite browsere, dar principiile de funcționare sunt similare.

Îmi place mai mult panoul din browserul Firefox.

Panoul în sine este împărțit în două jumătăți și conține file și instrumente pentru lucru.

În panou, puteți vizualiza codul HTML al paginii și îl puteți edita chiar acolo. Pentru a face acest lucru, selectați elementul dorit, apăsați butonul dreapta al mouse-ului și selectați din meniu „Editați cumHTML (Editați | ×la fel deHTML)".


Pentru a lucra cu stiluri, trebuie să mergeți la secțiunea panoului CSS, unde le puteți adăuga stiluri sau le puteți dezactiva pe cele existente eliminând caseta de selectare de lângă ele. Poți schimba totul.

Aici puteți afla și în ce fișier se află stilurile și pe ce linie.

Cum să analizați elementul html pe site și să aflați stilurile sale css

Să ne uităm la un exemplu pe al meu, care se află în fiecare articol.

Pentru a analiza elementul necesar, trebuie să faceți clic pe el cu butonul din dreapta al mouse-ului și să selectați elementul de meniu .


Întregul principiu de lucru cu codul, în panou, este că trebuie să selectați codul html în fereastra din stânga, iar în dreapta vor fi stiluri pentru acest element.

Și dacă totul este destul de simplu cu stiluri, atunci când lucrați cu cod html trebuie să înțelegeți integritatea acestuia. Adică, fiecare element are etichete în care se află. Acestea pot fi paragrafe, link-uri, imagini și așa mai departe. Cel mai adesea acestea sunt blocuri DIV care au o etichetă de deschidere < div> si inchidere div>... Și în panou totul este clar vizibil.


Când copiați sau editați, este important să înțelegeți unde începe și unde se termină blocul. Făcând cea mai mică greșeală aici, puteți rupe întregul aspect al șablonului.

În tutorialul video, mă voi opri asupra acestui punct în detaliu. Și dacă vrei să stăpânești rapid cunoștințele de bază de html și css, te sfătuiesc să mergi pe pagina "Este gratuit"și descărcați cursurile lui Evgeny Popov.

Cum să copiați codul html din panou în fișierele site-ului

Pot exista multe idei pentru utilizarea panoului pentru dezvoltatori. După ce am experimentat în panou, rezultatul obținut trebuie transferat în fișierele site-ului. Și aici există o oarecare dificultate. Cert este că panoul afișează cod html, iar majoritatea site-urilor moderne, inclusiv cele de pe platforma WordPress, sunt create folosind limbajul de programare PHP. Și acesta este ca cerul și pământul.

Deci, să ne uităm la un exemplu de copiere a unui banner de pe blogul meu și transfer pe alt site.

Pentru a face acest lucru, trebuie să deschideți panoul pentru dezvoltatori, examinând elementul dorit. După ce ați determinat începutul blocului DIV, apăsați butonul de vizor din dreapta și selectați elementul de meniu „Copiați externHTML "


Codul a fost copiat în clipboard și acum trebuie să-l lipiți acolo unde doriți să vedeți acest banner.

Acest proces este destul de greu de descris, așa că îmi propun să urmăresc un tutorial video în care totul este descris și prezentat în detaliu.

Cum să transferați stiluri din panoul dezvoltatorului în fișierele site-ului

După ce v-ați decis asupra codului și stilurilor, puteți începe să le transferați în fișierele site-ului. Atâta timp cât toate aceste modificări sunt vizibile doar pentru dvs. în browser și dacă reîmprospătați pagina, atunci toate modificările vor dispărea.

, pentru mine este mai convenabil. Deoarece atunci când lucrați în Notepad ++ există evidențierea codului și numerotarea liniilor. Și asta ajută foarte mult atunci când nu este ușor să copiați stilurile, ci să faceți modificări pe cele existente. Aceste stiluri sunt ușor de găsit după numărul de rând.

Cum să verificați capacitatea de răspuns a unui șablon în panoul pentru dezvoltatori

Pentru a comuta panoul în modul receptiv, trebuie să apăsați combinația de taste CTRL + SHIFT + M sau butonul din panoul pentru dezvoltatori, care este situat diferit în diferite browsere.



Concluzie

În acest articol, nu am luat în considerare toate instrumentele panoului de dezvoltatori, ci doar cele care pot fi utile și sunt folosite cel mai des de mulți webmasteri.

Utilizarea panoului și abilitățile în lucrul cu codul și stilurile sunt indispensabile atunci când lucrați cu site-uri și programe partenere.

Luați instrumentul în funcțiune, vă va fi util de multe ori.

Dacă aveți întrebări, voi fi bucuros să le răspund în comentarii.

Prieteni, vă doresc succes. Ne vedem în articole noi.

Salutări, Maxim Zaitsev.

Dacă evaluarea eficienței conținutului de pe pagina unei aplicații dintr-un magazin este o pădure întunecată pentru dvs., aruncați o privire la Consola pentru dezvoltatori Google Play. Vă voi explica cum să lucrați cu acest instrument.

Ce este Consola pentru dezvoltatori Google Play?

Odată ce fișierul apk al aplicației dvs. este gata, acesta trebuie adăugat în magazinul de aplicații Google Play.

Numărul de noi utilizatori nu este egal cu numărul de instalații din aceeași perioadă.

Două criterii sunt disponibile în raport: date despre sursa de trafic și date despre țară. Puteți genera un raport pentru o zi, o săptămână sau o lună; din păcate, nu puteți selecta o perioadă în mod arbitrar.

Raportul este prezentat ca o pâlnie.

  1. Vizitatori unici pe pagina aplicației din magazin.
  2. Numărul de utilizatori care, după vizualizare, au instalat aplicația.
  3. Numărul de cumpărători.
  4. Cumpărători repetați.

Datele sunt generate sub forma unei cohorte, adică doar acei utilizatori care au vizitat pagina și au instalat aplicația în această perioadă de timp vor fi incluși în raport pentru intervalul de timp selectat. Am scris despre ce este analiza de cohortă și de ce este importantă pentru cercetarea de marketing.


Valoarea Magazinului Play este rezultatele ASO, adică rezultatele optimizării și indexării paginii în magazinul de aplicații.

Practic, aceștia sunt utilizatori unici care au ajuns pe pagina dvs. de aplicație ca urmare a căutării sau vizualizării aplicațiilor în Magazinul Play.

3. Secțiunea „Evaluări și recenzii”

Subsecțiunea „Evaluări” este un raport care vă permite să vedeți dinamica evaluărilor pe zile, săptămâni, luni și să evaluați modul în care utilizatorii au perceput introducerea unei noi funcții.

„Recenzii” este un domeniu pentru activitățile managerului dumneavoastră de reputație, specialist SMM sau orice altă persoană care este responsabilă de comunicarea cu utilizatorii care vă scriu solicitări/reclamații în recenzii din magazin.

În această secțiune, sistemul Google Play Developers Console îți cere în mod voluntar-obligatoriu ceva și îți arată ce ai făcut deja. De exemplu, adăugați capturi de ecran pentru tablete dacă aplicația dvs. acceptă astfel de dispozitive.

5. Secțiunea „Date pentru Google Play”

Această secțiune completează raportul anterior, deoarece arată ceea ce este afișat pe pagina magazinului - limbă, descriere scurtă, descriere completă, pictogramă, grafică.

Este foarte recomandabil să adăugați un videoclip promoțional pe pagina Google Play, deoarece acest lucru afectează atractivitatea paginii dvs. pentru magazin și utilizator.

concluzii

Consola pentru dezvoltatori Google Play este un instrument care poate și ar trebui utilizat atunci când se comercializează o aplicație mobilă. Dacă înțelegeți Consola pentru dezvoltatori Google Play, veți înțelege:

  • modul în care magazinul vă percepe aplicația;
  • modul în care magazinul arată eficiența conținutului dvs. pe pagina aplicației.

De fapt, este o legătură importantă între dezvoltatorul produsului și utilizatorii săi.

Prima ilustrație este o fotografie a lui Freddie Fabrice din seria Renaissance.

|

Browserele moderne oferă instrumente de dezvoltare încorporate pentru JavaScript și alte tehnologii. Aceste instrumente includ o consolă, care este similară cu o interfață shell, precum și instrumente pentru inspecția DOM, depanare și analiza activității rețelei.

Consola poate fi folosită pentru a înregistra informații ca parte a procesului de dezvoltare JavaScript. De asemenea, consola vă permite să interacționați cu o pagină web prin executarea expresiilor JavaScript în contextul paginii. Practic, consola oferă posibilitatea de a scrie cod JavaScript și de a-l manipula după cum este necesar.

Acest tutorial vă va învăța cum să utilizați consola JavaScript în browser și vă va prezenta alte instrumente de dezvoltare încorporate pe care le puteți găsi utile.

Lucrul cu consola JavaScript în browser

Majoritatea browserelor web moderne care acceptă HTML și XHTML oferă acces implicit la consola pentru dezvoltatori, unde puteți lucra cu JavaScript într-o interfață asemănătoare terminalului. În această secțiune, veți afla cum să accesați consola în Firefox și Chrome.

browser Firefox

Aceste instrumente vă permit să inspectați și să editați elemente DOM, precum și să căutați obiecte HTML asociate cu o anumită pagină. DOM poate indica dacă o bucată de text sau o imagine are un atribut ID și poate determina valoarea acelui atribut.

În plus, în bara laterală sau sub panoul DOM, puteți găsi stiluri CSS care sunt utilizate într-un document HTML sau o foaie de stil.

Pentru a edita DOM-ul în timp real, faceți dublu clic pe elementul selectat. De exemplu, puteți încerca să întoarceți eticheta

v

.

Din nou, după reîmprospătare, pagina va reveni la aspectul anterior.

fila Rețea

Fila Rețea vă permite să monitorizați și să înregistrați solicitările de rețea. Această filă arată solicitările de rețea ale browserului, inclusiv solicitările de încărcare a paginii, timpul necesar pentru a servi cererile și detalii despre fiecare. Aceste date pot fi folosite pentru a optimiza performanța de încărcare a paginii și pentru a remedia interogările.

Puteți utiliza fila Rețea împreună cu Consola JavaScript. De exemplu, puteți începe să depanați o pagină folosind consola și apoi să deschideți fila Rețea și să vedeți activitatea în rețea fără a reîncărca pagina.

Design receptiv

Site-urile web responsive își adaptează rapid aspectul și senzația pe o varietate de dispozitive: telefoane mobile, tablete, desktopuri și laptopuri. Dimensiunea ecranului, densitatea pixelilor și răspunsul la atingere sunt factori de care trebuie să luați în considerare atunci când proiectați site-uri web receptive. De asemenea, este important să luăm în considerare principiile designului responsive pentru ca un site web să fie accesibil și eficient, indiferent de dispozitivul pe care este deschis.

Browserele moderne (inclusiv Firefox și Chrome) oferă modele pentru aderarea la principiile de design receptiv atunci când se dezvoltă site-uri web și aplicații. Aceste modele emulează comportamentul unui anumit dispozitiv, ceea ce vă permite să testați și să analizați toate funcțiile site-ului.

Puteți citi mai multe despre acest lucru în ghidurile browserului:

  • Modul de proiectare receptiv în Firefox

Concluzie

Acest tutorial oferă o privire de ansamblu rapidă asupra lucrului cu consola JavaScript în browserele web moderne. De asemenea, puteți găsi informații despre alte instrumente de dezvoltare utile aici.

Dacă sunteți un fan al jocurilor pe calculator, atunci cel mai probabil ați auzit că există o anumită consolă pentru dezvoltatori. Dar ce este? Cum să-l folosească? Se pare că există nu numai în jocurile pe calculator: de exemplu, poate fi găsit în fiecare browser de internet. Și poate fi incredibil de util nu numai pentru dezvoltatorii cărora le-a fost destinat inițial. În acest articol, vei afla, ca dezvoltator, ce poți face cu el, precum și ce beneficii le poate aduce jucătorilor.

Ce este?

Deci, în primul rând, bineînțeles, merită să vorbim despre ce este consola pentru dezvoltatori. Este un instrument dedicat dezvoltatorilor de software, respectiv. Când apelezi la o astfel de consolă, ai ocazia să introduci anumite comenzi care îți extind foarte mult capacitățile. Prin urmare, pentru a-l folosi corect, trebuie să știți exact cum să îl apelați, cum să îl utilizați, precum și ce comenzi pot fi scrise acolo și ce acțiuni să efectuați. La prima vedere, poate părea că consola pentru dezvoltatori este un instrument destul de simplu de utilizat, dar în realitate nu este. Veți avea nevoie de multă practică pentru a stăpâni consola și a obține rapid rezultatele dorite. Dar care ar trebui să fie rezultatul?

Este timpul să vorbim despre motivul pentru care există o consolă pentru dezvoltatori. Scopul său principal este de a depana software-ul care a fost creat de un programator. Aceasta înseamnă că, folosind această consolă, puteți găsi erori în program și le puteți remedia, precum și să forțați programul să facă ceea ce doriți să verificați absolut toate aspectele sale înainte de a-l lansa spre vânzare. În consecință, această consolă joacă un rol foarte important în munca unui inginer software.

Cel mai adesea, puteți întâlni o astfel de consolă în jocurile pe computer și browserele de internet și despre acestea vor fi discutate mai târziu în articolul nostru. În primul rând, veți învăța cum să deschideți consola pentru dezvoltatori într-un browser de internet și să înțelegeți ce vă poate oferi, apoi veți înțelege cât de important este să fiți într-un joc pe computer.

Cum deschid consola într-un browser?

Desigur, aștepți cu nerăbdare momentul în care poți afla de ce ai nevoie de această consolă în browserul de Internet pe care îl folosești în fiecare zi, dar mai întâi ar trebui să studiezi cum se deschide exact. Se pare că este disponibil în toate browserele și se deschide la fel aproape peste tot. Acest lucru se face fie folosind combinația tastelor Ctrl, Shift și I, fie apăsând numai tasta F12. Ar trebui să încercați să deschideți singur consola și, când reușiți, puteți continua să citiți articolul în continuare.

Ce oferă consola browserului?

Când apelați consola browserului pe ecran, este posibil să fiți la început surprins de tot ceea ce vedeți. Ideea este că consola este un instrument foarte multifuncțional și vi se va oferi o mare varietate de funcții. De exemplu, puteți vizualiza întregul cod al paginii, puteți căuta în fiecare element, puteți vedea stilurile acestuia și chiar și JavaScript-ul folosit pentru fiecare dintre elementele care vă interesează. Fiecare dezvoltator web care creează site-uri de cel puțin câteva luni știe despre o astfel de consolă și o folosește activ, deoarece acolo puteți chiar să găsiți erorile din cod și să încercați să le remediați. Alternativ, puteți încerca să schimbați stilurile și conținutul și să vedeți cum arată înainte de a face modificări finale. Cu toate acestea, această consolă poate fi utilă pentru utilizatorii obișnuiți datorită versatilității sale, dar acest lucru nu se întâmplă atât de des. În jocurile pe calculator, consola dezvoltatorului vă poate fi utilă mult mai des. „The Witcher 3”, „Minecraft”, „Contra” și multe alte jocuri populare au console pe care le poți folosi, iar despre asta vom discuta mai jos.

Consolă în jocurile pe calculator

Toată lumea știe despre existența trucurilor în multe jocuri pe calculator în care poți intra pentru a obține accesibilitate. De ce să te gândești la trucuri acum? Cert este că, în unele cazuri, rolul trucurilor este jucat de consola dezvoltatorului, deoarece vă deschide noi oportunități care nu sunt prevăzute de jocul în sine. Dar cum ajunge o astfel de consolă în jocuri? La fel ca în orice software! La urma urmei, jocurile sunt și programe, programatorii le-au creat în același mod, folosind toate instrumentele disponibile. Așa că au folosit consola pentru a testa toate funcțiile și caracteristicile jocului înainte de a anunța că munca la acesta a fost terminată. În unele cazuri, dezvoltatorii lasă consola în joc ca bonus, în altele refuză accesul la ea, astfel încât jucătorii să nu folosească funcții avansate. Ambele cazuri vor fi discutate ulterior.

Utilizarea consolei în jocuri

Unul dintre cele mai clare exemple de joc pe calculator care are acces direct la consola dezvoltatorului este Contra. Acest shooter în echipă este astăzi un exemplu exemplar în genul său. Și cu ajutorul consolei, puteți schimba aici culoarea, dimensiunea și forma reticulei, puteți adăuga roboți și puteți schimba multe alte funcții. Unele dintre ele sunt permise peste tot, altele sunt interzise, ​​așa că le poți folosi doar dacă creezi un joc și activezi utilizarea trucurilor prin consolă. Consola dezvoltatorului funcționează aproximativ în același mod în Minecraft și în multe alte jocuri populare.

Modificări

Cu toate acestea, nu toate jocurile oferă dezvoltatorilor acces la consola pentru dezvoltatori. „The Witcher (versiunea 1.31) 3” este cel mai clar exemplu al modului în care dezvoltatorii jocului, folosind funcțiile acestui instrument pentru a testa și depana jocul, au închis complet accesul la acesta. Din fericire, au existat oameni care au reușit să restabilească acest acces și au lansat o modificare specială, după ce ați descărcat și instalat-o pe computer, puteți utiliza consola dezvoltatorului, care vă va extinde semnificativ capacitățile.

Cum pot folosi consola pentru dezvoltatori pentru a transforma Google Chrome într-un editor de text? Care este scopul în care dobândește pictograma familiară pentru mulți de la jQuery $ ? Cum să scoți un set de valori pe consolă sub forma unui tabel destul de decent? Dacă răspunsurile la aceste întrebări nu vin în minte imediat, atunci fila Consolă din 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 în ea. Apropo, l-am folosit așa când tocmai am început să programez. Cu toate acestea, de-a lungul timpului, am câștigat experiență, am studiat puțin și am descoperit în mod neașteptat că consola Chrome poate face o mulțime de lucruri pe care nu le-am știut niciodată. Vreau să vă povestesc despre asta astăzi. Da, dacă nu citiți acum pe un telefon mobil, puteți încerca imediat pe toate.

1. Selectarea elementelor DOM

Dacă sunteți familiarizat cu jQuery, nu este pentru mine să vă spun despre importanța constructelor precum $ („. Clasa”)și $ (‘Id’)... Pentru cei care nu sunt la curent, le voi explica că vă permit să selectați elemente DOM specificând clasele și ID-urile alocate 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 ().

Vizualizați comenzi $ (‘TagName’), $ („. Clasa”), $ (‘# Id’)și $ (‘. Clasa #id’) returnează primul element DOM care se potrivește cu selectorul. În același timp, dacă jQuery este disponibil în document, „$” acestuia va suprascrie această funcționalitate de consolă.

Mai este o construcție aici: $$ ... Utilizarea lui arată ca $$ (‘tagName’) sau $$ („. Clasa”)... Vă permite să selectați toate elementele DOM care se potrivesc cu selectorul și să le plasați într-o matrice. Lucrul cu acesta nu este diferit de alte matrice. Pentru a selecta un anumit articol, vă puteți referi la el prin index.

De exemplu, comanda $$ (‘. ClassName’) ne va oferi o matrice a tuturor elementelor paginii cu numele clasei specificate atunci când o apelăm. Comenzi $$ (‘. ClassName’)și $$ (‘. ClassName’) va da acces, respectiv, la primul și al doilea element al tabloului rezultat.



Experimentarea cu comenzi $ și $$

2. Transformarea browserului într-un editor de text

V-ați prins vreodată să vă gândiți că ar fi bine să editați textul paginii web depanate chiar în browser? Dacă da, atunci vă va plăcea comanda prezentată mai jos.

Document.body.contentEditable = adevărat

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 element

Pe măsură ce depanați, este posibil să doriți să găsiți handlere de evenimente atașate elementelor. Este foarte ușor să faci asta folosind consola. Este suficient să folosiți următoarea comandă:

GetEventListeners ($ („selector”))

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



Managerii 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 afișa codul funcției de gestionare a evenimentelor. Aici numele evenimentului 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 rezultat, vom obține codul funcției asociate evenimentului clic element cu id Nume.

4. Monitorizarea evenimentelor

Dacă doriți să observați apariția unor evenimente legate de un anumit element DOM, consola vă poate ajuta cu asta. Iată câteva comenzi pe care le puteți folosi pentru a monitoriza evenimentele.

  • Echipă monitorEvents ($ („selector”)) vă permite să monitorizați toate evenimentele asociate cu elementul cu care selectorul se potrivește. Când are loc un eveniment, se face o intrare în consolă. De exemplu, comanda monitorEvents ($ (‘# firstName’)) va permite înregistrarea tuturor evenimentelor asociate cu un element al cărui identificator este - Nume.
  • 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. O astfel de comandă va afișa pe consolă informații despre apariția unui eveniment. De exemplu, comanda monitorEvents ($ (‘# firstName’), ‘click’) va afișa informații numai în funcție de eveniment clic element cu id Nume.
  • Echipă monitorEvents ($ (‘selector’), [‘eventName1’, ‘eventName3”,….]) vă permite să monitorizați mai multe evenimente selectate. Aici, o matrice de șiruri este transmisă funcției, care conține numele evenimentelor. De exemplu, o comandă ca aceasta: monitorEvents ($ (‘# firstName’), [‘click’, ‘focus’]) va imprima informațiile despre eveniment pe consolă clicși se concentreze pentru elementul cu id Nume.
  • Echipă unmonitorEvents ($ („selector”)) vă permite să opriți monitorizarea și înregistrarea evenimentelor în consolă.

5. Măsurarea timpului de execuție a unei bucăți de cod

O funcție a formularului este disponibilă în consola Chrome console.time (‘labelName’) care ia ca argument o etichetă și pornește un cronometru. O alta functie, console.timeEnd (‘labelName’), oprește cronometrul căruia îi este atribuită eticheta transmisă. Iată un exemplu de utilizare a acestor funcții:

Console.time ("myTime"); // 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ă cunoașteți timpul dintre pornirea și oprirea cronometrului. Puteți face același lucru în cadrul unui program JavaScript și puteți găsi timpul de execuție al unei bucăți de cod.

Să presupunem că trebuie să-mi dau seama durata unei bucle. O poți face astfel:

Console.time ("myTime"); // 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 matrice 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, o serie 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 sunt legate proprietățile elementelor similare. Pentru a face mai convenabil lucrul cu astfel de date, acestea pot fi convertite într-o 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. Așa arată.



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

7. Vizualizați codul articolului

Puteți sări rapid la codul articolului 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 ($ (‘# prenume’)) vă va permite să vizualizați codul elementului cu id Nume... Echipă inspectați ($$ (‘a’)) va deschide codul pentru al patrulea link care este prezent în DOM.
  • Vizualizați comenzi $0 , $1 , $2 vă permit să săriți rapid la articolele vizualizate recent. De exemplu, $0 va deschide codul pentru cel mai recent articol vizualizat și așa mai departe.

8. Listarea proprietăților elementului

Dacă trebuie să vizualizați lista de proprietăți ale elementelor, consola vă va ajuta și cu asta. Iată o comandă ca aceasta:

Dir ($ („selector”))

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

9. Apelarea ultimului rezultat primit

Consola poate fi folosită ca calculator, așa cum probabil toată lumea știe. Dar faptul că are instrumente încorporate care vă permit să utilizați rezultatele calculelor anterioare în comenzi este cunoscut de puțini. Prin construct $_ puteți prelua din memorie rezultatul expresiei anterioare. Așa arată:

2 + 3 + 4 9 // - Rezultatul însumării - 9 $ _ 9 // Ultimul rezultat primit 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 // Din nou obținem 9 - rezultatul calculului anterior

10. Ștergerea consolei și a memoriei

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

După ce apăsați Enter, consola goală va fi pregătită pentru noi experimente.
Asta e tot.

11, 12, 13, 14…

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

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

Top articole similare