Trucchi per Element Inspector: 8 trucchi da conoscere assolutamente! 🛠️

L'Element Inspector nel tuo browser potrebbe sembrare uno strumento riservato agli sviluppatori, ma in realtà puoi usarlo per fare cose davvero interessanti anche se non sai nulla di programmazione! 🚀

1 . Scarica Immagini

Forse hai bisogno di scaricare un'immagine da un sito web. Provi a fare clic con il tasto destro e a premere "Salva immagine", ma scopri che l'opzione è disattivata o il pulsante "Salva immagine" non viene visualizzato. Altre volte potresti riuscire a scaricare solo una miniatura dell'immagine e non l'intero file. 🤔 Che succede?

Spesso gli sviluppatori disabilitano intenzionalmente questo pulsante "Salva immagine" oppure utilizzano un framework web che non consente di scaricare le immagini in questo modo. Ma esiste una soluzione pratica nell'ispettore Elementi. È possibile ottenere qualsiasi risorsa di immagini da un sito web, in dimensioni reali, in tre semplici passaggi. 📸

Passo 1

Fa fare clic con il tasto destro del mouse su in qualsiasi punto della pagina e seleziona "Ispeziona elemento" o "Ispeziona". Puoi anche utilizzare la scorciatoia da tastiera specifica dell'ispettore all'interno del tuo browser. F12 funziona sulla maggior parte dei browser e dei sistemi operativi. Per questa dimostrazione utilizzo Firefox, ma i passaggi sono identici. 🖱️

Passo 2

Nella finestra Element Inspector, fare clic sulla scheda "Rete". La scheda di rete dovrebbe avere "Immagini" come uno dei suoi sottomenu. Fare clic su "Immagini". 🖼️

Ora ricarica la pagina in modo che tutte le risorse di immagini vengano visualizzate nella scheda "Immagini". Utilizzare il Pulsante Aggiorna accanto alla barra degli indirizzi dal tuo browser oppure premi Ctrl+R. 🔄

Passo 3

Ed ecco fatto. L'intera libreria di immagini dovrebbe essere caricata nell'elenco. L'elenco viene aggiornato dinamicamente: man mano che vengono caricate nuove immagini sul sito web, queste appariranno anche qui. 🖼️✨

È possibile passare il mouse su un file per visualizzarne l'anteprima e le dimensioni. Fare doppio clic per aprire il file in una nuova scheda, dove sarà possibile salvarlo utilizzando il menu contestuale. 💾

2 . Scarica video

Proprio come le risorse di immagini, a volte i siti web non lo consentono scarico video direttamente. Ma è possibile scaricarli caricandoli nell'ispettore degli elementi. Una volta caricati nell'ispettore, è sufficiente fare doppio clic sul nome del file per aprirlo in una nuova scheda. 🎥

Passo 1

Aprire la finestra Element Inspector premendo la scorciatoia da tastiera F12 (dovrebbe funzionare sulla maggior parte dei sistemi). In alternativa, puoi fare clic con il pulsante destro del mouse in un punto qualsiasi della pagina web e selezionare "Ispeziona". Dovrebbe apparire la finestra Element Inspector. 🖱️

Passo 2

Fare clic sulla scheda "Rete" e quindi su "Media" per filtrare tutto tranne i file video. Ricarica la pagina. Cliccando sul pulsante di aggiornamento del browser o premendo Ctrl+R. 🔄

Passo 3

I file video dovrebbero essere caricati in un elenco. Non è possibile visualizzare un'anteprima immediata, ma è possibile fare doppio clic su un file per aprirlo in una nuova scheda. Qui puoi cliccare con il tasto destro e scaricarlo. 🎬

3 . Cattura schermate a pagina intera

Se vuoi salvare un'intera pagina web, puoi scaricarla rapidamente come file PDF o HTML. Ma cosa succede se si desidera effettuare uno screenshot normale dell'intera pagina? Qui Ti spiego come farlo. 📸

Firefox ha uno strumento dedicato agli screenshot nel menu contestuale, quindi ti mostrerò come farlo in Google Chrome e altri browser. 🌐

Per aprire lo strumento ispettore, fare clic con il pulsante destro del mouse in un punto qualsiasi della pagina o premere F12.

Premere Ctrl+Maiusc+P per aprire la finestra Esegui. Ho scritto Cattura screenshot a grandezza naturale in questa finestra. Cliccaci sopra. 📄

Dovrebbe apparire immediatamente una finestra "Salva con nome", che ti consentirà di salvare lo screenshot della pagina intera in formato JPG. 💾

4 . Fai finta di essere al telefono

