Ispezionare l’elemento: Come cambiare qualsiasi pagina web su qualsiasi browser – Tutorial

Come cambiare qualsiasi pagina web su qualsiasi browser

Quando si visualizza una pagina web, c’è un mucchio di codice che non si vede, a meno che non si sappia dove guardare. Tutto è fatto di codice, dall’immagine di sfondo alla tipografia; dai video ai pulsanti. Tutto funziona grazie a complesse istruzioni. Ma come si fa a vedere il back-end?

Come si fa a togliere lo strato esterno per vedere il codice?

Lo strumento Inspect Element!

Parliamo di come usare lo strumento Inspect Element.

Che cos’è Inspect Element?

Inspect Element è uno degli strumenti per sviluppatori incorporato nei browser web Google Chrome, Firefox, Safari e Internet Explorer. Accedendo a questo strumento, si può effettivamente visualizzare – e anche modificare – il codice sorgente HTML e CSS dietro il contenuto web. Poi, mentre si apportano modifiche al codice, questi cambiamenti vengono visualizzati in tempo reale nella finestra del browser. E non preoccupatevi di rompere la pagina mentre scavate nel codice; le vostre modifiche avranno effetto solo per la durata della vostra sessione, e sono visibili solo sul vostro schermo. In altre parole, Inspect Element può darvi una sorta di esperienza ‘what if’ senza influenzare gli altri utenti.

Per il visitatore medio del sito, Inspect Element è poco più di una curiosità, forse degna di qualche minuto di distrazione. Ma per gli sviluppatori di siti, i programmatori e coloro che sono interessati a imparare la programmazione, questo strumento di sviluppo offre una serie di vantaggi.

Vantaggi di Inspect Element

Se vuoi capire veramente qualcosa, è bello poterlo sperimentare. Inspect Element ti dà il vantaggio di poter armeggiare con il codice che alimenta un sito e imparare come funziona.

Diciamo che avete appena iniziato a programmare. Visitate una pagina web, e vedete che c’è un elemento sul sito che cattura davvero la vostra attenzione. Forse è qualcosa che siete interessati a incorporare in una pagina su cui state lavorando; forse è qualcosa all’avanguardia che non avete mai considerato prima. In entrambi i casi, sei curioso di conoscere il codice. Così usi Inspect Element per vedere esattamente cosa sta succedendo.

Oppure, diciamo che stai codificando la tua pagina. Inspect Element ti permette di vedere in anteprima le modifiche senza implementarle effettivamente. Rende possibile identificare e riparare facilmente il codice rotto. Poiché Inspect Element ti dà il potere di cambiare qualsiasi testo sulla pagina, puoi rimuovere i dettagli personali dagli screenshot condivisi senza dover accendere il vecchio editor di foto.

E, se siete interessati a ottimizzare la vostra pagina per un migliore posizionamento nei motori di ricerca (un fattore chiave nel marketing digitale), l’utilizzo di Inspect Element sulle pagine dei concorrenti può darvi un’idea di quali parole chiave si stanno concentrando. Puoi anche usare lo strumento per testare la velocità di caricamento del tuo sito.

Questi sono solo alcuni esempi di ciò per cui puoi usare Inspect Element. Ma prima di poter fare una qualsiasi di queste cose, devi prima sapere come accedervi.

Accedere a Inspect Element in diversi browser

Inspect Element è abbastanza utile da essere incluso come strumento di sviluppo in tutti i principali browser web desktop. Ecco come accedere a Inspect Element in Google Chrome, Firefox, Safari e Internet Explorer.

Google Chrome

Per usare Inspect Element in Google Chrome, hai alcune opzioni diverse:

  • Clicca con il tasto destro del mouse su qualsiasi area della pagina web (incluse le aree vuote) e poi seleziona Inspect dal menu.
  • Accedere al menu delle impostazioni di Google Chrome (i tre punti verticali nell’angolo in alto a destra del pannello di controllo della finestra del browser). Nel menu a discesa, seleziona Altri strumenti, poi Strumenti di sviluppo.

Firefox

