Cos’è Inspect Element e Developer Tools?
Inspect element (o Developer Tools) è come lo strumento magico dei browser moderni. Basta cliccare con il tasto destro del mouse su qualsiasi pagina, cliccare su ispeziona e voilà! Qui, vedrete una descrizione dettagliata della pagina che include le seguenti informazioni:
- Tutto il codice HTML che struttura il sito
- I codici CSS che danno stile e forma alla struttura
- Codici JS che alimentano le animazioni
- Statistiche su quanto tempo la pagina impiega a caricarsi
- Le dimensioni dei file di tutti gli asset
- L’ordine di caricamento dei file
- Una pagina di console per vedere i problemi o i messaggi nascosti di uno sviluppatore malizioso.
Tutto quello che dovete sapere sulla pagina è proprio qui! E vuoi sapere la parte migliore? Non devi essere un geek o uno sviluppatore (o entrambi) per usarla. È per tutti! Forse sei un designer e vuoi sapere come appare il tuo design su un dispositivo mobile o forse vuoi solo vedere una diversa tonalità di colore sul tuo nuovo header e cambiare la dimensione del testo per renderlo più visibile. La cosa più importante è che le tue modifiche non possono causare problemi o rompere nulla perché tutte le modifiche sono applicate solo dalla tua parte.
Se sei il proprietario di un sito web, potresti voler scoprire la velocità del tuo sito, solo per vedere se i tuoi clienti hanno qualche problema ad accedere al tuo sito. O forse se sei un marketer, potresti voler conoscere le parole chiave che usano i tuoi concorrenti. Si ottiene il punto: l’elemento Inspect è una miniera d’oro per i dettagli a cui chiunque può accedere! In questo articolo, fornirò alcuni consigli utili su come l’elemento inspect può essere utile per il tuo sito.
Come può l’elemento inspect essere utile per il tuo sito?
Immaginiamo che tu voglia cambiare un po’ di testo, testare un’immagine o uno stile sul tuo sito web, ma non vuoi creare un ambiente di staging solo per questo. Non volete nemmeno servirlo ai visitatori. Nessun problema, è qui che entrano in gioco gli Strumenti di sviluppo.
Ecco cosa si può fare con gli strumenti per sviluppatori (Inspect Element):
- Cambiare qualsiasi testo
- Cambiare i colori
- Trovare gli errori sul tuo sito
- Testare il tuo sito in modalità responsive
- Monitorare la velocità di caricamento dei file
Modificare i testi, Proprietà di stile e aggiunta di nuovi stili
Per cambiare i testi, puoi semplicemente fare doppio clic sull’elemento nello strumento di sviluppo. Poi sarai in grado di cambiare il testo direttamente. Tuttavia, cambiare i colori e aggiungere nuovi stili richiede approcci diversi. Per cambiare gli stili, dovete trovare le giuste classi CSS sul lato destro dello strumento di sviluppo.
Anche aggiungere nuovi stili per gli elementi è facile. Puoi semplicemente cliccare sull’area “element.style” che si trova sul lato destro degli Strumenti di sviluppo (area in alto) e poi sarai in grado di aggiungere le tue proprietà CSS lì.
Ricercare gli errori su Developer Tools
Puoi facilmente vedere gli errori visualizzati su Developer Tools se stai lottando con un problema che non puoi definire. Sarai in grado di vedere tutti gli errori nella scheda Console in Developer Tools. Se non ci sono errori e tutto funziona alla grande, allora vedrai il testo “ready for rock” (solo in Artbees Themes).
Modalità reattiva degli Strumenti di sviluppo
Puoi attivare la modalità reattiva negli Strumenti di sviluppo cliccando sull’icona “Telefono e Tablet” che si trova in alto a destra negli Strumenti di sviluppo. Dopo aver fatto clic, sarete in grado di vedere il vostro sito web in qualsiasi dimensione. È una caratteristica piuttosto impressionante che ti permette di testare il tuo sito web in diverse dimensioni.
Monitoraggio delle fonti su Developer Tools
Puoi anche monitorare le fonti del tuo sito web su Developer Tools come immagini, file javascript, file CSS, video, ecc… Puoi quindi vedere tutte le metriche nella scheda Rete di Developer Tools.
Apri il cofano del tuo sito web con Inspect Element
Voglio scuotere la percezione che solo uno sviluppatore esperto di tecnologia può navigare attraverso tutti i dettagli che compongono la struttura del tuo sito. Non sottovalutate quello che potete fare con Inspect Element e quanto possano essere informativi i dettagli al suo interno, permettendovi di vedere cosa c’è veramente dietro il design del vostro sito web.