Come utilizzare Chrome DevTools per risolvere i problemi del sito web
Chrome DevTools è una risorsa essenziale per gli sviluppatori. Mentre altri browser offrono strumenti di risoluzione dei problemi piuttosto utili, Chrome DevTools merita la tua attenzione a causa della sua interfaccia multifunzionale e della sua popolarità.
Chrome è il browser più popolare per gli sviluppatori grazie alla sua potente suite di strumenti di debug. Usare Chrome DevTools è facile, ma devi capire come funziona per ottenere il massimo da esso.
Come funzionano gli strumenti per sviluppatori di Chrome
Chrome DevTools ti consente di risolvere i problemi su un sito web tramite la sua console di errore e altri strumenti di debug e monitoraggio. L'utilizzo di DevTools espone le lacune del frontend e ti consente di monitorare l'aspetto del tuo sito web su dispositivi mobili e tablet.
Con DevTools, puoi apportare modifiche in tempo reale al codice di un sito web, come JavaScript, HTML e CSS, e ottenere risultati immediati delle tue modifiche.
Le modifiche apportate tramite DevTools non influiscono in modo permanente sul sito Web. Visualizzano solo temporaneamente il risultato atteso come se li avessi applicati al codice sorgente effettivo. Ciò ti consente di elaborare modi per caricare il tuo sito Web molto più velocemente e semplificare l'eliminazione dei bug.
Come accedere a Chrome DevTools
Puoi accedere a Chrome DevTools in diversi modi. Per aprire gli strumenti per sviluppatori con il metodo di scelta rapida su Mac OS, premi Cmd + Opt + I. Se utilizzi il sistema operativo Windows, premi i tasti Ctrl + Maiusc + I sulla tastiera.
In alternativa, puoi accedere agli strumenti per sviluppatori di Chrome facendo clic sui tre punti nell'angolo in alto a destra dello schermo. Vai su Altri strumenti e seleziona Strumenti per sviluppatori . Un'altra opzione è fare clic con il pulsante destro del mouse sulla pagina Web e fare clic sull'opzione Ispeziona .
Utilizzo degli Strumenti per sviluppatori di Chrome per la diagnosi dei siti web
Chrome DevTools offre diversi modi per modificare e risolvere i problemi di una pagina web. Diamo un'occhiata ad alcuni dei modi in cui DevTools può aiutarti.
Guarda come appare il tuo sito web su uno smartphone
Dopo aver impostato il browser Chrome in modalità sviluppatore, viene visualizzata una versione di dimensioni ridotte della tua pagina web. Tuttavia, questo non ti darà una visione reale di come apparirebbe su uno smartphone o un tablet.
Per fortuna, oltre a impostare le dimensioni dello schermo di una pagina Web, Chrome DevTools ti consente di passare da diversi tipi e versioni di schermi mobili.
Per accedere a questa opzione, attiva la modalità Ispeziona . Quindi, fare clic sul Responsive a discesa in alto a sinistra dei DevTools e selezionare il dispositivo mobile preferito. La pagina web viene quindi visualizzata e si adatta alle dimensioni del dispositivo mobile selezionato.
Accedi ai file di origine di una pagina Web
Puoi accedere ai file che compongono una pagina web tramite Chrome DevTools. Per accedere a questi file, fare clic sull'opzione Sources nella parte superiore del menu DevTools. Questo espone il file system del sito web e ti dà anche la possibilità di modificare.
Puoi anche cercare file di origine, che possono essere utili quando hai a che fare con una pagina web che ha molte risorse. Per cercare un file sorgente tramite DevTools, fai clic sull'opzione Cerca appena sopra la console.
Tuttavia, se non riesci a trovare l'opzione Cerca , un'alternativa migliore è usare le scorciatoie da tastiera. In Mac OS, premi i tasti Cmd + Opt + F per cercare un file sorgente. Se utilizzi il sistema operativo Windows, premi il tasto Ctrl + Maiusc + F per accedere alla barra di ricerca del file di origine.
Eseguire modifiche in tempo reale a una pagina Web
Uno degli scopi principali dell'utilizzo dei DevTools è eseguire una modifica falsa istantanea degli elementi su una pagina web . Una volta passati agli strumenti per sviluppatori, puoi modificare il contenuto HTML di un sito web facendo clic sull'opzione Elementi . Quindi, fai clic con il pulsante destro del mouse su qualsiasi punto a cui desideri applicare le modifiche all'interno dell'editor di codice e seleziona Modifica come HTML .
Per modificare le proprietà CSS che non sono in linea, seleziona Sorgenti . Quindi, seleziona il file CSS che desideri modificare. Posiziona il cursore sulla riga scelta all'interno della console del codice per eseguire una modifica dal vivo. In questo modo avrai un feedback immediato su qualsiasi modifica di stile applicata alla pagina web.
Tieni presente che quando modifichi una pagina tramite DevTools, ricaricando la pagina sul tuo browser la ripristina alla sua forma originale e la modifica è visibile solo a te. La modifica tramite DevTools non influisce sul buon funzionamento né sull'utilizzo di quel sito Web per altri utenti.
Eseguire il debug del codice JavaScript con la console DevTools
Uno dei modi migliori per eseguire il debug di JavaScript è utilizzare gli strumenti per sviluppatori di Chrome. Fornisce un rapporto diretto degli script non validi e la posizione esatta del bug.
È buona norma mantenere sempre aperti DevTools durante la progettazione di un sito Web con JavaScript. Ad esempio, l'esecuzione del comando console.log () di JavaScript su una serie di istruzioni visualizza il risultato di quel registro nella console DevTools se il programma viene eseguito correttamente.
Per impostazione predefinita, la console segnala eventuali problemi di JavaScript sul tuo sito web. Puoi trovare la console nella parte inferiore di DevTools o accedervi facendo clic sull'opzione Console nella parte superiore della finestra di Chrome DevTools.
Monitorare il caricamento delle risorse da un database
Oltre al debug di JavaScript, la console può anche fornire un dettaglio delle risorse che non vengono caricate correttamente dal database del sito web.
Sebbene questo non sia sempre il modo migliore per eseguire il debug dei problemi di backend, ti dice comunque quali risorse stanno restituendo un errore 404 dopo aver eseguito una query sul database di quegli elementi.
Cambia l'orientamento degli strumenti per sviluppatori di Chrome
Per modificare la posizione degli strumenti di sviluppo di Chrome, fai clic sui tre punti del menu all'interno di DevTools (non quello principale del browser). Quindi seleziona la tua posizione preferita dall'opzione lato Dock .
Installa le estensioni di Chrome DevTools
Puoi anche installare estensioni specifiche della lingua o del framework che funzionano con Chrome DevTools. L'installazione di queste estensioni ti consente di eseguire il debug della tua pagina web in modo più efficiente.
Puoi accedere a un elenco di estensioni disponibili per Chrome DevTools nella galleria delle estensioni DevTools in primo piano di Chrome.
Verifica la presenza di problemi di sicurezza su un sito web
Chrome DevTools ti consente di valutare quanto è sicuro il tuo sito web, in base a parametri come la disponibilità di certificati di sicurezza web e quanto è sicura la connessione, tra gli altri. Per verificare se il tuo sito web è sicuro, fai clic sull'opzione Sicurezza nella parte superiore di DevTools.
La scheda Sicurezza offre una panoramica dei dettagli di sicurezza del tuo sito web e ti informa su eventuali minacce potenziali.
Controlla il tuo sito web
Chrome DevTools ha una funzione che ti consente di controllare le prestazioni complessive del tuo sito web in base a parametri specifici.
Per accedere a questa funzione, seleziona l'opzione Lighthouse nella parte superiore della finestra DevTools. Quindi, seleziona i parametri che desideri controllare, quindi spunta le opzioni Mobile o Desktop per vedere come si comporta la tua pagina web su piattaforme diverse.
Successivamente, fai clic su Genera rapporto per eseguire un'analisi della tua pagina web in base ai parametri selezionati in precedenza.
È inoltre possibile valutare il tempo di esecuzione o le prestazioni di caricamento di un sito Web facendo clic sull'opzione Prestazioni . Per eseguire un test, fare clic sull'icona accanto all'opzione Fare clic sul pulsante di registrazione per eseguire un'analisi in fase di esecuzione. In alternativa, fare clic sul pulsante di ricarica sotto di esso per valutare le prestazioni del tempo di caricamento. Fare clic su Stop per arrestare l'analizzatore e visualizzare i risultati.
Approfitta di Chrome DevTools
A seconda di cosa ti serve, Chrome DevTools ti consente di fare molto di più che un semplice debug del sito web. Per fortuna, DevTools è facile da usare per programmatori di tutti i livelli. Puoi anche imparare alcune nozioni di base sullo sviluppo del frontend del sito web cercando il codice sorgente dei siti web che visiti.
Potresti anche scoprire alcune altre opzioni che non abbiamo discusso in questo articolo. Quindi, sentiti libero di giocare con le funzionalità disponibili. Inoltre, modificare queste funzionalità non danneggia minimamente un sito web.
