Nessun sito web è stato realizzato perfettamente. Come tutti i prodotti realizzati dall'uomo, gli errori di codice fanno parte del processo. Ecco perché è importante testare a fondo qualsiasi nuovo sito Web che crei per assicurarti che sia il più privo di errori possibile per offrire ai tuoi utenti la migliore esperienza possibile.
Non dovresti testare un sito web senza provare prima il kit DevTools di Google Chrome. La modalità sviluppatore di Chrome ti consente di provare e testare a fondo un nuovo sito (o uno esistente) per trovare e correggere i bug. Può anche darti un'idea di come vengono eseguiti altri siti, inclusa la visualizzazione del codice sorgente.
Ecco tutto ciò che devi sapere sulla modalità sviluppatore del browser Google Chrome, quali strumenti ha e come usarlo in modo efficace.
Che cos'è Chrome Modalità sviluppatore?
Quando ci riferiamo alla modalità sviluppatore di Chrome, non stiamo parlando degli stessa modalità sviluppatore che vedrai sui Chromebook. Ciò a cui ci riferiamo sono gli estesi strumenti di sviluppo di Chrome (chiamati Google DevTools) che sono integrati nel browser stesso.
Questi sono strumenti progettati per testare, analizzare e di proposito rompere (se necessario) una pagina Web caricata nel browser Google Chrome a scopo di test. A livello di base, è possibile utilizzare DevTools per visualizzare il codice sorgente di un sito Web, consentendovi di sbirciare sotto il cofano per vedere come è stato creato un sito e come funziona.
Google DevTools offre più di questo, tuttavia. Puoi utilizzare la modalità sviluppatore di Chrome per modificare una pagina dopo il caricamento, eseguire i comandi della console di Google Chrome per controllare e manipolare la pagina, nonché eseguire test di velocità e rete per monitorare il traffico web.
In_content_1 all: [300x250] / dfp: [640x360]->Puoi anche emulare altri dispositivi, inclusi diversi sistemi operativi e risoluzioni dello schermo, nella modalità Chrome DevTools. Ciò ti consente di vedere se un sito ha un design web reattivo e dove i contenuti e i layout del sito cambieranno a seconda della risoluzione o del tipo del dispositivo.
Sebbene questi strumenti siano rivolti a sviluppatori o tester web professionisti, è anche utile per gli utenti Chrome standard di conoscere la suite DevTools. Se riscontri un problema con un sito che non riesci a risolvere, passare alla modalità sviluppatore di Chrome può aiutarti a vedere se il problema riguarda il sito o il tuo browser.
Come accedere a Google Menu Chrome DevTools
Esistono alcuni modi per accedere al menu Google Chrome DevTools, a seconda dello strumento che si desidera utilizzare.
Il metodo più semplice per farlo proviene dal menu di Google Chrome. Per fare ciò, fai clic sull'icona menu a tre puntiin alto a destra. Dal menu visualizzato, fai clic su Altri strumenti>Strumenti per sviluppatori.
Questo aprirà il kit DevTools in un nuovo menu sul lato destro della scheda o della finestra di Chrome aperta.
Puoi anche farlo usando le scorciatoie da tastiera. Da un PC Windows o Linux, apri il browser Chrome e premi il tasto F12. Puoi anche premere i tasti Ctrl + Alt + Jo Ctrl + Alt + Iin una scheda o finestra di Chrome aperta.
Su macOS, premi F12o premi i tasti Opzione + Comando + Jo Opzione + Comando + Iper aprire invece il menu Chrome DevTools. Questo aprirà la console di Chrome, con opzioni per passare ad altri strumenti di Chrome nella parte superiore del menu DevTools.
Se lo desideri, puoi visualizzare il codice sorgente di un sito Web (aprendo gli Elementidel menu DevTools nel processo) su qualsiasi pagina Web aperta facendo clic con il pulsante destro del mouse e facendo clic sull'opzione Ispeziona.
Uso di Chrome DevTools
Come abbiamo brevemente accennato, è possibile utilizzare il kit Chrome DevTools per visualizzare il codice sorgente di un sito Web nella scheda Elementi. Ti consentirà di analizzare il codice dietro la pagina che hai caricato, oltre a visualizzare i messaggi di errore (che indicano problemi con il modo in cui il sito è stato caricato) nella console di Chrome nella scheda Console.
Puoi anche visualizzare le diverse fonti di contenuti da un sito Web nella scheda Fonti. Ad esempio, se un sito è utilizzando una rete di distribuzione dei contenuti (CDN), i contenuti multimediali di un sito verrebbero elencati qui come una fonte diversa.
La modalità sviluppatore di Chrome ti consente di scaricare direttamente quel contenuto o eseguire altri analisi complessa del contenuto.
Se vuoi testare il rendimento di un sito, puoi monitorare e registrare l'utilizzo della tua rete nella scheda Rete. Questo mostrerà la velocità, le dimensioni e il tipo di richieste di rete fatte tra il tuo browser e il sito.
Ad esempio, quando una pagina viene caricata per la prima volta, il sito caricherà il contenuto della pagina stessa, ma potrebbe anche richiedere dati da database di terze parti. Ad esempio, quando esegui l'accesso, questo può interrogare un database che verrebbe mostrato qui come richiesta di rete.
Puoi analizzarlo ulteriormente nella scheda Performance, in cui è possibile registrare l'utilizzo del browser Chrome in modo più approfondito, inclusa la registrazione di schermate in punti diversi. Verrà registrato il tempo necessario per caricare il sito per ulteriori analisi.
Google Chrome ha una reputazione per essere duro sulla memoria del tuo PC, quindi puoi testare l'utilizzo della memoria JavaScript del tuo sito nella scheda Memoria. Qui è possibile utilizzare diversi profili di test di Chrome, con ulteriori informazioni su questo test su Pagina della documentazione di Chrome DevTools.
Per un'analisi più approfondita del contenuto del tuo sito come qualsiasi archivio del browser che potrebbe utilizzare (ad esempio, per registrare i dati), puoi cercare attraverso la scheda Applicazione. Puoi visualizzare le informazioni sui cookie del sito qui nella sezione Cookieo cancellare la memoria utilizzata facendo clic sull'opzione Cancella memoria.
Se sei preoccupato per la sicurezza del tuo sito, puoi verificare il suo rendimento nella scheda Sicurezza. Ciò fornirà una rapida panoramica dell'analisi di sicurezza di Chrome per una pagina, incluso se la pagina ha o meno un certificato SSL corretto e affidabile.
Se desideri generare un rapporto sul tuo sito rendimento, anche se soddisfa gli standard utente tipici e se il rendimento del sito potrebbe influire sull'ottimizzazione dei motori di ricerca, puoi fare clic sulla scheda Faro. Questo offre impostazioni che puoi selezionare o deselezionare per il rapporto: fai clic su Genera rapportoper creare il rapporto da visualizzare.
Questo graffia appena la superficie del potenziale che Chrome la modalità sviluppatore può portare agli sviluppatori. Se vuoi saperne di più, i Documentazione di Chrome DevTools dovrebbero aiutarti con gli strumenti e le funzionalità offerti, incluso come costruire i tuoi test utente con esso.
Trucchi avanzati di Google Chrome
La maggior parte degli utenti di Chrome non saprà mai che il kit DevTools di Google Chrome esiste nel proprio browser, ma per gli utenti esperti rimane un modo eccezionalmente utile per testare e analizzare i siti Web. Ci sono anche Estensioni di Chrome per sviluppatori web di terze parti disponibili per aiutarti a testare ulteriormente il tuo sito.
Se sei costruzione di un sito Web di base, passare alla modalità sviluppatore di Chrome potrebbe aiutarti individuare errori con il tuo sito che non sono immediatamente visibili. Puoi farlo solo se Chrome funziona correttamente, quindi se sei alle prese con crash di Chrome, potresti dover reimpostare o reinstallare prima il browser.