Lo strumento di sviluppo Inspect Element in Firefox ti consente di individuare il codice HTML per tutto ciò che vedi sulla tua pagina web. L'HTML e il foglio di stile CSS di accompagnamento sono completamente modificabili una volta aperti questi strumenti. Sperimenta con le modifiche che desideri, quindi aggiorna la pagina per tornare all'aspetto previsto della pagina web.
Passi
Parte 1 di 2: Ispezione degli elementi
Passaggio 1. Fare clic con il pulsante destro del mouse su qualsiasi elemento della pagina Web
Puoi fare clic con il pulsante destro del mouse su immagini, testo, sfondi o qualsiasi altro elemento. Se non disponi di un mouse a due pulsanti, fai clic con il pulsante sinistro del mouse tenendo premuto Ctrl.
Passaggio 2. Fare clic su Ispeziona elemento dal menu a discesa
Dovrebbe apparire una barra degli strumenti nella parte inferiore della finestra. Apparirà anche un riquadro sotto la barra degli strumenti, che mostra il codice HTML della pagina.
Passaggio 3. Identificare le barre degli strumenti e i riquadri
Quando fai clic su Ispeziona elemento, si apriranno diversi riquadri nella parte inferiore della finestra. Ecco una ripartizione dei loro usi e nomi:
- La riga superiore è la barra degli strumenti della casella degli strumenti. Questo ha diversi strumenti di sviluppo, ma siamo interessati a Inspector a sinistra. Mantieni selezionato (evidenziato in blu) per l'intera guida.
- Sotto la barra degli strumenti, c'è una singola riga di breadcrumb di elementi HTML, che mostra il percorso completo relativo all'elemento selezionato.
- Il riquadro sotto questa riga mostra l'albero HTML o "Visualizzazione di markup" della pagina. L'HTML per l'elemento selezionato viene evidenziato e centrato in questo riquadro.
- Il riquadro a destra mostra il foglio di stile CSS per questa pagina.
Passaggio 4. Seleziona un altro elemento
Una volta aperta la barra degli strumenti, è facile selezionare un altro elemento. Ecco tre modi per farlo:
- Passa il mouse su una riga di HTML per evidenziare l'elemento corrispondente (richiede Firefox 34+). Fare clic sull'HTML per selezionare quell'elemento.
- Fare clic sullo strumento Seleziona elemento all'estrema sinistra della barra degli strumenti: l'icona è un cursore su un quadrato. Sposta il cursore sulla pagina per evidenziare gli elementi, quindi fai clic per selezionare un elemento.
Passaggio 5. Navigare attraverso il codice
Fare clic in un punto qualsiasi del riquadro HTML. Usa le frecce sinistra e destra sulla tastiera per spostarti nel codice (richiede Firefox 39+). Questo è utile per elementi troppo piccoli per essere selezionati a mano.
- L'HTML grigio si riferisce agli elementi non visualizzati nella pagina. Ciò include commenti, alcuni nodi come, ed elementi che sono stati nascosti con la proprietà display CSS.
- Fare clic sulla freccia a sinistra dei contenitori per espanderne o nasconderne il contenuto. Per espandere tutti i contenuti, tieni premuto alt=""Immagine" o opzione mentre fai clic.</li" />
Passaggio 6. Cerca un elemento
Cerca la barra di ricerca (icona della lente di ingrandimento) all'estrema destra della riga Breadcrumbs. Fai clic qui per espanderlo, quindi digita il codice HTML che stai cercando. Durante la digitazione, apparirà un popup che elenca gli elementi corrispondenti. Fare clic su uno per selezionare quell'elemento e scorrere il riquadro HTML fino al suo codice.
Parte 2 di 2: Modifica dell'HTML
Passaggio 1. Aggiorna la pagina per ricominciare in qualsiasi momento
Se non conosci gli strumenti per sviluppatori web, sappi che non apportano modifiche permanenti. Le tue modifiche saranno visibili solo sullo schermo e solo finché non chiudi la pagina o la aggiorni. Non esitare a sperimentare anche se non sei sicuro di cosa accadrà.
Passaggio 2. Fare doppio clic sull'HTML per modificare il testo
Fare doppio clic su una riga di HTML. Digita il nuovo testo e premi Invio per salvare le modifiche.
Passaggio 3. Fare clic e tenere premuto un breadcrumb per ulteriori opzioni
Ricorda, la barra degli strumenti Breadcrumb è inserita tra l'albero HTML completo e la barra degli strumenti superiore. Fare clic e tenere premuto su uno degli elementi di questa riga per aprire un ampio menu. Ecco una guida incompleta a queste opzioni:
- "Modifica come HTML" rende il nodo e tutti i suoi contenuti modificabili nell'albero HTML, invece di dover modificare ogni riga singolarmente.
- "Copia HTML interno" copia tutti i contenuti del nodo, mentre "Copia HTML esterno" copia anche il nodo (come o
- "Incolla →" porta a diverse opzioni su dove incollare, ad esempio prima di questo nodo o dopo il primo figlio del nodo.
- :hover,:active e:focus modificano l'aspetto dell'elemento quando l'utente interagisce con esso. L'effetto esatto è determinato dal foglio di stile CSS (modificabile dal riquadro di destra).
Passaggio 4. Trascina e rilascia
Per riorganizzare gli elementi nel codice, fai clic e tieni premuto l'HTML finché non viene visualizzata una linea tratteggiata. Spostalo su o giù per l'albero e lascialo andare quando la linea tratteggiata si trova nel punto desiderato.
Ciò richiede Firefox 39 o successivo
Passaggio 5. Chiudi la barra degli strumenti dello sviluppatore
Per chiudere tutte queste fantasiose finestre, premi la X nell'angolo all'estrema destra della barra degli strumenti, sopra il riquadro CSS.
Suggerimenti
- Puoi anche aprire la barra degli strumenti con queste opzioni del menu in alto:
- Windows: Firefox → Sviluppatore Web → Attiva/disattiva strumenti
- Mac o Linux: Strumenti → Sviluppatore Web → Attiva/disattiva strumenti
- Firefox 40 ha introdotto l'opzione per nascondere il riquadro CSS per darti più spazio durante la modifica dell'HTML. Cerca l'icona della freccia all'estrema destra della riga Breadcrumb, a destra della barra di ricerca. Fare clic su questa icona per nascondere il riquadro CSS e fare nuovamente clic per espanderlo nuovamente.
- Anche il riquadro CSS è modificabile, ma questo va oltre lo scopo di questa guida. Questo articolo insegna le basi dei CSS.