Similmente a Google Chrome, anche Firefox fornisce diverse opzioni di accesso a Inspect-Element:

  • Clicca con il tasto destro del mouse su qualsiasi area della pagina web (incluse le aree vuote) e poi seleziona Inspect dal menu.
  • Accedi al menu impostazioni di Firefox. Scegli Strumenti, poi seleziona Sviluppatore Web, e infine seleziona Ispettore.

Safari

Safari segue l’esempio, ma prima di poter utilizzare Elemento di ispezione, è necessario accedere al menu delle impostazioni di Safari. In alto a sinistra dello schermo, seleziona Preferenze, e poi spunta la casella che dice Mostra menu di sviluppo nella barra dei menu. Una volta fatto questo, usa le seguenti opzioni:

  • Clicca con il tasto destro del mouse su qualsiasi area della pagina web (incluse le aree vuote) e poi seleziona Inspect dal menu.
  • Accedi alla barra dei menu e clicca su Develop, poi seleziona Show Web Inspector dal menu a discesa.

Internet Explorer

Internet Explorer offre anche strumenti per sviluppatori che permettono la funzionalità Inspect-Element:

  • Clicca con il tasto destro sulla pagina e scegli Inspect Element dal menu a comparsa.
  • Accedi al pannello di controllo cliccando l’icona dell’ingranaggio in alto a destra della finestra del browser, o premendo Alt+X. Seleziona F12 Developer Tools nel menu a discesa.

Scorciatoie da tastiera

Puoi anche saltare i diversi menu e accedere direttamente a Inspect Element usando le scorciatoie da tastiera. Mentre sei su qualsiasi pagina web, inserisci i seguenti comandi da tastiera:

  • Mac: ⌘ + Shift + C
  • Windows/Linux: F12 o Ctrl + Shift + C

Tutorial: Come cambiare il testo su un sito web

Sapete cos’è l’elemento Inspect, quali vantaggi offre e come accedervi su ciascuno dei principali browser. Quindi cosa rimane?

Che ne dite di un facile esperimento che potete fare subito? Usando questa stessa pagina web, usiamo Inspect Element per giocare con il testo che puoi vedere sullo schermo. Per questo esempio, useremo Google Chrome.

Iniziamo evidenziando parte del testo. Per il bene di questo tutorial, usiamo la seguente frase:

Codificare è uno sballo!

Clicca con il tasto destro sull’area evidenziata. Seleziona Ispeziona dal menu a discesa.

Tutorial - Come usare l'elemento Ispeziona

Vedrai una nuova finestra aprirsi nel browser, sovrapposta alla pagina web. Questa finestra ti mostra il codice utilizzato nella pagina.

Tutorial - Come usare l'elemento Inspect
Tutorial - Come usare l'elemento Inspect

Digita qualcosa di nuovo. Puoi digitare quello che vuoi, ma noi lo terremo semplice:

Codificare è uno sballo assoluto!

Tutorial - Come usare l'elemento Inspect

Premere invio.

Tutorial - Come usare l'elemento Inspect

Le modifiche dovrebbero aggiornarsi nella pagina.

Congratulazioni, hai appena usato l’elemento Inspect per cambiare il testo.

Affonda

Modificare frasi e paragrafi con l’elemento Inspect è solo l’inizio; con una comprensione più profonda dei linguaggi di programmazione, puoi trasformare qualsiasi pagina web in qualsiasi cosa tu voglia. Dopo tutto, ogni pagina si basa su del codice, e quando si controlla quel codice, si controlla la pagina.

Quando si accede a una pagina web tramite il browser, ciò che si sta guardando è il culmine di molto codice, ma questo non è un motivo per essere intimiditi. Usando gli strumenti di sviluppo Inspect Element, puoi mettere ogni linea di quel codice sotto un microscopio, migliorando la tua comprensione nel processo. Inspect Element è uno strumento vitale per sviluppatori e studenti, e può essere anche molto divertente da usare.

Lettura consigliata

Quanto tempo ci vuole per imparare a codificare?

Come diventare un ingegnere software: Sette passi

Una lista di linguaggi di programmazione che ogni programmatore dovrebbe conoscere (o almeno conoscere)