"Ispeziona elemento" è uno strumento di sviluppo nel browser Firefox che puoi utilizzare per tenere traccia del codice HTML su qualsiasi pagina web. I fogli di stile HTML e CSS di una pagina web possono essere modificati con "Ispeziona elemento". Puoi provare a modificare una pagina come preferisci e riportarla com'era semplicemente ricaricando la pagina web modificata.
Fare un passo
Parte 1 di 2: elementi di controllo
Passaggio 1. Aggiorna Firefox (opzionale)
È possibile che tu non sia in grado di accedere alle funzionalità discusse in questo articolo se stai utilizzando una versione precedente di Firefox. L'aggiornamento verrà installato automaticamente quando si verifica quale versione di Firefox si sta utilizzando.
Firefox 9 e le versioni precedenti non dispongono affatto dello strumento "Ispeziona elemento"
Passaggio 2. Fare clic con il pulsante destro del mouse su qualsiasi elemento della pagina Web
Puoi fare clic con il pulsante destro del mouse su qualsiasi immagine, testo, sfondo o elemento. Se il tuo mouse ha un solo pulsante, una combinazione di clic sinistro e tasto Ctrl risulterà in un clic destro.
Passaggio 3. Fare clic su "Ispeziona elemento" dal menu a discesa
Apparirà una barra degli strumenti nella parte inferiore della finestra. Apparirà anche un pannello sotto la barra degli strumenti e visualizzerà il codice HTML sulla pagina attiva.
Passaggio 4. Scopri le barre degli strumenti e i pannelli esistenti
Quando si utilizza "Ispeziona elemento", si apriranno diversi pannelli sotto la finestra del browser. Di seguito vengono descritti i nomi e le funzioni delle barre degli strumenti e dei pannelli in "Ispeziona elemento":
- Sulla riga superiore c'è la barra degli strumenti della casella degli strumenti. Ci sono diversi strumenti da trovare qui, ma ci concentreremo sul pulsante Ispettore a sinistra. Assicurati che questo pulsante sia attivo (indicato dal colore del pulsante che diventa blu quando è attivo) in questa guida.
- Al di sotto di questo, c'è una riga di breadcrumb di elementi HTML che indicano la posizione dell'elemento attualmente selezionato.
- Il riquadro sotto i prompt di navigazione mostra l'albero HTML o "Visualizzazione di markup" della pagina web. L'HTML dell'elemento selezionato verrà contrassegnato e centrato in questo riquadro.
- Il riquadro a destra mostra il foglio di stile CSS della pagina web corrente.
Passaggio 5. Seleziona un altro elemento
Quando la barra degli strumenti è aperta, puoi selezionare facilmente altri elementi. Ci sono tre modi per farlo:
- Passa il mouse su una riga di HTML per contrassegnare l'elemento selezionato (questa funzione richiede Firefox 34+). Fare clic sull'HTML per selezionare quell'elemento.
- Fare clic sullo strumento "Seleziona elemento" nell'angolo sinistro della barra degli strumenti: ha un'icona a forma di cursore sopra una casella. Sposta il cursore sulla pagina web per contrassegnare un elemento e fai clic per selezionarlo.
Passaggio 6. Traccia il codice HTML
Fare clic in un punto qualsiasi del riquadro HTML. Usa i tasti direzionali sinistro e destro sulla tastiera per passare da un codice all'altro (questa funzione richiede Firefox 39+). Questo metodo è utile per selezionare elementi troppo piccoli per essere selezionati con il cursore.
- L'HTML in grigio indica gli elementi che non sono visualizzati nella pagina. Gli elementi inclusi in questo sono commenti, come nodi e altri elementi nascosti dalla proprietà display CSS.
- Fare clic sulla freccia a sinistra della casella per mostrare o nascondere il contenuto. Per visualizzare l'intero contenuto, tieni premuto alt=""Immagine" o opzione mentre fai clic sulla freccia.</li" />
Passaggio 7. Individua l'elemento
Cerca il campo di ricerca (icona a forma di anello) nell'angolo all'estrema destra della riga breadcrumb. Fare clic per espandere il campo di ricerca e digitare il codice HTML che si desidera cercare. Durante la digitazione, verrà visualizzato un pop-up che mostra i risultati di ricerca corrispondenti. Fai clic su un elemento dai risultati della ricerca e scorri il riquadro HTML fino al codice che stai cercando.
Parte 2 di 2: Modifica HTML
Passaggio 1. Ricarica la pagina per ricominciare
Se non conosci gli strumenti di sviluppo di siti web, tieni presente che non apporti modifiche permanenti alle pagine che modifichi. Le tue modifiche vengono visualizzate sullo schermo solo finché non ricarichi o chiudi la pagina. Sentiti libero di sperimentare anche se non sai cosa accadrà.
Passaggio 2. Fare doppio clic sull'HTML da modificare
Fare doppio clic sull'HTML in linea. Digita il nuovo testo e premi invio per salvare le modifiche.
Passaggio 3. Fare clic e tenere premuto lo strumento nel breadcrumb per visualizzare più opzioni
Nota che la barra degli strumenti breadcrumb si trova tra l'albero HTML e la barra degli strumenti sopra di esso. Fare clic e tenere premuto uno strumento in questa riga per aprire più menu. Di seguito è riportato un suggerimento delle opzioni disponibili (non esaustivo):
- "Modifica come HTML" consente di modificare direttamente tutto il contenuto HTML dall'albero HTML invece di modificare ogni riga.
- "Copia HTML interno" copia l'intero contenuto all'interno del nodo, mentre "Copia HTML esterno" copia i contenuti e i nodi (come o
- "Incolla →" mostra diverse opzioni su dove incollare la copia, ad esempio prima del nodo o dopo il primo figlio del nodo.
- :hover,:active e:focus modificano l'aspetto dell'elemento quando l'utente interagisce. Gli effetti modificati sono definiti dal foglio di stile CSS (modificabile dal pannello a 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. Sposta la linea su e giù per l'albero e rilascia il pulsante del mouse quando la linea è dove vuoi.
Questa funzione richiede Firefox 39 e versioni successive
Passaggio 5. Chiudi la barra degli strumenti dello sviluppatore
Per chiudere l'intera finestra Ispeziona elemento, fai clic sul pulsante X nell'angolo in alto a destra della barra degli strumenti situata sopra il pannello CSS.
Suggerimenti
- Puoi anche aprire la barra degli strumenti dalle opzioni di menu nella parte superiore della finestra:
- Windows: Firefox → Sviluppatore Web → Attiva/disattiva strumenti
- Mac o Linux: Strumenti → Sviluppatore Web → Attiva/disattiva strumenti
- Firefox 40 ha la possibilità di nascondere il pannello CSS in modo da avere più spazio per modificare l'HTML. Cerca l'icona della freccia nell'angolo all'estrema destra della riga breadcrumb e a destra del campo di ricerca. Fare clic su questa icona per nascondere il pannello CSS e fare nuovamente clic per visualizzarlo.
- Puoi anche modificare i pannelli CSS, ma non sono elencati in questo articolo. Puoi trovare le istruzioni per modificare il codice CSS su Internet.
