Nessun sito web è costruito perfettamente. Come tutti i prodotti realizzati da esseri umani, 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ù possibile privo di errori per offrire ai tuoi utenti la migliore esperienza possibile. 

Non dovresti testare un sito web senza prima provare il kit DevTools di Google ^(DevTools)Chrome . La modalità sviluppatore di Chrome^(Chrome) ti consente di provare e testare a fondo un nuovo sito (o uno esistente) per trovare e correggere i bug. Può anche darti informazioni su 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 utilizzarla in modo efficace.

Che cos'è la modalità sviluppatore di Chrome?^{(What Is Chrome Developer Mode?)}

Quando ci riferiamo alla modalità sviluppatore di Chrome , non stiamo parlando della stessa modalità sviluppatore^{(same developer mode)} che vedrai sui Chromebook^{(Chromebooks)} . Quello a cui ci riferiamo sono gli estesi strumenti di sviluppo di Chrome (chiamati Google DevTools ) integrati nel browser stesso.

Questi sono strumenti progettati per testare, analizzare e interrompere di proposito (se necessario) una pagina web che hai caricato nel browser Google Chrome a scopo di test. A livello di base, puoi utilizzare DevTools per visualizzare il codice sorgente di un sito Web, permettendoti di sbirciare sotto il cofano per vedere come è stato creato un sito e come funziona.

Tuttavia, Google DevTools^{(Google DevTools)} offre più di questo. Puoi utilizzare la modalità sviluppatore di Chrome per modificare una pagina dopo che è stata caricata, eseguire i comandi della console di Google Chrome per controllare e manipolare la pagina, nonché eseguire test di velocità e di rete per monitorare il traffico web.

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 il contenuto e i layout del sito cambieranno a seconda della risoluzione o del tipo del dispositivo.

Sebbene questi strumenti siano rivolti a sviluppatori Web o tester professionisti, è anche utile per gli utenti Chrome standard conoscere la suite DevTools . Se vedi un problema con un sito che non riesci a risolvere, il passaggio alla modalità sviluppatore di Chrome può aiutarti a vedere se il problema riguarda il sito o il tuo browser.

Come accedere al menu di Google Chrome DevTools^{(How To Access Google Chrome DevTools Menu)}

Esistono diversi modi per accedere al menu Google Chrome DevTools , a seconda dello strumento che desideri utilizzare.

Il metodo più semplice per farlo è dal menu di Google Chrome . Per fare ciò, fai clic sull'icona del menu a tre punti^{(three-dots menu icon)} in alto a destra. Dal menu visualizzato, fai clic su More Tools > Developer Tools .

Questo aprirà il kit DevTools in un nuovo menu sul lato destro della scheda o finestra di Chrome aperta.^(Chrome)

Puoi anche farlo usando le scorciatoie da tastiera. Da un PC Windows o Linux^{(Linux PC)} , apri il browser Chrome e premi il tasto F12 . Puoi anche premere i Ctrl + Alt + J o Ctrl + Alt + I in una scheda o finestra di Chrome aperta .

Su macOS, premi F12 o premi i tasti Option + Command + J o Option + Command + I per aprire invece il menu Chrome DevTools . Si aprirà la console Chrome , con le opzioni per passare ad altri strumenti Chrome nella parte superiore del menu DevTools .

Se lo desideri, puoi visualizzare il codice sorgente di un sito Web (aprendo la scheda Elementi del menu ^(Elements)DevTools nel processo) su qualsiasi pagina Web aperta facendo clic con il pulsante destro del mouse e facendo clic sull'opzione Ispeziona .^{(Inspect )}

Utilizzo di Chrome DevTools^{(Using Chrome DevTools)}

Come abbiamo brevemente accennato, puoi utilizzare il kit Chrome DevTools per vedere il codice sorgente di un sito Web nella scheda Elementi . ^(Elements)Ti consentirà di analizzare il codice dietro la pagina che hai caricato, oltre a visualizzare i messaggi di errore (che indicano problemi con il caricamento del sito) nella console di Chrome nella scheda Console .

Puoi anche visualizzare le diverse fonti di contenuto da un sito Web nella scheda Fonti . ^(Sources)Ad esempio, se un sito utilizza una rete di distribuzione dei contenuti (CDN)^{(using a content delivery network (CDN))} , i contenuti multimediali di un sito verranno elencati come una fonte diversa qui.

La modalità sviluppatore di Chrome^(Chrome) ti consente di scaricare direttamente quel contenuto o di eseguire analisi più complesse del contenuto.

Se desideri testare le prestazioni di un sito, puoi monitorare e registrare l'utilizzo della rete nella scheda Rete . ^(Network)Questo mostrerà la velocità, la dimensione e il tipo di richieste di rete effettuate 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 accedi, questo potrebbe interrogare un database che verrebbe visualizzato come richiesta di rete qui.

