10 sfaturi pentru consola Chrome pe care trebuie să le știți

Testarea unui site web sau a unei aplicații web și a interfeței sale de utilizator poate fi dificilă și consumatoare de timp, mai ales dacă nu utilizați instrumente adecvate de depanare, cum ar fi consola Chrome, cunoscută și ca instrumente pentru dezvoltatori Chrome.

Aproape toate browserele web au acum suport pentru instrumente pentru dezvoltatori, dar Google pare să fie mai hotărât să ofere cel mai bun mediu pentru un proces rapid de depanare.

Google a muncit din greu pentru ca Chrome DevTools să fie cât mai prietenos pentru dezvoltatori. Atât de mult încât întrebarea nu mai este ce poți face folosind aceste instrumente pentru dezvoltatori încorporate direct în browserul Google Chrome. Acum este o chestiune de cât de multe știi despre consola Chrome.

Există funcții specifice consolei Chrome care tind să fascineze fiecare dezvoltator. Unii cred că este cel mai bun instrument pentru dezvoltatori pentru a căuta modul în care este creată o parte a unui site web, inclusiv scripturile și stilul. Alți dezvoltatori îl consideră mai util în urmărirea etichetelor de linkuri, redarea browserului, solicitările și răspunsurile HTTP, punctele de rupere a paginii, testarea de noi funcții sau scripturi etc.

Acest articol abia va zgâria suprafața a ceea ce se poate face cu Consola. Pentru o prezentare completă a funcțiilor și a manualului, accesați pagina oficială pentru dezvoltatori Google.

Cum se deschide consola Chrome

Mijlocul convențional de accesare a Chrome DevTools este să faceți clic pe butonul Personalizare și controlați Google Chrome (cele trei puncte verticale din colțul din dreapta sus al barei de meniu a browserului Chrome), derulați în jos la mai multe instrumente și selectați instrumentele pentru dezvoltatori .

Comandă rapidă de la tastatură: Ctrl + Shift + I pentru Windows și Cmd + Opțiuni + I pentru Macintosh.

Alternativ, puteți accesa consola Chrome făcând clic dreapta pe orice element de pe un site web și selectând opțiunea Inspectați elementul.

Panoul consolei Chrome va apărea în partea de jos sau în partea de jos a ferestrei browserului dacă utilizați oricare dintre metodele menționate mai sus. Puteți debloca panoul consolei cromate într-o fereastră separată sau puteți modifica poziția de andocare făcând clic pe butonul Personalizare și controlați Devtools (cele trei puncte verticale din colțul din dreapta sus al panoului DevTools) și selectând poziția preferată lângă opțiunea Dock side . .

10 sfaturi pentru Consola Chrome pe care fiecare dezvoltator ar trebui să le cunoască

1. Simulați dispozitive mobile

Unul dintre cele mai importante aspecte ale testării site-urilor web este acela de a stabili cât de receptiv sunt design-urile paginii dvs. și punctele lor de ruptură cu privire la diferite dispozitive. Puteți folosi Chrome DevTools pentru a testa interogările media sau pentru a afla rezoluția la care s-ar rupe un site web, astfel încât să puteți seta unde să aplicați o interogare media prin simularea diferitelor dispozitive mobile.

Pentru a accesa modul dispozitiv de consolă Chrome, unde puteți simula diferite dispozitive mobile, faceți clic pe bara de instrumente de comutare a dispozitivului (pictograma mic pentru telefon și tabletă) din colțul din stânga sus al panoului consolei Chrome. Acest lucru ar schimba fereastra site-ului web în modul receptiv.

Comandă rapidă de la tastatură: Ctrl + Shift + M (Cmd + Shift + M).

Un set de instrumente care ar apărea în fereastra site-ului web v-ar permite să alegeți dispozitivele și rezoluția pe care doriți să le simulați, precum și să adăugați dispozitive mobile care nu sunt disponibile pe listă.

2. Inspectați activitatea rețelei

