L'eina de desenvolupament Inspect Element de Firefox us permet identificar el codi HTML de qualsevol cosa que vegeu a la vostra pàgina web. Un cop obertes aquestes eines, el full d’estil HTML i CSS que s’acompanya es poden editar completament. Proveu els canvis que vulgueu i, a continuació, actualitzeu la pàgina per tornar a l’aspecte previst de la pàgina web.
Passos
Part 1 de 2: inspecció d'elements
Pas 1. Feu clic amb el botó dret a qualsevol element de la pàgina web
Podeu fer clic amb el botó dret sobre les imatges, el text, els fons o qualsevol altre element. Si no teniu un ratolí de dos botons, feu clic amb el botó esquerre mentre manteniu premut Control.
Pas 2. Feu clic a Inspecciona l'element al menú desplegable
Hauria d'aparèixer 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 de la pàgina.
Pas 3. Identifiqueu les barres d'eines i els panells
Quan feu clic a Inspecciona l'element, s'obriran diversos panells a la part inferior de la finestra. A continuació, es detallen els seus usos i noms:
- La fila superior és la barra d'eines de la caixa d'eines. Té diverses eines per a desenvolupadors, però ens interessa Inspector a l'esquerra. Mantingueu aquesta opció seleccionada (ressaltada en blau) per a tota la guia.
- A sota de la barra d’eines, hi ha una única fila de pa ratllada d’elements HTML, que mostra el camí complet relacionat amb l’element seleccionat.
- El panell que hi ha a sota d'aquesta fila mostra l'arbre HTML o la "Vista de marques" de la pàgina. L'HTML de l'element que heu seleccionat es ressalta i se centra en aquest panell.
- El tauler de la dreta mostra el full d'estil CSS d'aquesta pàgina.
Pas 4. Seleccioneu un altre element
Un cop oberta la barra d'eines, és fàcil seleccionar un altre element. Aquí hi ha tres maneres de fer-ho:
- Passeu el cursor per sobre d'una línia d'HTML per ressaltar l'element corresponent (requereix Firefox 34+). Feu clic a l'HTML per seleccionar aquest element.
- Feu clic a l'eina Selecciona element a l'extrem esquerre de la barra d'eines: la icona és un cursor sobre un quadrat. Moveu el cursor per sobre de la pàgina per ressaltar els elements i feu clic per seleccionar-ne un.
Pas 5. Navegueu pel codi
Feu clic a qualsevol lloc del tauler HTML. Utilitzeu les fletxes esquerra i dreta del teclat per desplaçar-vos pel codi (requereix Firefox 39+). Això és útil per a elements massa petits per seleccionar-los a mà.
- El HTML gris fa referència a elements que no es mostren a la pàgina. Això inclou comentaris, determinats nodes, com ara, i elements que s'han amagat amb la propietat de visualització CSS.
- Feu clic a la fletxa situada a l'esquerra dels contenidors per expandir o amagar el seu contingut. Per ampliar tot el contingut, manteniu premut alt="Imatge" o opció mentre feu clic.
Pas 6. Cerqueu un element
Cerqueu la barra de cerca (icona de la lupa) a l'extrem dret de la fila de pa ratllat. Feu clic aquí per expandir-lo i, a continuació, escriviu el codi HTML que esteu cercant. A mesura que escriviu, apareixerà una finestra emergent que mostrarà els elements coincidents. Feu clic en un per seleccionar aquest element i desplaceu-vos al panell HTML fins al seu codi.
Part 2 de 2: Edició de l'HTML
Pas 1. Actualitzeu la pàgina per tornar a començar en qualsevol moment
Si sou nou a les eines per a desenvolupadors web, enteneu que no fan canvis permanents. Les vostres modificacions només seran visibles a la pantalla i només fins que tanqueu la pàgina o l'actualitzeu. No dubteu a experimentar encara que no estigueu segur de què passarà.
Pas 2. Feu doble clic a l'HTML per editar text
Feu doble clic a una línia d'HTML. Escriviu el text nou i premeu Retorn per desar els canvis.
Pas 3. Feu clic i mantingueu premuda una pa ratllada per obtenir més opcions
Recordeu que la barra d’eines Breadcrumb es troba entre l’arbre HTML complet i la barra superior. Feu clic i manteniu premut qualsevol dels elements d'aquesta fila per obrir un menú ampli. Aquí teniu una guia incompleta d’aquestes opcions:
- "Edita com a HTML" fa que el node i tot el seu contingut es puguin editar a l'arbre HTML, en lloc d'haver d'editar cada línia individualment.
- "Copia HTML interior" copia tot el contingut del node, mentre que "Copia HTML exterior" també copia el node (com ara o
- "Enganxa →" porta a diverses opcions per enganxar-les, com ara abans d'aquest node o després del primer fill del node.
- : hover,: active i: focus canvien l'aparença de l'element quan l'usuari hi interactua. L'efecte exacte el determina el full d'estil 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 discontínua. Moveu-lo cap amunt o cap avall per l'arbre i deixeu-lo anar quan la línia discontínua sigui al lloc desitjat.
Això requereix Firefox 39 o posterior
Pas 5. Tanqueu la barra d'eines del desenvolupador
Per tancar totes aquestes finestres elegants, només cal que premeu la X a l'extrem superior dret de la barra d'eines, a sobre del tauler CSS.
Consells
- També podeu obrir la barra d'eines amb aquestes opcions del menú superior:
- Windows: Firefox → Desenvolupador web → Alternar eines
- Mac o Linux: Eines → Desenvolupador web → Alternar eines
- Firefox 40 va introduir l’opció d’ocultar el panell CSS per donar-vos més espai mentre editeu HTML. Cerqueu la icona de fletxa a l'extrem dret de la fila Molla de pa, a la dreta de la barra de cerca. Feu clic a aquesta icona per amagar el tauler CSS i torneu a fer-hi clic per tornar-lo a expandir.
- El panell CSS també es pot editar, però això està fora de l’abast d’aquesta guia. Aquest article ensenya els conceptes bàsics de CSS.
