Come ispezionare gli elementi della pagina web

I siti web sono costruiti a partire da linee di codice, ma i risultati sono pagine con immagini, video, font e altre caratteristiche. Per cambiare uno di questi elementi o vedere in cosa consiste, trovare la linea di codice che lo controlla. Per farlo, utilizzare uno strumento di ispezione degli elementi. Non è necessario scaricare uno strumento di ispezione o installare un componente aggiuntivo per il vostro browser web preferito. Invece, fai clic con il tasto destro del mouse sull’elemento della pagina, quindi seleziona Inspect o Inspect Element . Il modo in cui si accede a questo strumento varia tuttavia a seconda del browser.

Questo articolo utilizza il tasto destro del mouse per riferirsi all’azione del dispositivo del mouse su un PC Windows così come all’azione Control+click su un Mac.

Ispezionare gli elementi in Google Chrome

In Google Chrome, ci sono due modi per ispezionare una pagina web utilizzando il browser integrato Chrome DevTools:

  • Cliccare con il tasto destro del mouse su un elemento della pagina o in un’area vuota, quindi selezionare Inspect .
  • Andare nel menu Chrome , quindi selezionare Altri strumenti ; Strumenti di sviluppo .

Utilizzare Chrome DevTools per copiare o modificare il markup Hypertext Markup Language (HTML) e per nascondere o cancellare elementi fino a quando la pagina non viene ricaricata.

Quando Chrome DevTools si apre a lato della pagina, cambiarne la posizione, farla uscire dalla pagina, cercare i file della pagina, selezionare gli elementi dalla pagina per un esame più accurato, copiare i file e gli URL e personalizzare le impostazioni.

Ispezionare gli elementi in Mozilla Firefox

Mozilla Firefox ha due modi per aprire il suo strumento di ispezione, chiamato Inspector:

  • Cliccare con il tasto destro del mouse su un elemento della pagina web, quindi selezionare Inspect Element .
  • Dalla barra dei menu di Firefox selezionare Tools ; Web Developer ; Inspector .

Quando si sposta il puntatore sugli elementi in Firefox, Inspector trova automaticamente le informazioni del codice sorgente dell’elemento. Quando si seleziona un elemento, la ricerca al volo si ferma e si può esaminare l’elemento dalla finestra Inspector.

Cliccare con il tasto destro del mouse su un elemento per trovare i controlli supportati. Usare i controlli per modificare la pagina come markup HTML, copiare o incollare il markup HTML interno o esterno, mostrare le proprietà del Document Object Model (DOM), fare uno screenshot del nodo o eliminarlo, applicare nuovi attributi, vedere i Cascading Style Sheets (CSS) e altro ancora.

Ispezionare gli elementi in Safari

Ci sono un paio di modi per esaminare gli elementi del web in Safari:

  • Cliccare con il tasto destro del mouse su un elemento o uno spazio qualsiasi di una pagina web, quindi selezionare Inspect Element .
  • Andare al menu Sviluppare , quindi selezionare Show Web Inspector .

Se non si vede il menu Sviluppare, andare nel menu Safari e selezionare Preferenze . Nella scheda Avanzate selezionare la casella Mostra menu Sviluppa nella barra dei menu .

Selezionate i singoli elementi sulla pagina web per vedere la marcatura dedicata a quella sezione.

Ispezionare gli elementi in Internet Explorer

Un simile strumento di controllo degli elementi, a cui si accede abilitando gli Strumenti di sviluppo, è disponibile in Internet Explorer. Per abilitare i Developer Tools, premere F12 . Oppure, andare al menu Tools e selezionare Developer Tools .

Per visualizzare il menu Tools, premere Alt+X .

Per ispezionare gli elementi di una pagina web, cliccare con il tasto destro del mouse sulla pagina, quindi selezionare Inspect Element . Dallo strumento Internet Explorer Seleziona elemento, selezionare qualsiasi elemento della pagina per vedere il markup HTML o CSS. È anche possibile disattivare o abilitare l’evidenziazione degli elementi durante la navigazione nel DOM Explorer.

Come gli altri strumenti per l’ispezione degli elementi, usate Internet Explorer per tagliare, copiare e incollare elementi, oltre a modificare il markup HTML, aggiungere attributi, copiare elementi con stili allegati e altro ancora.

Ispezionare gli elementi in Microsoft Edge

Prima di poter ispezionare gli elementi in Microsoft Edge, è necessario abilitare l’ispezione. Ci sono due modi per abilitare l’ispezione:

  • Andare alla barra degli indirizzi e inserire about:flags . Nella finestra di dialogo, selezionare la casella di controllo Show View Source and Inspect Element nel menu contestuale .
  • Premere F12 , quindi selezionare DOM Explorer .

Per ispezionare un elemento, cliccare con il tasto destro del mouse su un elemento su una pagina web, quindi selezionare Inspect Element .

Deja un comentario