Folosind consola Chrome, puteți inspecta activitatea de rețea a unui site web pentru a vă asigura că toate resursele sunt descărcate și încărcate cu acuratețe. Și, de asemenea, pentru a inspecta proprietățile fiecărei resurse, cum ar fi dimensiunea imaginii, conținutul, antetele HTTP etc.

Faceți clic pe fila de rețea din fereastra DevTools. Acest lucru va deschide panoul de rețea cu un jurnal gol, deoarece instrumentul înregistrează activitatea în rețea doar când este deschis. Apăsați Ctrl + R (Cmd +R) sau reîncărcați site-ul web pentru a vedea activitatea din jurnalul de rețea a paginii.

Ar trebui să vedeți un tabel în josul paginii care arată un jurnal cronologic al activității în rețea a paginii dvs. Pentru a vedea mai multe informații despre fiecare resursă, faceți clic pe setările de rețea (pictograma roată din dreapta) și bifați caseta de lângă pentru a utiliza rândurile mari de solicitare a pictogramelor.

Puteți îmbunătăți performanța de încărcare a paginii prin depanarea erorilor din jurnalele de rețea pentru a rezolva probleme precum compresia fișierelor.

3. Limitarea rețelei

Similar cu simularea dispozitivelor mobile, puteți utiliza consola Chrome pentru a simula diferite viteze ale internetului. Această caracteristică poate fi utilă dacă doriți să testați performanța site-ului la o anumită viteză, de exemplu, pe un dispozitiv mobil 3G.

În bara de meniu a panoului Rețea, faceți clic pe online (accelerare) și selectați viteza de internet dorită. Pentru a adăuga un profil de rețea personalizat, faceți clic pe opțiunea de adăugare din meniul derulant și introduceți viteza de încărcare și descărcare preferată.

4. Adăugați un fragment de script

Puteți adăuga codul aleator preferat oriunde doriți în site-ul dvs. folosind funcția de fragmente. În loc să fie nevoie să scrieți același cod din nou și din nou, această funcție vă va permite să salvați un fragment și să accesați codul oricând doriți.

Faceți clic pe fila surse >> snippets >> snippets noi. Aceasta va crea un fișier nou în panoul de fragmente. Redenumiți fragmentul și scrieți blocul de cod JavaScript în fereastra de lângă panou. Pentru a salva fragmentul, faceți clic dreapta pe fișierul fragmentului, faceți clic pe Salvare ca și alegeți directorul preferat. Puteți accesa această funcție și prin meniul de comandă.

Folosiți Ctrl + Shift + P sau Cmd + Shift + P (Mac) pentru a deschide meniul de comandă, tastați fragmente și faceți clic pe creați fragmente noi .

Folosiți Ctrl + Enter sau Cmd + Enter pentru a rula codul sau faceți clic pe pictograma Run Snippet de sub fereastra de text.

5. Faceți capturi de ecran ale unui site web

Chrome DevTools vă permite să faceți capturi de ecran ale diferitelor părți ale unui site web. Deschideți meniul de comandă folosind Ctrl + Shift + P sau Cmd + Shift + P (Mac) și tastați screenshot . Selectați tipul de captură de ecran dorit. DevTool va capta automat și va descărca imaginea ca fișier .png în directorul implicit de descărcări.

6. Activați modul de editare a textului de conținut

Puteți edita conținutul paginii direct în fereastra browserului folosind consola Chrome. Faceți clic pe fila consolă și activați funcția folosind următorul cod.

document.body.contentEditable = 'adevărat';

Sau

document.designMode='on';

Apăsați tasta Enter pentru a activa funcția.

7. Selector de culori

Este mai ușor să manipulați culoarea pe site-ul dvs. folosind selectorul de culori, care are o gamă largă de instrumente. Pipeta vă permite să alegeți culorile din paginile web direct și să le setați pe proprietățile culorii. Puteți ajusta nuanța și opacitatea culorilor folosind selectorul de culori și, de asemenea, puteți converti între RGBA, HEX și HSLA cu simple clicuri.

