Google Chrome DevTools per non sviluppatori

Google Chrome è tra i browser più utilizzati con quasi il 65% degli utenti a livello globale. E c'è una buona ragione per questo, funziona bene, supporta un sacco di funzionalità web, si integra in modo nativo con tutto ciò che fornisce Google ed è facile da usare.

Ma c'è di più oltre al lato utente. È molto ben costruito anche per gli sviluppatori. Firefox è un altro ottimo browser che offre una straordinaria esperienza di sviluppo, sebbene la sua base utenti sia relativamente piccola. Quindi, per questo motivo, ci stiamo concentrando su Chrome e sui suoi DevTools, ma per fortuna, l'interfaccia utente della maggior parte dei browser rimane molto simile, quindi i suggerimenti qui saranno tradotti bene in Firefox, Safari, Edge e altri browser.

Che cos'è Chrome DevTools?

Chrome DevTools è un insieme di strumenti per sviluppatori web integrati direttamente nel browser Google Chrome. DevTools può aiutarti a modificare le pagine al volo e a diagnosticare rapidamente i problemi, il che alla fine ti aiuta a costruire siti web migliori, più velocemente.
Home page dei documenti di Chrome DevTools

I DevTools sono ciò che la maggior parte degli sviluppatori front-end (e spesso back-end) utilizza per ispezionare le prestazioni di una pagina Web, i tag HTML che la definiscono e gli stili applicati nella sua forma più semplice. Fornisce un sacco di altre funzionalità super utili che daremo un'occhiata fintanto che funzionano anche nel caso d'uso generale per i non sviluppatori.

Gli strumenti di sviluppo sono ciò che vedi nello screenshot sopra con il codice a sinistra e varie proprietà a destra. Questa è la visualizzazione predefinita che vedresti se premi Comando + Opzione + C (Mac) o Control + Maiusc + C (Windows, Linux, Chrome OS).

DevTools offre molte funzionalità, ma le più notevoli sarebbero:

• La struttura del documento (HTML) generata una volta che la pagina viene caricata e durante il caricamento.
• Ciò che CSS si applica a elementi HTML specifici così come ciò che viene ereditato da quelli principali.
  Visualizza le dimensioni del viewport, le dimensioni degli elementi, i padding, i margini, i bordi e altro ancora.
• La possibilità di modificare tutto sulla pagina a parte gli script in esecuzione.
• Assente per apportare modifiche al codice che vengono salvate una volta aggiornata la pagina (non possibile per impostazione predefinita però)
• Tutte le modifiche sono lato client, il che significa che qualunque cosa tu modifichi, solo tu la vedrai finché non aggiorni la pagina.
• Via per testare senza cache e con velocità di rete più lenta simulata.
• Strumenti per misurare il rendimento e assegnare un punteggio al rendimento di una pagina, oltre a fornire suggerimenti per risolverlo.
• Mostra la console della pagina e i suoi errori, avvisi e messaggi, nonché un modo per eseguire il codice javascript lì.

Questo è un elenco molto breve, ma copre alcune delle caratteristiche più importanti, principalmente quelle che tratteremo.

Correlati : come creare la tua prima estensione di Chrome

Perché hai bisogno di DevTools, quali sono i casi d'uso?

Per gli sviluppatori è ovvio, ma per quanto riguarda i non sviluppatori? Bene, ci sono alcuni trucchi e suggerimenti che ti avvicineranno allo stato di utente esperto. Spesso i proprietari di siti individuano problemi sul sito, fanno una o due domande e talvolta ricevono uno snippet di codice da "incollare" per risolvere un problema. Uno dei modi in cui gli sviluppatori testano tali snippet è applicarli direttamente agli strumenti di sviluppo. È anche un modo per fornire una bella anteprima ai tuoi sviluppatori su come vuoi che appaiano le cose.

Applica codice CSS

Il primo e più comune utilizzo di DevTools è modificare e applicare CSS. CSS è ciò che definisce l'aspetto di una pagina, è l'estetica. Per fare ciò, devi semplicemente indicare l'elemento che desideri modellare, fare clic con il tasto destro e selezionare "ispeziona"

Lo stesso vale per la maggior parte degli altri browser, anche se il testo della voce di menu potrebbe variare leggermente. Una volta fatto, vedrai i DevTools aprirsi e selezionare direttamente l'elemento di cui avevi bisogno. Lì, vedrai le due parti principali degli strumenti di sviluppo. I lati HTML e CSS (sinistro e destro):

