{"id":33467,"date":"2025-03-07T20:23:26","date_gmt":"2025-03-07T23:23:26","guid":{"rendered":"https:\/\/mastertrend.info\/?p=33467"},"modified":"2025-12-16T00:20:05","modified_gmt":"2025-12-16T03:20:05","slug":"trucchi-con-lelement-inspector","status":"publish","type":"post","link":"https:\/\/mastertrend.info\/it\/trucos-con-el-inspector-de-elementos\/","title":{"rendered":"Trucchi con Element Inspector: trasforma subito il tuo sito web! \u26a1\ufe0f"},"content":{"rendered":"

Trucchi per Element Inspector: 8 trucchi da conoscere assolutamente! \ud83d\udee0\ufe0f<\/h2>\n

L'Element Inspector nel tuo browser potrebbe sembrare uno strumento riservato agli sviluppatori, ma in realt\u00e0 puoi usarlo per fare cose davvero interessanti anche se non sai nulla di programmazione! \ud83d\ude80<\/p>\n

<\/p>\n

1 . <\/span>Scarica Immagini<\/h2>\n

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 \u00e8 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. \ud83e\udd14 Che succede?<\/p>\n

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. \u00c8 possibile ottenere qualsiasi risorsa di immagini da un sito web, in dimensioni reali, in tre semplici passaggi. \ud83d\udcf8<\/p>\n

A volte queste immagini sono bloccato per motivi di licenza<\/a> e copyright, quindi fate attenzione e attenetevi al fair use per evitare problemi legali. \u2696\ufe0f<\/section>\n

Passo 1<\/h3>\n

Fa fare clic con il tasto destro del mouse su<\/a> in qualsiasi punto della pagina e seleziona "Ispeziona elemento" o "Ispeziona". Puoi anche utilizzare la scorciatoia da tastiera specifica per l'ispettore all'interno del tuo browser. F12 funziona nella maggior parte dei browser<\/a> e sistemi operativi. Per questa demo utilizzo Firefox, ma i passaggi sono identici. \ud83d\uddb1\ufe0f<\/p>\n

Passo 2<\/h3>\n

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". \ud83d\uddbc\ufe0f<\/p>\n

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<\/a> dal tuo browser oppure premi Ctrl+R. \ud83d\udd04<\/p>\n

\"Salvataggio<\/figure>\n

Passo 3<\/h3>\n

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. \ud83d\uddbc\ufe0f\u2728<\/p>\n

\u00c8 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\u00e0 possibile salvarlo utilizzando il menu contestuale. \ud83d\udcbe<\/p>\n

\"Salvataggio<\/figure>\n

2 . <\/span>Scarica video<\/h2>\n

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

Passo 1<\/h3>\n

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. \ud83d\uddb1\ufe0f<\/p>\n

Passo 2<\/h3>\n

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. \ud83d\udd04<\/p>\n

\"Caricamento<\/figure>\n

Passo 3<\/h3>\n

I file video dovrebbero essere caricati in un elenco. Non \u00e8 possibile visualizzare un'anteprima immediata, ma \u00e8 possibile fare doppio clic su un file per aprirlo in una nuova scheda. Qui puoi cliccare con il tasto destro e scaricarlo. \ud83c\udfac<\/p>\n

\"Salvataggio<\/figure>\n

3 . <\/span>Cattura schermate a pagina intera<\/h2>\n

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<\/a>. \ud83d\udcf8<\/p>\n

Firefox ha uno strumento dedicato agli screenshot nel menu contestuale, quindi ti mostrer\u00f2 come farlo in Google Chrome<\/a> e altri browser. \ud83c\udf10<\/p>\n

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

\"Come<\/figure>\n

Premere Ctrl+Maiusc+P per aprire la finestra Esegui. Ho scritto Cattura cattura di schermo a grandezza naturale<\/a> <\/strong>in questa finestra. Cliccaci sopra. \ud83d\udcc4<\/p>\n

Dovrebbe apparire immediatamente una finestra "Salva con nome", che ti consentir\u00e0 di salvare lo screenshot della pagina intera in formato JPG. \ud83d\udcbe<\/p>\n

\"Salvataggio<\/figure>\n

4 . <\/span>Fai finta di essere al telefono<\/h2>\n

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. \ud83d\udcf1<\/p>\n

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\u00e0 Responsive Design (Ctrl+Maiusc+M). \ud83d\udda5\ufe0f<\/p>\n

\"Modifica<\/figure>\n

Avrai un elenco di dispositivi che puoi emulare e puoi anche regolare manualmente la dimensione del schermo<\/a>. Una volta scelto un dispositivo mobile, noterai che il tuo browser simula anche i gesti touch. \ud83d\udcf1\u2728<\/p>\n

5 . <\/span>Identificare le fonti<\/h2>\n

Questo suggerimento \u00e8 per i creativi, ma chiunque sia curioso di sapere qualcosa sui font utilizzati in un sito web pu\u00f2 utilizzare questo trucco. Puoi usare il strumento ispettore per identificare<\/a> e a volte anche scaricare i font. \ud83d\udd8b\ufe0f<\/p>\n

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

\"Identificare<\/figure>\n

Quindi premere Ctrl+R. I font renderizzati verranno caricati nell'elenco, probabilmente in formato WOFF. \u00c8 possibile scaricarli direttamente facendo doppio clic sul nome del font. Ad esempio, How-To Geek utilizza Roboto come font predefinito. \ud83d\udd24<\/p>\n

Se hai bisogno di informazioni pi\u00f9 dettagliate sul font, vai alla scheda "Elementi" e seleziona "Stili". Scorrere verso il basso fino alla propriet\u00e0 della famiglia di font e fare clic su di essa. Il testo corrispondente sar\u00e0 evidenziato sul sito web. In questo modo \u00e8 possibile identificare con precisione una fonte. \ud83c\udfa8<\/p>\n

\"Informazioni<\/figure>\n

6 . <\/span>Modificare il testo su una pagina (temporaneamente)<\/h2>\n

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\u00e9 non ricarichi la pagina). \ud83d\udee0\ufe0f<\/p>\n

Anche se non conosci la codifica, puoi modificare il testo di base di qualsiasi pagina web. Pu\u00f2 essere uno scherzo divertente da fare ai tuoi amici. \ud83d\ude09<\/p>\n

Evidenzia il testo sulla pagina che vuoi modificare e cliccaci sopra con il tasto destro del mouse. Quindi seleziona "Ispeziona" o "Ispeziona elemento".<\/p>\n

Il frammento di testo pertinente dovrebbe apparire nella scheda Elementi. Basta fare doppio clic e sostituire il testo con quello che si desidera. \u270f\ufe0f<\/p>\n

Chiudi l'Element Inspector e il gioco \u00e8 fatto! Tieni presente che ricaricando la pagina le modifiche verranno annullate. \ud83d\udd04<\/p>\n

7 . <\/span>Elimina elementi<\/h2>\n

Proprio come quando si modifica il testo, \u00e8 possibile anche eliminare elementi specifici da una pagina web. Anche in questo caso, le modifiche saranno effettive solo finch\u00e9 non ricarichi la pagina. \u274c<\/p>\n

Fai clic con il pulsante destro del mouse sull'elemento che desideri eliminare, quindi seleziona "Ispeziona" o "Ispeziona elemento".<\/p>\n

Passa il mouse sulle etichette \u201c<\/p>\n

\n

\u201d hasta que se resalte la totalidad del elemento. Luego simplemente presion\u00e1 la tecla Suprimir<\/a>. \ud83d\udd1a<\/p>\n

\"Rimozione<\/figure>\n

E cos\u00ec, \u00e8 sparito! \ud83d\udd75\ufe0f\u200d\u2642\ufe0f<\/p>\n

8 . <\/span>Identificare i valori del colore<\/h2>\n

Un altro consiglio per i creativi: puoi ottenere valori RGB ed HEX da qualsiasi colore su una pagina web<\/a> con lo strumento contagocce che troverete nell'ispettore elemento. \ud83c\udfa8<\/p>\n

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\u00e0 contrassegnate con il colore.<\/p>\n

Accanto alla propriet\u00e0 colore dovrebbe essere presente un cerchio o un quadrato colorato. Cliccaci sopra per aprire il selettore colore e premi l'icona contagocce accanto. \ud83d\udd8c\ufe0f<\/p>\n

\"Utilizzo<\/figure>\n

\u00c8 possibile trascinare il contagocce in qualsiasi punto della pagina per individuare i valori dei colori. Facendo clic sul contagocce la propriet\u00e0 verr\u00e0 automaticamente popolata con il valore di colore appena selezionato. Puoi copiarlo facilmente da qui. \ud83d\udccb<\/p>\n

\"Utilizzo<\/figure>\n
\n

Questi i suggerimenti sfiorano appena la superficie<\/a> di quanto sia effettivamente possibile utilizzando l'Ispettore Elementi. Se vuoi approfondire lo sviluppo web, ecco una guida per iniziare. \ud83d\udcbb<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Trucchi di Element Inspector: scopri 8 tecniche sorprendenti per personalizzare e migliorare facilmente la tua esperienza online \ud83d\udcbb\u2728<\/p>","protected":false},"author":1,"featured_media":89558,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ai_generated_summary":"","iawp_total_views":65,"jnews-multi-image_gallery":[],"jnews_single_post":{"format":"standard","override":[{"template":"1","parallax":"1","fullscreen":"1","layout":"right-sidebar","sidebar":"default-sidebar","second_sidebar":"default-sidebar","sticky_sidebar":"1","share_position":"top","share_float_style":"share-monocrhome","show_share_counter":"1","show_view_counter":"1","show_featured":"1","show_post_meta":"1","show_post_author":"1","show_post_author_image":"1","show_post_date":"1","post_date_format":"default","post_date_format_custom":"Y\/m\/d","show_post_category":"1","show_post_reading_time":"1","post_reading_time_wpm":"300","post_calculate_word_method":"str_word_count","zoom_button_out_step":"2","zoom_button_in_step":"3","show_post_tag":"1","show_prev_next_post":"1","show_popup_post":"1","show_comment_section":"1","number_popup_post":"1","show_author_box":"1","show_post_related":"1","show_inline_post_related":"0"}],"image_override":[{"single_post_thumbnail_size":"crop-500","single_post_gallery_size":"crop-500"}],"trending_post_position":"meta","trending_post_label":"Trending","sponsored_post_label":"Sponsored by","disable_ad":"0","subtitle":""},"jnews_primary_category":[],"jnews_social_meta":[],"jnews_review":[],"enable_review":"","type":"percentage","name":"","summary":"","brand":"","sku":"","good":[],"bad":[],"score_override":"","override_value":"","rating":[],"price":[],"jnews_override_counter":{"view_counter_number":"0","share_counter_number":"0","like_counter_number":"0","dislike_counter_number":"0"},"footnotes":""},"categories":[1435],"tags":[1582,1445,1558],"class_list":["post-33467","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","tag-browsertips","tag-evergreencontent","tag-techtips"],"_links":{"self":[{"href":"https:\/\/mastertrend.info\/it\/wp-json\/wp\/v2\/posts\/33467","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mastertrend.info\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mastertrend.info\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/it\/wp-json\/wp\/v2\/comments?post=33467"}],"version-history":[{"count":6,"href":"https:\/\/mastertrend.info\/it\/wp-json\/wp\/v2\/posts\/33467\/revisions"}],"predecessor-version":[{"id":104702,"href":"https:\/\/mastertrend.info\/it\/wp-json\/wp\/v2\/posts\/33467\/revisions\/104702"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mastertrend.info\/it\/wp-json\/wp\/v2\/media\/89558"}],"wp:attachment":[{"href":"https:\/\/mastertrend.info\/it\/wp-json\/wp\/v2\/media?parent=33467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mastertrend.info\/it\/wp-json\/wp\/v2\/categories?post=33467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mastertrend.info\/it\/wp-json\/wp\/v2\/tags?post=33467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}