La maggior parte dei siti web si carica in modo diverso a seconda del tipo di dispositivo e delle dimensioni dello schermo. Se vuoi ingannare il sito facendogli credere che stai utilizzando un dispositivo diverso (per qualsiasi motivo), puoi farlo facilmente con lo strumento di ispezione. 📱

In Chrome, apri la finestra Element Inspector dal menu contestuale o con F12. Quindi fare clic sulla piccola icona del computer portatile e del telefono nell'angolo in alto a sinistra. Firefox ha un pulsante simile, chiamato Modalità Responsive Design (Ctrl+Maiusc+M). 🖥️

Avrai un elenco di dispositivi che puoi emulare e puoi anche regolare manualmente la dimensione del schermo. Una volta scelto un dispositivo mobile, noterai che il tuo browser simula anche i gesti touch. 📱✨

5 . Identificare le fonti

Questo suggerimento è per i creativi, ma chiunque sia curioso di sapere qualcosa sui font utilizzati in un sito web può utilizzare questo trucco. Puoi usare il strumento ispettore per identificare e a volte anche scaricare i font. 🖋️

Per prima cosa, apri lo strumento Ispettore elemento. Quindi, fai clic sulla scheda "Rete" (potrebbe essere nascosta nel menu a discesa) e seleziona "Origine".

Quindi premere Ctrl+R. I font renderizzati verranno caricati nell'elenco, probabilmente in formato WOFF. È possibile scaricarli direttamente facendo doppio clic sul nome del font. Ad esempio, How-To Geek utilizza Roboto come font predefinito. 🔤

Se hai bisogno di informazioni più dettagliate sul font, vai alla scheda "Elementi" e seleziona "Stili". Scorrere verso il basso fino alla proprietà della famiglia di font e fare clic su di essa. Il testo corrispondente sarà evidenziato sul sito web. In questo modo è possibile identificare con precisione una fonte. 🎨

6 . Modificare il testo su una pagina (temporaneamente)

Sapevi che puoi modificare temporaneamente quasi tutto su una pagina web utilizzando l'ispettore? Questo strumento ti consente di modificare il codice che compone il sito web, quindi se conosci un po' di codice, puoi dare alla pagina l'aspetto che preferisci (solo sul tuo computer, finché non ricarichi la pagina). 🛠️

Anche se non conosci la codifica, puoi modificare il testo di base di qualsiasi pagina web. Può essere uno scherzo divertente da fare ai tuoi amici. 😉

Evidenzia il testo sulla pagina che vuoi modificare e cliccaci sopra con il tasto destro del mouse. Quindi seleziona "Ispeziona" o "Ispeziona elemento".

Il frammento di testo pertinente dovrebbe apparire nella scheda Elementi. Basta fare doppio clic e sostituire il testo con quello che si desidera. ✏️

Chiudi l'Element Inspector e il gioco è fatto! Tieni presente che ricaricando la pagina le modifiche verranno annullate. 🔄

7 . Elimina elementi

Proprio come quando si modifica il testo, è possibile anche eliminare elementi specifici da una pagina web. Anche in questo caso, le modifiche saranno effettive solo finché non ricarichi la pagina. ❌

Fai clic con il pulsante destro del mouse sull'elemento che desideri eliminare, quindi seleziona "Ispeziona" o "Ispeziona elemento".

Passa il mouse sulle etichette “

" finché non viene evidenziato l'intero elemento. Quindi premere semplicemente il tasto Canc. 🔚

E così, è sparito! 🕵️‍♂️

8 . Identificare i valori del colore

Un altro consiglio per i creativi: puoi ottenere valori RGB ed HEX da qualsiasi colore su una pagina web con lo strumento contagocce che troverete nell'ispettore elemento. 🎨

Fare clic con il pulsante destro del mouse in un punto qualsiasi della pagina e aprire l'Inspector. Per impostazione predefinita, la finestra Regole si apre nella scheda Ispettore. Scorri verso il basso per trovare le proprietà contrassegnate con il colore.

Accanto alla proprietà colore dovrebbe essere presente un cerchio o un quadrato colorato. Cliccaci sopra per aprire il selettore colore e premi l'icona contagocce accanto. 🖌️

È possibile trascinare il contagocce in qualsiasi punto della pagina per individuare i valori dei colori. Facendo clic sul contagocce la proprietà verrà automaticamente popolata con il valore di colore appena selezionato. Puoi copiarlo facilmente da qui. 📋

---

Questi i suggerimenti sfiorano appena la superficie di quanto sia effettivamente possibile utilizzando l'Ispettore Elementi. Se vuoi approfondire lo sviluppo web, ecco una guida per iniziare. 💻