Puoi analizzarlo ulteriormente nella scheda Prestazioni^{(Performance )} , dove puoi registrare l' utilizzo del browser Chrome in modo più approfondito, inclusa la registrazione di schermate in punti diversi. Questo registrerà il tempo necessario per caricare il tuo sito per ulteriori analisi.

Google Chrome ha la reputazione di essere difficile per la memoria del tuo PC^{(being hard on your PC memory)} , quindi puoi testare l' utilizzo della memoria JavaScript del tuo sito nella scheda Memoria . ^(Memory)Qui è possibile utilizzare diversi profili di test di Chrome^{(Different Chrome)} , con ulteriori informazioni su questo test nella pagina della documentazione di Chrome DevTools^{(Chrome DevTools documentation page)} .

Per un'analisi più approfondita del contenuto del tuo sito, nonché di qualsiasi spazio di archiviazione del browser che potrebbe utilizzare (ad esempio, per registrare i dati), puoi cercare nella scheda Applicazione . ^{(Application)}È possibile visualizzare le informazioni sui cookie del sito qui nella sezione Cookie^(Cookies) o cancellare la memoria utilizzata facendo clic sull'opzione Cancella memoria .^{(Clear storage)}

Se sei preoccupato per la sicurezza del tuo sito, puoi verificarne le prestazioni nella scheda Sicurezza . ^{(Security )}Questo ti darà 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.^(SSL)

Se desideri generare un rapporto sulle prestazioni del tuo sito, incluso se soddisfa gli standard utente tipici e se le prestazioni del sito potrebbero influire sull'ottimizzazione dei motori di ricerca, puoi fare clic sulla scheda Faro . ^(Lighthouse)Ciò offre impostazioni che puoi selezionare o deselezionare per il tuo rapporto: fai clic su Genera rapporto^{(Generate report)} per creare il rapporto da visualizzare.

Questo graffia a malapena la superficie del potenziale che la modalità sviluppatore di Chrome può offrire agli sviluppatori. Se vuoi saperne di più, la documentazione di Chrome DevTools^{(Chrome DevTools documentation)} dovrebbe aiutarti con gli strumenti e le funzionalità offerti, incluso come creare i tuoi test utente con esso. 

Trucchi avanzati di Google Chrome^{(Advanced Google Chrome Tricks)}

La maggior parte degli utenti di Chrome non saprà mai che il kit Google Chrome DevTools esiste nel proprio browser, ma per gli utenti esperti rimane un modo eccezionalmente utile per testare e analizzare i siti Web. Sono disponibili anche estensioni di Chrome^{(Chrome extensions for web developers)} di terze parti per sviluppatori web per testare ulteriormente il tuo sito.

Se stai creando un sito web di base^{(building a basic website)} , il passaggio alla modalità sviluppatore di Chrome potrebbe aiutarti a individuare gli errori del tuo sito che non sono immediatamente visibili. Puoi farlo solo se Chrome funziona correttamente, quindi se stai riscontrando arresti anomali di Chrome^{(struggling with Chrome crashes)} , potresti dover prima ripristinare o reinstallare il browser.

What Is Chrome Developer Mode & What Are Its Uses?

No website is built perfectly. Like all products made by humаns, code errors are part of the process. That’s why it’s important to thoroughly test аny new website you build to make surе that it’s as free of errors as possible to give your users the best possible experience. 

You shouldn’t test a web site without trying Google Chrome’s DevTools kit first. Chrome developer mode allows you to try out and thoroughly test a new site (or an existing one) to find and fix bugs. It can also give you insight into how other sites are run, including viewing the source code. 

Here’s everything you need to know about the Google Chrome browser developer mode, what tools it has, and how to use it effectively.

What Is Chrome Developer Mode?

When we refer to the Chrome developer mode, we’re not talking about the same developer mode that you’ll see on Chromebooks. What we’re referring to is the extensive Chrome development tools (called Google DevTools) that are built into the browser itself.

These are tools designed to test, analyze, and purposely break (if you need to) a web page you’ve loaded in the Google Chrome browser for testing purposes. At a basic level, you can use DevTools to view the source code for a website, letting you peek under the hood to see how a site has been built and how well it runs.

Google DevTools offers more than this, however. You can use Chrome developer mode to change a page after it’s loaded, run Google Chrome console commands to control and manipulate the page, as well as run speed and network tests to monitor web traffic.

You can also emulate other devices, including different operating systems and screen resolutions, in the Chrome DevTools mode. This lets you see if a site has responsive web design, and where site content and layouts will change depending on the device resolution or type.

While these tools are aimed at professional web developers or testers, it’s also handy for standard Chrome users to know their way around the DevTools suite. If you see a problem with a site that you can’t solve, switching to Chrome developer mode can help you see if the problem is with the site or with your browser.

How To Access Google Chrome DevTools Menu

