La ce servesc Chrome DevTools?

Chrome DevTools este un set de instrumente de creare și depanare a site-ului web încorporate în Google Chrome. Desigur, le putem folosi și în versiunea sa open source; Crom.

Este posibil să accesați instrumentele Chrome pentru dezvoltatori apăsând combinația de taste Ctrl + Shift + I, deasemenea trecând pe un element și făcând clic dreapta pe Inspectare.

Componente

Când deschidem Chrome DevTools, vedem că apare un panoul din dreapta paginii pe care o parcurgem. La rândul său, acest panou eEste împărțit în file corespunzătoare fiecăruia dintre instrumente. La rândul lor, instrumentele sunt împărțite în secțiuni.
Secțiunile sunt:

• Elemente: arată diferitele componente ale paginii.
• Consolă: vă permite să executați diagnostice în timpul dezvoltării sau să interacționați cu codul Javascript așa cum ați face cu terminalul Linux.
• Surse: facilitează depanarea codului Javascript și lucrul cu fișiere locale.
• Rețea: ajută la monitorizarea și îmbunătățirea performanței paginii.
• Cronologie: permite înregistrarea și explorarea diferitelor evenimente care apar în timpul vizitei la un site.
• Aplicație: investighează toate resursele încărcate; printre altele, baze de date IndexedDB sau Web SQL, stocare locală și de sesiune, cookie-uri, cache de aplicații, imagini, fonturi și foi de stil.
• Securitate: detectează problemele de securitate din cod.

Să vedem pentru ce putem folosi Chrome DevTools

Remediați ceea ce nu funcționează

S-a întâmplat cu fiecare dezvoltator. Scrieți codul, verificați dacă nu există erori și totuși, în momentul adevărului, pagina nu funcționează așa cum ar trebui. Instrumentul Console arată ce eroare apare la momentul execuției.

Reduceți timpul de încărcare

Dacă o pagină durează mult să se încarce, utilizatorul obosește și merge pe un alt site. Din fericire, era site-urilor web Flash și a prezentărilor lor animate s-a încheiat. Oricum, fila Rețele din Chrome DevTools facilitează aflarea elementelor care întârzie încărcarea. Putem repeta testul pentru diferite viteze de conexiune.

Modificați codul

În fila Elemente putem vezi elementele unei pagini, codul html aferent și proprietățile css. De asemenea, le putem schimba.

Putem edita textul unei pagini folosind comanda

document.designMode = 'on';

Încercați diferite dimensiuni de ecran

Tablete, smartphone-uri, televizoare inteligente, computere desktop. Lista dispozitivelor cu care navigăm pe internet este în creștere. Cu Chrome DevTools putem testați dacă o pagină arată bine la diferite dimensiuni.

Benchmarking

În management, termenul benchmarking înseamnă învățarea de la cele mai bune practici ale celor care fac la fel ca noi. Cu Chrome DevTolls, dacă ne place designul unui site web, putem vizualizați codul html și foile de stil CSS și copiați-le pe site-ul nostru.

Se obține Chrome DevTools

Chrome DevTools este disponibil pe browserele Google Chrome și Chromium. Cromul se află în depozitele distribuțiilor majore. Poate fi instalat și din magazine Fixaţi. În ceea ce privește Google Chrome, puteți ajunge aici. în format DEB și RPM