Vegeu el codi HTML i CSS de qualsevol pàgina web
El lloc web està construït amb línies de codi , però el resultat són pàgines específiques amb imatges, vídeo, fonts i més. Per canviar un d'aquests elements o veure el que està format, heu de trobar la línia específica del codi que la controla. Podeu fer-ho amb una eina d'inspecció d'elements.
La majoria dels navegadors web no us permeten descarregar una eina d'inspecció o instal·lar un complement. En lloc d'això, us permeten fer clic amb el botó dret a l'element de la pàgina i triar Inspecció o Inspeccionar Element . Tanmateix, el procés pot ser una mica diferent al vostre navegador.
Inspeccioneu elements a Chrome
Les versions més recents de Google Chrome us permeten inspeccionar la pàgina d'algunes maneres, totes elles amb el dispositiu Chrome DevTools incorporat:
- Feu clic amb el botó secundari en alguna cosa a la pàgina (o en una àrea en blanc) i seleccioneu Inspeccionar
- Introduïu la drecera de teclat Ctrl + Maj + I
- Utilitzeu el menú de Chrome per accedir a l'opció Més eines> Eines per a desenvolupadors
Els DevTools de Chrome us permeten fer coses com ara copiar o editar fàcilment línies HTML o amagar o eliminar elements per complet (fins que la pàgina es torni a carregar).
Una vegada que DevTools s'obre al lateral de la pàgina, podeu canviar allà on es troba, posar-lo fora de la pàgina, buscar tots els fitxers de la pàgina, seleccionar elements de la pàgina per a l'examen específic, copiar fitxers i URL i fins i tot personalitzar un grup de la configuració.
Inspeccioneu elements a Firefox
Igual que Chrome, Firefox té diverses maneres diferents d'obrir la seva eina anomenada Inspector:
- Feu clic amb el botó dret a una àrea buida a la pàgina o seleccioneu un element i seleccioneu Inspeccionar element
- Introduïu Ctrl + Maj + T o Ctrl + Maj + I amb el teclat
- Al menú Firefox, feu clic a Desenvolupador > Inspector
- Al menú Eines , feu clic a Desenvolupador web> Inspector
A mesura que mou el ratolí sobre diversos elements a Firefox, l'eina Inspector troba automàticament la informació del codi font de l'element. Feu clic a un element i la "cerca a la marxa" s'aturarà i podeu examinar l'element des de la finestra Inspector.
Feu clic amb el botó dret a un element per trobar tots els controls admesos. Podeu fer coses com editar la pàgina com HTML, copiar o enganxar codi HTML intern o extern, mostrar propietats DOM, capturar captures de pantalla o eliminar el node, aplicar fàcilment nous atributs, veure tots els CSS de la pàgina i molt més.
Inspecció d'elements a Opera
Opera també pot inspeccionar elements, ja que és l'eina DOM Inspector idèntica a la de Chrome. A continuació s'explica com arribar-hi:
- Utilitzeu la drecera de teclat Ctrl + Majús + I
- Aneu al menú> Més eines> Mostra el menú del desenvolupador i obriu el menú a través de Menú> Desenvolupador> Eines del desenvolupador
- Des del menú del botó dret del ratolí a qualsevol element de la pàgina, seleccioneu Inspecció d'element
Inspecció d'elements a Internet Explorer
Una eina d'inspecció similar, anomenada Eines per a desenvolupadors, està disponible a Internet Explorer:
- Premeu F12 al teclat
- Utilitzeu l'opció Eines> F12 Developer Menu (premeu Alt + X si no veieu el menú Eines )
- Feu clic amb el botó dret a la pàgina i feu clic a Inspeccionar element
IE té una eina d' element Select en aquest nou menú que us permet fer clic a qualsevol element de pàgina per veure els detalls HTML i CSS. També podeu desactivar o activar el ressaltat de l'element mentre navegueu per la pestanya Explorador de DOM .
Igual que altres eines d'inspectors d'elements en els navegadors anteriors, Internet Explorer us permet tallar, copiar i enganxar elements, així com editar l'HTML, afegir atributs, copiar elements amb estils connectats i molt més.