There are a few ways you can access the Google Chrome DevTools menu, depending on the tool you wish to use.

The easiest method to do this is from the Google Chrome menu. To do this, click the three-dots menu icon in the top-right. From the menu that appears, click More Tools > Developer Tools.

This will open the DevTools kit in a new menu on the right-hand side of your open Chrome tab or window.

You can also do this by using keyboard shortcuts. From a Windows or Linux PC, open the Chrome browser and press the F12 key. You can also press the Ctrl + Alt + J or Ctrl + Alt + I keys in an open Chrome tab or window.

On macOS, press F12 or press the Option + Command + J or Option + Command + I keys to open the Chrome DevTools menu instead. This will open the Chrome console, with options to move to other Chrome tools at the top of the DevTools menu.

If you want, you can view the source code for a website (opening the Elements tab of the DevTools menu in the process) on any open web page by right-clicking the and clicking the Inspect option.

Using Chrome DevTools

As we’ve briefly touched upon, you can use the Chrome DevTools kit to see the source code for a website under the Elements tab. It’ll let you analyse the code behind the page you’ve loaded, as well as view error messages (indicating problems with how the site has loaded) in the Chrome console under the Console tab.

You can also view the different sources for content from a website under the Sources tab. For instance, if a site is using a content delivery network (CDN), media from a site would be listed as a different source here.

Chrome developer mode allows you to download that content directly, or perform more complex analysis of the content.

If you want to test how a site is performing, you can monitor and record your network usage under the Network tab. This will show the speed, size, and type of network requests made between your browser and the site.

For instance, when a page first loads, the site will load the page content itself, but it may also request data from third-party databases. For instance, when you sign in, this may query a database which would show up as a network request here.

You can analyse this further under the Performance tab, where you can record your Chrome browser usage in greater depth, including recording screenshots at different points. This will log how long it takes to load your site for further analysis.

Google Chrome has a reputation for being hard on your PC memory, so you can test your site’s JavaScript memory usage under the Memory tab. Different Chrome testing profiles can be used here, with further information about this testing at the Chrome DevTools documentation page.

For more in-depth analysis of your site content, as well as any browser storage it might be using (for instance, to log data), you can search through the Application tab. You can view site cookie information here under the Cookies section, or clear the storage being used by clicking the Clear storage option.

If you’re worried about your site security, you can check how well it performs under the Security tab. This will give you a quick overview of Chrome’s security analysis for a page, including whether or not the page has a correct and trusted SSL certificate.

If you want to generate a report on your site’s performance, including if it meets typical user standards and if the site performance could be affecting search engine optimization, you can click the Lighthouse tab. This offers settings you can check or uncheck for your report—click Generate report to create the report to view.

This barely scratches the surface of the potential that Chrome developer mode can bring to developers. If you want to learn more, the Chrome DevTools documentation should help you with the tools and features on offer, including how to build your own user tests with it. 

Advanced Google Chrome Tricks

Most Chrome users won’t ever know that the Google Chrome DevTools kit exists in their browser, but for power users, it remains an exceptionally useful way to test and analyse websites. There are also third-party Chrome extensions for web developers available to help test your site further.

If you’re building a basic website, switching to Chrome developer mode could help you spot errors with your site that aren’t immediately visible. You can only do this if Chrome is working correctly, so if you’re struggling with Chrome crashes, you may need to reset or reinstall your browser first.

Related posts

• Compilazione automatica di Google Chrome: una guida completa

• Le 10 migliori estensioni per la privacy per Chrome (2022)

• Usa questi 4 plugin di Chrome per crittografare i tuoi messaggi Gmail

• Impostazioni dei contenuti di Google Chrome: una guida completa

• Qual è il miglior servizio di teleconferenza: le migliori app a confronto

• 5 migliori componenti aggiuntivi per la privacy di Firefox per la sicurezza online

• 3 Strumenti per diagnosticare e risolvere i problemi con il monitor

• 7 migliori strumenti di cattura per Chromebook

• Le migliori utilità di ottimizzazione della CPU, della scheda video e della RAM

• 5 migliori programmi software per gestire i doppi monitor

• Cose da considerare prima di creare il tuo Wiki

• 5 app portatili che vorresti assolutamente avere sulla tua chiavetta USB

• 9 modi per registrare il gameplay sul tuo PC

• 11 migliori software di screenshot gratuiti per Windows

• Le 5 migliori app per filtri luce blu per Windows, Mac e Linux

• 4 migliori app software di port forwarding e come usarle

• Utilizzare HP Print and Scan Doctor per risolvere i problemi comuni della stampante

• In che modo l'app Signal Desktop può aiutarti a proteggere la tua privacy

• Usa una vecchia web cam per monitorare la tua proprietà gratuitamente

• Che cos'è Microsoft Power Automate e modelli gratuiti da scaricare