"Inspect Element" és una eina per a desenvolupadors del navegador Firefox que podeu utilitzar per fer un seguiment del codi HTML a qualsevol pàgina web. Els fulls d'estil HTML i CSS d'una pàgina web es poden editar amb "Inspect Element". Podeu provar d'editar una pàgina com vulgueu i recuperar-la tal com era simplement recarregant la pàgina web editada.
Pas
Part 1 de 2: Comprovació d'elements
Pas 1. Actualitzeu Firefox (opcional)
És possible que no pugueu accedir a les funcions comentades en aquest article si utilitzeu una versió anterior de Firefox. L'actualització s'instal·larà automàticament quan comproveu la versió de Firefox que utilitzeu.
Firefox 9 i versions anteriors no tenen en absolut l’eina “Inspecciona l’element”
Pas 2. Feu clic amb el botó dret a qualsevol element de la pàgina web
Podeu fer clic amb el botó dret a qualsevol imatge, text, fons o element. Si el ratolí només té un botó, una combinació de fer clic amb el botó esquerre i la tecla Control donarà lloc a un clic dret.
Pas 3. Feu clic a "Inspecciona l'element" al menú desplegable
Apareixerà una barra d'eines a la part inferior de la finestra. També apareixerà un tauler a sota de la barra d'eines que mostrarà el codi HTML a la pàgina activa.
Pas 4. Conegueu les barres d'eines i els panells existents
Quan utilitzeu "Inspecciona l'element", s'obriran diversos panells a sota de la finestra del navegador. A continuació es descriuen els noms i les funcions de les barres d'eines i els panells a "Inspecciona l'element":
- A la fila superior hi ha la barra d'eines de la caixa d'eines. Hi ha diverses eines aquí disponibles, però ens centrarem en el botó Inspector de l’esquerra. Assegureu-vos que aquest botó estigui actiu (indicat pel color del botó que es torna blau quan està actiu) a tota aquesta guia.
- A sota, hi ha una línia de pa ratllat d’elements HTML que indiquen la ubicació de l’element seleccionat actualment.
- El tauler de les indicacions de navegació mostra l'arbre HTML o la "Visualització de marques" de la pàgina web. L'HTML de l'element seleccionat es marcarà i se centrarà en aquest panell.
- El tauler de la dreta mostra el full d'estil CSS de la pàgina web actual.
Pas 5. Seleccioneu un altre element
Quan la barra d'eines està oberta, podeu seleccionar fàcilment altres elements. Hi ha tres maneres de fer-ho:
- Passeu el cursor per sobre d'una línia d'HTML per marcar l'element seleccionat (aquesta funció requereix Firefox 34+). Feu clic a l'HTML per seleccionar aquest element.
- Feu clic a l'eina "Selecciona un element" a l'extrem esquerre de la barra d'eines: té una icona en forma de cursor sobre un quadre. Moveu el cursor a la pàgina web per marcar un element i feu clic per seleccionar-lo.
Pas 6. Traça el codi HTML
Feu clic a qualsevol lloc del tauler HTML. Utilitzeu les tecles direccionals esquerra i dreta del teclat per passar d'un codi a un altre (aquesta funció requereix Firefox 39+). Aquest mètode és útil per seleccionar elements massa petits per seleccionar-los amb el cursor.
- L’HTML en gris indica elements que no es mostren a la pàgina. Els elements inclosos en això són comentaris, com ara nodes, i altres elements amagats per la propietat de visualització CSS.
- Feu clic a la fletxa a l'esquerra del quadre per mostrar o amagar el contingut. Per mostrar tot el contingut, manteniu premut alt="Imatge" o opció mentre feu clic a la fletxa.
Pas 7. Localitzeu l'element
Cerqueu el camp de cerca (icona en forma de llaç) a l'extrem dret de la fila de pa ratllat. Feu clic per ampliar el camp de cerca i escriviu el codi HTML que voleu cercar. A mesura que escriviu, es mostrarà una finestra emergent que mostrarà els resultats de la cerca coincidents. Feu clic a un element dels resultats de la cerca i desplaceu-vos pel tauler HTML fins al codi que voleu cercar.
Part 2 de 2: Edició d'HTML
Pas 1. Torneu a carregar la pàgina per tornar a començar
Si no coneixeu les eines de desenvolupament de llocs web, tingueu en compte que no feu canvis permanents a les pàgines que editeu. Les modificacions només apareixen a la pantalla fins que no torneu a carregar o tancar la pàgina. No dubteu a experimentar encara que no sàpiga què passarà.
Pas 2. Feu doble clic a l'HTML per editar-lo
Feu doble clic a HTML en línia. Escriviu el text nou i premeu Retorn per desar els canvis.
Pas 3. Feu clic i mantingueu premuda l'eina al pa ratllat per mostrar més opcions
Tingueu en compte que la barra d’eines de pa ratllat es troba entre l’arbre HTML i la barra d’eines que hi ha a sobre. Feu clic i mantingueu premuda una eina d'aquesta fila per obrir més menús. A continuació es mostra un suggeriment de les opcions disponibles (no exhaustives):
- "Edita com HTML" us permet editar tot el contingut HTML de l'arbre HTML directament en lloc d'editar cada línia.
- "Copia HTML interior" copia tot el contingut dins del node, mentre que "Copia HTML exterior" copia el contingut i els nodes (com ara o
- "Enganxa →" mostra diverses opcions per enganxar la còpia, com ara abans del node o després del primer fill del node.
- : hover,: active i: focus canvien l'aparença de l'element quan l'usuari interactua. Els efectes canviats es defineixen des del full d’estils CSS (Editable des del tauler de la dreta).
Pas 4. Arrossegueu i deixeu anar
Per reorganitzar els elements del codi, feu clic i manteniu premut l'HTML fins que aparegui una línia de punts. Mou la línia cap amunt i cap avall de l'arbre i deixa anar el botó del ratolí quan la línia sigui on vulguis.
Aquesta funció requereix Firefox 39 i versions posteriors
Pas 5. Tanqueu la barra d'eines del desenvolupador
Per tancar tota la finestra Inspecciona l'element, feu clic al botó X a l'extrem superior dret de la barra d'eines situat a sobre del tauler CSS.
Consells
- També podeu obrir la barra d'eines des de les opcions del menú a la part superior de la finestra:
- Windows: Firefox → Desenvolupador web → Alternar eines
- Mac o Linux: Eines → Desenvolupador web → Alternar eines
- Firefox 40 té l'opció d'amagar el tauler CSS perquè tingueu més espai per editar HTML. Cerqueu la icona de fletxa a l'extrem dret de la fila de pa ratllat i a la dreta del camp de cerca. Feu clic a aquesta icona per amagar el tauler CSS i torneu a fer clic per mostrar-lo.
- També podeu editar panells CSS, però no apareixen en aquest article. Podeu trobar instruccions per editar el codi CSS a Internet.
