Amb les Chrome DevTools podem veure en l'acte els efectes en les modificacions en el codi
Chrome DevTools és un conjunt d'eines de creació i depuració de llocs web integrat a Google Chrome. Per descomptat, també podem usar-les en la seva versió de codi obert; Chromium.
És possible accedir a les eines de Chrome per a desenvolupadors prement la combinació de tecles Ctrl + Majúscula + I, també posant el punter sobre un element i amb el botó dret prement en Inspeccionar.
Components
Quan obrim Chrome DevTools veiem que apareix on panell a la dreta de la pàgina en la qual estem navegant. Per la seva banda, aquest panell istà dividit en pestanyes corresponents a cadascuna de les eines. Al seu torn les eines estan dividides en seccions.
Les seccions són:
- Elements: Mostra els diferents components de la pàgina.
- Console: Permet executar diagnòstics durant el desenvolupament o interactuar amb el codi Javascript com ho faries amb la terminal de Linux.
- Sources: Facilita depurar el codi Javascript i treballar amb arxius locals.
- Network: Ajuda a monitoritzar i millorar el rendiment de la pàgina.
- Timeline: Permet l'enregistrament i l'exploració dels diferents esdeveniments que tenen lloc durant la visita a un lloc.
- Application: Investiga tots els recursos que es carreguen; entre d'altres, bases de dades IndexedDB o Web SQL, emmagatzematge local i de sessió, galetes, memòria cau de l'app, imatges, fonts i fulles d'estils.
- Security: Detecta problemes de seguretat en el codi.
Vegem per què podem utilitzar Chrome DevTools
Corregir el que no funciona
A tot desenvolupador li ha passat. Escriure el codi, verificar que no hi hagi errors, i no obstant això a l'hora de la veritat la pàgina no funciona com hauria. L'eina Console ens mostra quin és l'error que s'està produint en el moment de l'execució.
Disminuir temps de càrrega
Si una pàgina triga molt de temps a carregar-se, l'usuari es cansa i va a un altre lloc. Afortunadament ja va passar l'època de les web en Flash i els seus intros animades. De totes maneres la pestanya Networks de la Chrome DevTools fa més fàcil descobrir que elements són els que retarden la càrrega. Podem repetir la prova per a diferents velocitats de connexió.
Modificar el codi
A la pestanya Elements podem veure els elements d'una pàgina, el codi html relacionat i les propietats css. També podem canviar-les.
Podem editar el text d'una pàgina amb l'ordre
document.designMode = 'on';
Provar diferents mides de pantalla
Tabletes, smartphones, smart TV, ordinadors d'escriptori. La llista de dispositius amb els quals naveguem per Internet és cada vegada més gran. Amb Chrome DevTools podem provar si una pàgina es veu bé en diferents mides.
Benchmarking
En Management el terme benchmarking significa aprendre de les millors pràctiques dels que fan el mateix que nosaltres. Amb Chrome DevTolls, si ens agrada el disseny d'un lloc web podem veure el codi html i els fulls d'estil css i copiar-les al nostre lloc.
Aconseguint Chrome DevTools
Chrome DevTools està disponible en els navegadors Google Chrome i Chromium. Chromium està en els repositoris de les principals distribucions. També pot instal·lar des de les botigues de espetec. Pel que fa a Google chrome pot aconseguir-se aquí. en format DEB i RPM