Potrebbe essere un po 'complicato orientarsi nella parte HTML, ma non preoccuparti, DevTools evidenzierà gli elementi mentre li passi con il mouse sul pannello di sinistra. Una volta trovato ciò di cui hai bisogno, a destra puoi scrivere gli stili. Ce ne sono già alcuni aggiunti. Quindi cambiamo lo sfondo per leggere e vedere come appare:

Immediatamente durante la digitazione, gli stili nella pagina verranno aggiornati. Puoi scrivere qualsiasi CSS qui e verrà applicato proprio come gli stili già presenti nella pagina. Se premi verso la fine delle regole (sotto "larghezza"), inizierà ad aggiungere nuovi stili. Oppure puoi scriverli in alto dove dice "element.style". Quindi, se vuoi condividerlo con i tuoi sviluppatori, puoi semplicemente selezionare il codice e copiarlo e incollarlo. Suggerimento professionale, afferra anche il "selettore" per gli stili. Questo è ".RNNXgb" nello screenshot qui sopra. Questo dirà agli sviluppatori su quale elemento stai aggiungendo stili.

Correlati : WordPress CSS: guida di base per principianti

Scegli un colore

Un'altra cosa interessante che puoi fare è scoprire quale colore viene utilizzato esattamente e utilizzare un selettore di colori direttamente da DevTools per vedere altri colori. Basta fare clic sul quadrato accanto al codice colore (dove punta la freccia sopra) e si aprirà un selettore di colori.

Trova il carattere utilizzato

Gli sviluppatori CSS definiscono anche i caratteri in uso, la dimensione del carattere, l'altezza della linea, il colore, lo spessore del carattere e altre proprietà correlate alla tipografia. Tutti loro sarebbero mostrati sul lato destro. Finché non è incrociato, viene applicato lo stile che vedi. Scopriamo quale carattere viene utilizzato per la ricerca sul form di Google. Fai clic con il pulsante destro del mouse, ispeziona e scorri verso il basso finché non vedi il carattere o cerca semplicemente nel campo "Filtro" in alto nella sezione destra:

Se vai avanti e aggiorni il carattere, vedrai come apparirà il sito con un carattere diverso, a cui potresti voler passare presto. Ovviamente, uno sviluppatore dovrà in seguito modificare il codice e risolvere eventuali problemi che una modifica del carattere creerebbe, ma questo metodo funziona alla grande per testare rapidamente le cose senza avere un ambiente di sviluppo impostato.

Ecco come apparirebbe la home page di Google con "Georgia" impostato come carattere. Per ottenere ciò, abbiamo dovuto aggiornare più di una proprietà, ma grazie alla buona architettura CSS degli sviluppatori di Google, è stato abbastanza facile. La maggior parte delle volte, un sito scritto male richiede di aggiornare un sacco di proprietà per vedere l'intero sito aggiornato.

Correlati : Come scegliere i migliori caratteri per il tuo sito web

Cache, Throttle e Speed

Cos'è la cache? In termini più semplici, una risorsa che viene salvata sulla tua macchina per un utilizzo futuro. Una risorsa potrebbe essere JS, file CSS o un'immagine. Se non cambia ogni volta che apri una pagina, non è necessario scaricarlo ogni volta, giusto? Quindi il browser lo manterrà semplicemente sulla tua macchina per un po '.

Ma cosa succede se è stata apportata una modifica al server e la configurazione non utilizza le migliori pratiche per aggiornare le risorse? O in breve, anche se gli sviluppatori hanno cambiato la base di codice, si vedono ancora i vecchi stili. Bene, allora puoi semplicemente fermare la cache e fare un "hard refresh".

Apri gli strumenti di sviluppo e vai alla scheda "Rete". Quindi fai clic su "Disattiva cache" ed esegui un "aggiornamento completo":

Ora, mentre navighi tra le pagine con DevTools aperto, non ci saranno risorse memorizzate nella cache dal tuo browser. Le pagine verranno caricate più lentamente man mano che le risorse vengono caricate ogni volta, ma vedrai le modifiche. In genere gli sviluppatori mantengono "Disabilita cache" su ON per impostazione predefinita e lo disabilitano solo durante il test delle interazioni reali degli utenti quando i tempi di caricamento sono importanti.

