{"id":46522,"date":"2021-07-21T16:03:42","date_gmt":"2021-07-21T14:03:42","guid":{"rendered":"https:\/\/kinsta.com\/?p=97002"},"modified":"2023-04-14T07:10:30","modified_gmt":"2023-04-14T06:10:30","slug":"ispeziona-elemento","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/ispeziona-elemento\/","title":{"rendered":"Come Utilizzare lo Strumento \u201cIspeziona Elemento\u201d del Browser per Modificare le Pagine Web"},"content":{"rendered":"

Ci sono numerose e preziose risorse per imparare lo sviluppo web<\/a>: libri, video, corsi online<\/a>, e molto altro. Imparare a usare lo strumento Ispeziona Elemento (Inspect Element) del browser \u00e8 una di questi potenti strumenti. \u00c8 uno strumento di apprendimento inestimabile, sempre a portata di mano e accessibile.<\/p>\n

Con la funzione Inspect Element, potete vedere il funzionamento interno di qualsiasi sito web. Anche se potete vedere solo il markup frontend come HTML, CSS, e a volte JavaScript, potete comunque osservare come il team di sviluppo ha costruito un determinato sito web.<\/p>\n

In questo articolo, vi mostreremo come usare lo strumento Inspect Element e alcune delle tecnologie, caratteristiche e funzionalit\u00e0 correlate che incontrerete. Per prima cosa, diamo un’introduzione formale allo strumento Inspect Element.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Guarda la nostra Video Guida su come modificare un sito web con Ispeziona Elemento<\/a><\/strong><\/p>\n

<\/kinsta-video><\/p>\n

Introduzione allo Strumento Ispeziona elemento<\/h2>\n

Nei primi tempi del web, c’era solo un modo per leggere il codice di un sito web: la funzione Visualizza sorgente<\/b> (View Source).<\/p>\n

\"La
La pagina “View Source” di Kinsta.com.<\/figcaption><\/figure>\n

Questa situazione era prevalente prima che arrivassero i Cascading Style Sheets (CSS)<\/a> e il JavaScript<\/a>. Chi lavorava nello sviluppo web usava l’HTML per tutti gli elementi del sito, incluso il contenuto, il design e… beh, tutto.<\/p>\n

Una volta che il web ha iniziato a evolversi, e le tecnologie sottostanti sono aumentate di potenza, \u00e8 stato necessario sviluppare strumenti migliori. Firebug di Firefox<\/a> era una prima soluzione per scoprire come un sito web si comportava e funzionava sotto il cofano:<\/p>\n

\"I
I loghi di Firefox e Firebug.<\/figcaption><\/figure>\n

Dopo un po’, questa funzionalit\u00e0 ha trovato la sua strada in quasi tutti i browser. Oggi conosciamo questa funzionalit\u00e0 con il nome di Inspect Element o Ispeziona Elemento (a seconda della lingua del vostro browser):<\/p>\n

\"Lo
Lo strumento Inspect Element sul sito di Kinsta.<\/figcaption><\/figure>\n

\u00c8 un modo potente per vedere la tecnologia sottostante il codice di un sito web. Come tale, potete trovarlo in alcuni luoghi diversi: attraverso un menu della barra degli strumenti, facendo clic con il tasto destro su una pagina e selezionando l’opzione, o con una scorciatoia da tastiera.<\/p>\n

Mentre lo strumento Inspect Element si concentra principalmente sull’HTML e il CSS di una pagina, c’\u00e8 molto altro che potete fare con esso.<\/p>\n\n

Un Tour del Pannello Ispeziona Elemento<\/h3>\n
\"DevTools
DevTools di Brave.<\/figcaption><\/figure>\n

Lo strumento Inspect Element \u00e8 molto pi\u00f9 di un modo per visualizzare il codice. Esistono spesso diversi pannelli a cui accedere:<\/p>\n