Pentru a accesa selectorul de culori, selectați elementul pe care doriți să îi schimbați culoarea. Aceasta ar trebui să deschidă fila element și panoul foii de stil din dreapta. Găsiți proprietatea CSS a elementului și faceți clic pe caseta de culoare corespunzătoare pentru a deschide selectorul de culori.

8. Editați proprietatea CSS

Consola Chrome oferă acces ușor pentru a ajusta proprietatea CSS a oricărui element de pe un site web. Faceți clic pe butonul de selectare (Ctrl + Shift + C sau Cmd + Opțiuni + C), plasați cursorul pe elementul pe care doriți să îl editați pentru o prezentare generală a proprietăților elementului, faceți clic pe element.

Aceasta ar trebui să evidențieze rădăcina HTML a elementului sub panoul Element și proprietățile CSS din partea dreaptă a panoului DevTools. Accesați panoul Stiluri și derulați la proprietățile pe care doriți să le editați pentru modificări în timp real. Puteți vizualiza proprietățile complete ale oricărui stil prin Ctrl + făcând clic (Cmd + clic) pe proprietate.

9. Punct de rupere JavaScript

Este mult mai ușor să găsiți și să remediați erorile JavaScript folosind punctele de întrerupere decât metoda console.log (). Acest lucru se datorează faptului că, în această din urmă metodă, trebuie să accesați manual codul sursă și să introduceți instrucțiunile console.log() în codul relevant înainte de a reîncărca pagina pentru a revizui jurnalele. Punctele de întrerupere nu necesită neapărat să înțelegeți structura codului înainte de a vă putea întrerupe la codul relevant.

Faceți clic pe fila Sursă > pagină și selectați scriptul pe care doriți să îl depanați din folderul specific. Puteți seta puncte de întrerupere în Chrome DevTools făcând clic pe numărul liniei pe care doriți să întrerupeți scriptul pentru a întrerupe imediat ce se execută pe acea linie.

Ca alternativă, puteți utiliza instrumentul de ascultare a evenimentelor din panoul de depanare pentru a seta punctul de întrerupere cu referire la evenimentul specific pe care îl vizați în script, cum ar fi clicul mouse-ului sau redarea media. Actualizează pagina folosind Ctrl + R (Cmd + R) și folosește instrumentele panoului de depanare pentru a muta pașii.

10. Stocați elementul HTML ca variabilă JS globală

Indiferent dacă inspectați un obiect complex conectat la consolă sau un element DOM de pe un site, puteți stoca automat o referință la el la nivel global. Acest lucru este foarte convenabil la depanare, deoarece le puteți inspecta pur și simplu ca variabilă globală.

Faceți clic dreapta pe obiectul din consolă sau pe blocul HTML al unui element din fila Element și selectați „stocare ca variabilă globală” în meniul drop-down. Consola Chrome va stoca automat elementul ca variabilă globală și îl va face disponibil în consolă. Numele variabilei va fi „tempN”, unde N reprezintă de câte ori ați stocat variabile folosind această metodă. Prima variabilă va fi denumită în mod evident „temp1” și a doua „temp2”.

Concluzie

Competențele și viteza sunt atribute ale familiarității cu instrumentele lor, iar acest lucru se reduce profund cu Chrome DevTools. Cu cât aveți mai multe informații, cu atât mai bine și mai rapid este posibil să utilizați instrumentele care, la rândul lor, ar reduce timpul petrecut cu depanarea.

Ar putea merita mai mult să creditați un mic procent din timpul dvs. în această săptămână și apoi să citiți documentația, începând cu aspectele de depanare care de multe ori vă iau cel mai mult timp. Nu vom fi surprinși dacă sfaturile menționate mai sus pentru consolele cromate nu au menționat funcția ta preferată. Vă rugăm să ne spuneți despre ele în comentariul de mai jos.