Hai una domanda su come visualizzare il codice sorgente dell’elemento visivo sul tuo Chromebook? Per farlo puoi usare gli speciali DevTools nell’applicazione Google Chrome, o in qualsiasi pagina del browser. I DevTools sono un elenco di strumenti speciali per sviluppatori che sono integrati nel browser Google Chrome. Permettono agli utenti di modificare le pagine in movimento e tenere traccia di possibili problemi.
Come usare Inspect Element su Chromebook
Per i Chromebook il browser predefinito è Google, per aprire gli strumenti di sviluppo su questo dispositivo è necessario.
- Aprire la pagina che si desidera
- Clicca sui 3 punti nell’angolo in alto a destra dell’applicazione
- Selezionare “Altri strumenti“.
- Fare clic su “Strumenti per sviluppatori“.
Modi alternativi per accedere a questa funzione sono la pressione del tasto F12 o il clic destro sulla voce desiderata
Questa è un’istruzione universale che si applica alla maggior parte dei browser su Windows o su qualsiasi altro sistema.
Come usare Inspect Element su Mac o Iphone
È possibile fare lo stesso usando un Mac o anche un iPhone? Dovrete solo seguire alcuni semplici passi qui sotto:
Come usarlo su Mac
Se hai un Mac, la tua migliore scelta di browser è Safari. Aprire gli Strumenti di sviluppo in questo browser è leggermente diverso dallo stesso processo in Chrome o Firefox. Avrai bisogno di:
- Aprire il browser
- Clicca su Safari sul nome della scheda
- Selezionare “Preferenze“.
- Poi clicca sull’icona dell’ingranaggio Advanced, che si trova nella parte superiore dello schermo
- Seleziona la casella accanto a Show Develop menu in menu bar
Una volta fatto questo, Inspect Element sarà disponibile nelle vostre pagine web. Potete anche chiamarlo con CMD + Option + I.
Come usarlo su iPhone
Se vuoi controllare come appare la versione mobile della pagina web sul tuo iPhone usando la funzione Inspect Elements, dovrai prima abilitare il Web Inspector per il tuo dispositivo iOS:
- Vai a Impostazioni
- Seleziona l’applicazione Safari
- Scorri fino in fondo e clicca su “Menu avanzato“.
- Ora attiva la casella di controllo accanto a “Web Inspector“.
Devi anche abilitare il menu Sviluppo sul tuo Mac come indicato sopra. Una volta che hai abilitato queste funzioni sul tuo dispositivo iOS e sul Mac, dovresti essere in grado di vedere il menu Sviluppo nella parte superiore del tuo Mac. Dovete cliccare su di esso per vedere l’iPhone allegato e la pagina web aperta su di esso. Quando si passa a una pagina diversa, si passa anche alla finestra Web Inspector per quella pagina sul Mac
Cos’è il pannello elementare
La prima cosa da sapere è cos’è il pannello degli elementi. Se vuoi cambiare il design o qualsiasi elemento esterno della pagina, devi modificare il CSS o l’HTML. Puoi farlo usando uno strumento per sviluppatori chiamato Pannello degli elementi. Ti permetterà di controllare e modificare la tua pagina dal front-end. Alcuni degli elementi che puoi vedere lì sono :
- Informazioni sull’immagine, come la sua dimensione e la sua fonte
- Pannello CSS – questa opzione è usata per cambiare lo stile esterno della pagina. Qui puoi cambiare i parametri come font, dimensioni, colori
- Informazioni DOM o pannello DOM con questa opzione è possibile controllare l’aspetto della pagina. Puoi cambiare la posizione degli elementi e navigare completamente nei file HTML
- Il pannello della console presenta le nuove funzionalità sotto gli strumenti di sviluppo
- Ascoltatori di eventi degli elementi
- Commenti HTML
- Feedback
Controllo delle dimensioni renderizzate e naturali di un’immagine
Molto spesso hai bisogno di sapere informazioni su un’immagine in una pagina web, puoi “ispezionarla”. Questo ti dà la possibilità di conoscere la dimensione dell’immagine, per esempio. Per fare questo è necessario passare il puntatore del mouse su quella IMG mentre si è nel DOM Tree
Ispezionare una particolare immagine usata da un insieme di fonti (srcset)
Poi puoi controllare quale versione dell’immagine è stata caricata e qual è l’esatta fonte srcset. L’srcset aiuterà il browser a richiedere la versione dell’immagine con la dimensione più piccola, che è leggermente più grande dell’immagine reale. Questo serve per visualizzare un insieme di immagini con diverse risoluzioni tra cui il browser può scegliere. Per prima cosa, seleziona la voce IMG, poi controlla le informazioni $0.currentSrc nella console. Nota che puoi aumentare le caratteristiche delle immagini con srcset se hai bisogno di usare dispositivi con un DPI più alto.