Nella stessa scheda, dopo l'aggiornamento, vedrai anche le misurazioni sulla velocità e sul peso della pagina. Quanto tempo manca all'attivazione del "Load" (evento in cui altri script si allegano per fare più lavoro), quanti file sono richiesti (31 richieste sopra, quantità abbastanza buona), quanto è stato scaricato e così via. È semplice, più basso è, meglio è per ogni valore. Qualunque cosa al di sopra di 100-150 richieste e inizierai a vedere grossi problemi di velocità.

DevTools fornisce anche una simulazione di connessione lenta. Una funzione molto utile per vedere come funzionerebbe il tuo sito su una rete più lenta come 3G. Per attivarlo, basta modificare il valore accanto a "Disabilita cache" e premere Aggiorna. Quando aggiorni vedrai ogni fase del caricamento del sito. Con la cache disabilitata, questa sarebbe la prima visita per usi regolari.

Vedere la differenza di velocità quando selezioniamo "Slow 3G" e aggiorniamo rispetto al primo esempio che utilizza la velocità di connessione reale. Qui puoi anche provare "Offline": come funzionerebbe il sito senza connessione a Internet. Se questo suona strano, non lo è, le app web progressive consentono già ai siti di funzionare anche senza connessione Internet se sono stati consultati almeno una volta dai visitatori.

Gli audit sono un'altra grande funzionalità che fornisce un'analisi della velocità di una pagina di facile utilizzo. Puoi semplicemente eseguirlo andando alle schede "Audit" e premendo "Genera rapporto":

A destra hai alcune opzioni per decidere cosa testare poiché a volte i test possono richiedere un po 'di tempo (un minuto o due), quindi se li esegui molte volte, potresti scegliere solo ciò che è necessario per il test corrente . Ecco un risultato di esempio con le opzioni sopra per la schermata iniziale di Google:

Un ottimo punteggio! 94 è molto buono e mette in mostra l'ottimo lavoro messo in questa pagina. Ricorda che in superficie può sembrare molto semplice, ma ci sono un sacco di script in esecuzione in background che rimangono nascosti e rallentano i siti. Ci sono molte altre metriche testate e puoi farlo su qualsiasi sito per scoprire quali problemi ha e cosa può essere migliorato.

Correlati : cosa significa veramente "velocizzare il tuo sito" e come ottenerlo?

Console DevTools

L'ultima vista che tratteremo è la console. Facilmente accessibile premendo semplicemente il tasto ESC o andando alla scheda "Console". Come previsto, non ci sono errori, solo pochi avvisi che non dovrebbero sollevare troppi problemi:

Ma, se per qualche motivo dopo un recente aggiornamento sul tuo sito, un componente interattivo (come un menu a discesa, un menu, una mappa, un modulo) smette di funzionare, puoi sempre dare un'occhiata alla console. Potrebbe contenere errori che indicano qual è il motivo.

Ecco un esempio di come apparirebbe un tale errore:

È un po 'ironico usare la pagina di documentazione dei log degli errori per mostrare gli errori, giusto? In ogni caso, serve a un buon scopo. Questi sono errori che interrompono il funzionamento di alcune funzionalità. Puoi sempre condividere tali informazioni con i tuoi sviluppatori e chiedere assistenza. I registri vengono pubblicati in tempo reale mentre interagisci con la pagina, quindi se fai clic su un pulsante e viene visualizzato un errore, molto probabilmente lo script dietro di esso ha un problema.

Correlati : il percorso per diventare un buon web designer

Avviso di sicurezza : non è una buona idea copiare e incollare il codice nella console senza capire cosa fa. Soprattutto se proviene da una fonte inaffidabile e viene utilizzato su applicazioni / siti Web interni della tua azienda. Facebook ha pubblicato un avviso a causa di ciò sulla loro console:

Sommario

DevTools è uno strumento straordinario che aiuta sia gli sviluppatori che i proprietari di siti. Ti offre tutto ciò di cui hai bisogno per modificare e modificare una pagina. Attraverso di esso è possibile cambiare CSS, modificare HTML, eliminare e riorganizzare gli elementi sulla pagina, vedere rapporti di velocità ed errori segnalati.

I proprietari dei siti possono utilizzarlo per mostrare agli sviluppatori idee ed esempi delle loro esigenze che potrebbero essere più facili da capire rispetto alla scrittura di paragrafi di testo. Con una certa conoscenza CSS delle proprietà di base, puoi essere molto più descrittivo delle tue esigenze, il che ridurrà notevolmente il avanti e indietro e il tempo speso per le nuove modifiche.

Ci sono un sacco di altre funzionalità che aspettano di essere utilizzate, non aver paura di esplorare!