Come utilizzare gli strumenti di sviluppo del browser Web

2024 Autore: Abigail Brown | [email protected]. Ultima modifica: 2024-01-07 19:04

Oltre alla maggior parte dei produttori di browser che si concentrano sull'utente quotidiano che cerca di navigare sul Web, si rivolgono anche a sviluppatori Web, designer e professionisti del controllo qualità che aiutano a creare app e siti a cui accedono quegli utenti integrando potenti strumenti direttamente nei browser stessi.

Sono finiti i giorni in cui gli unici strumenti di programmazione e test trovati all'interno di un browser ti permettevano di visualizzare il codice sorgente di una pagina e nient' altro. I browser odierni ti consentono di fare un'immersione molto più approfondita eseguendo operazioni come l'esecuzione e il debug di snippet JavaScript, l'ispezione e la modifica di elementi DOM, il monitoraggio del traffico di rete in tempo reale durante il caricamento dell'app o della pagina per identificare i colli di bottiglia, l'analisi delle prestazioni CSS, la verifica che il codice sia non utilizzare troppa memoria o troppi cicli della CPU e molto altro.

Da una prospettiva di test, puoi riprodurre il rendering di un'app o di una pagina Web in diversi browser, nonché su diversi dispositivi e piattaforme attraverso la magia del design reattivo e dei simulatori integrati. La parte migliore è che puoi fare tutto questo senza dover uscire dal browser!

I tutorial di seguito ti guidano attraverso come accedere a questi strumenti per sviluppatori in diversi browser Web popolari.

Google Chrome

Gli strumenti di sviluppo di Chrome ti consentono di modificare ed eseguire il debug del codice, controllare i singoli componenti per esporre problemi di prestazioni, simulare diversi schermi di dispositivi inclusi quelli con Android o iOS ed eseguire molte altre utili funzioni.

1. Seleziona il menu principale di Chrome, contrassegnato da tre linee orizzontali e situato nell'angolo in alto a destra del browser.

2. Quando viene visualizzato il menu a discesa, posiziona il cursore del mouse sull'opzione Altri strumenti.

   

3. Ora dovrebbe apparire un sottomenu. Seleziona l'opzione denominata Strumenti per sviluppatori. Puoi anche utilizzare la seguente scorciatoia da tastiera al posto di questa voce di menu: Chrome OS/Windows (CTRL+MAIUSC+I), Mac OS X (ALT(OPZIONE) +COMANDO+I)

   

4. L'interfaccia degli strumenti per sviluppatori di Chrome dovrebbe ora essere visualizzata, come mostrato in questa schermata di esempio. A seconda della versione di Chrome in uso, il layout iniziale visualizzato potrebbe essere leggermente diverso da quello presentato qui. L'hub principale degli strumenti di sviluppo, in genere situato sul lato inferiore o sul lato destro dello schermo, contiene le seguenti schede.

5. Oltre a queste sezioni, puoi anche accedere ai seguenti strumenti tramite l'icona >>, situata a destra di Performance tab.

   • Memoria: Monitora e registra l'utilizzo della memoria su una pagina web. Puoi vedere quanto è pesante il JavaScript sul tuo sito.
   • Sicurezza: evidenzia i problemi relativi ai certificati e altri problemi relativi alla sicurezza con la pagina o l'applicazione attiva.
   • Applicazione: controlla le risorse utilizzate da un'applicazione web. Ottieni un'analisi completa di ciò che viene utilizzato.
   • Audits: offre modi per ottimizzare il tempo di caricamento di una pagina o di un'applicazione e le prestazioni generali.

   

6. Modalità dispositivo ti consente di visualizzare la pagina attiva in un simulatore che la rende quasi esattamente come sembrerebbe su uno degli oltre una dozzina di dispositivi, inclusi diversi noti Android e modelli iOS come iPad, iPhone e Samsung Galaxy. Ti viene anche data la possibilità di emulare risoluzioni dello schermo personalizzate per soddisfare le tue particolari esigenze di sviluppo o test.

   Per attivare e disattivare Modalità dispositivo, seleziona l'icona cellulare situata direttamente a sinistra di Elementi tab.

   

7. Puoi anche personalizzare l'aspetto dei tuoi strumenti di sviluppo selezionando prima il pulsante del menu rappresentato da tre punti posizionati verticalmente e si trova all'estrema destra delle suddette schede.

   Da questo menu a discesa, puoi riposizionare il dock, mostrare o nascondere diversi strumenti e avviare elementi più avanzati come un controllo dispositivo. Scoprirai che l'interfaccia degli strumenti di sviluppo è altamente personalizzabile tramite le impostazioni che si trovano in questa sezione.

   

Mozilla Firefox

La sezione per sviluppatori web di Firefox include strumenti per designer, sviluppatori e tester, come un editor di stile e un contagocce per il targeting dei pixel.

1. Seleziona il menu principale di Firefox, rappresentato da tre linee orizzontali e situato nell'angolo in alto a destra della finestra del browser.

2. Quando viene visualizzato il menu a discesa, seleziona Sviluppatore Web.

   

3. Il menu Sviluppatore Web dovrebbe ora essere visualizzato, contenente le seguenti opzioni. Noterai che alla maggior parte delle voci di menu sono associate scorciatoie da tastiera.

   • Attiva/disattiva strumenti: Visualizza o nasconde l'interfaccia degli strumenti per sviluppatori, generalmente posizionata nella parte inferiore della finestra del browser. Scorciatoia da tastiera: Mac OS X (ALT(OPZIONE)+COMANDO+I), Windows (CTRL+MAIUSC+I)
   • Inspector: ti consente di ispezionare e/o modificare il codice CSS e HTML sulla pagina attiva e su un dispositivo portatile tramite il debug remoto. Scorciatoia da tastiera: Mac OS X (ALT(OPZIONE)+COMANDO+C), Windows (CTRL+MAIUSC+C)
   • Web Console: consente di eseguire espressioni JavaScript all'interno della pagina attiva e di rivedere un insieme diversificato di dati registrati, inclusi avvisi di sicurezza, richieste di rete, messaggi CSS e altro. Scorciatoia da tastiera: Mac OS X (ALT(OPZIONE)+COMANDO+K), Windows (CTRL+MAIUSC+K)
   • Debugger: JavaScript Debugger ti consente di individuare e correggere i difetti impostando punti di interruzione, ispezionando nodi DOM, black boxing fonti esterne e molto altro. Come nel caso di Inspector, questa funzione supporta anche il debug remoto. Scorciatoia da tastiera: Mac OS X (ALT(OPZIONE)+COMANDO+S), Windows (CTRL+MAIUSC+S)
   • Editor di stile: ti consente di creare nuovi fogli di stile e incorporarli nella pagina Web attiva, o modificare fogli esistenti e testare come vengono visualizzate le modifiche in un browser con un solo clic. Scorciatoia da tastiera: Mac OS X, Windows (MAIUSC+F7)
   • Performance: fornisce un'analisi dettagliata delle prestazioni di rete della pagina attiva, dei dati sulla frequenza dei fotogrammi, del tempo e dello stato di esecuzione di JavaScript, del colore lampeggiante e molto altro. Scorciatoia da tastiera: Mac OS X, Windows (MAIUSC+F5)
   • Rete: elenca ogni richiesta di rete avviata dal browser insieme al metodo corrispondente, al dominio di origine, al tipo, alle dimensioni e al tempo trascorso. Scorciatoia da tastiera: Mac OS X (ALT(OPZIONE)+COMANDO+Q), Windows (CTRL+MAIUSC+Q)
   • Storage Inspector: dai un'occhiata alla cache e ai cookie memorizzati da un sito web. Scorciatoia da tastiera: (MAIUSC+F9)
   • Barra degli strumenti per sviluppatori: Apre un interprete interattivo della riga di comando. Immettere help nell'interprete per un elenco di tutti i comandi disponibili e la loro sintassi corretta. Scorciatoia da tastiera: Mac OS X, Windows (MAIUSC+F2)
   • WebIDE: offre la possibilità di creare ed eseguire app Web tramite un dispositivo reale che esegue Firefox OS o tramite il simulatore di Firefox OS. Scorciatoia da tastiera: Mac OS X, Windows (MAIUSC+F8)
   • Console browser: Fornisce le stesse funzionalità della Console Web (vedi sopra). Tuttavia, tutti i dati restituiti riguardano l'intera applicazione Firefox (incluse le estensioni e le funzioni a livello di browser) e non solo la pagina Web attiva. Scorciatoia da tastiera: Mac OS X (MAIUSC+COMANDO+J), Windows (CTRL+MAIUSC+J)
   • Vista del design reattivo: consente di visualizzare istantaneamente una pagina Web con diverse risoluzioni, layout e dimensioni dello schermo per imitare più dispositivi inclusi tablet e smartphone. Scorciatoia da tastiera: Mac OS X (ALT(OPZIONE)+COMANDO+M), Windows (CTRL+MAIUSC+M)
   • Contagocce: Visualizza il codice colore esadecimale per i pixel selezionati individualmente.
   • Scratchpad: Scratchpad ti consente di scrivere, modificare, integrare ed eseguire frammenti di codice JavaScript da una finestra pop-out di Firefox. Apri un documento JavaScript interattivo che ti consente di scrivere nel codice e testarlo su un sito web. Scorciatoia da tastiera: (MAIUSC+F4)
   • Service Workers: Esegui il debug dei service worker della tua applicazione web. Ottieni informazioni dettagliate sulle loro prestazioni ed errori.
   • Fonte pagina: L'originale strumento di sviluppo basato su browser, questa opzione mostra semplicemente il codice sorgente disponibile per la pagina attiva. Scorciatoia da tastiera: Mac OS X (COMANDO+U), Windows (CTRL+U)
   • Ottieni più strumenti: Apre la raccolta Web Developer's Toolbox sul sito ufficiale dei componenti aggiuntivi di Mozilla, con una dozzina di estensioni popolari come come Firebug e Greasemonkey.

   

Microsoft Edge/Internet Explorer

Comunemente indicato come Strumenti per sviluppatori F12, un omaggio alla scorciatoia da tastiera che ha lanciato l'interfaccia sin dalle versioni precedenti di Internet Explorer, il set di strumenti di sviluppo in IE11 e Microsoft Edge ha fatto molta strada sin dal suo inizio offrendo un gruppo molto utile di monitor, debugger, emulatori e compilatori al volo.

Microsoft non supporta più Internet Explorer e consiglia di eseguire l'aggiornamento al browser Edge più recente. Vai al loro sito per scaricare la versione più recente.

1. Seleziona Altre azioni, rappresentate da tre punti e si trovano nell'angolo in alto a destra della finestra del browser.

   

2. Quando viene visualizzato il menu a discesa, seleziona l'opzione denominata Strumenti per sviluppatori.

   

3. L'interfaccia di sviluppo dovrebbe ora essere visualizzata, in genere nella parte inferiore della finestra del browser. Sono disponibili i seguenti strumenti, ciascuno accessibile facendo clic sull'intestazione della rispettiva scheda o utilizzando la scorciatoia da tastiera associata.

   

   • DOM Explorer: Ti permette di modificare fogli di stile e HTML nella pagina attiva, visualizzando i risultati modificati man mano che procedi. Utilizza la funzionalità IntelliSense per completare automaticamente il codice, ove applicabile. Scorciatoia da tastiera: (CTRL+1)
   • Console: offre la possibilità di inviare informazioni di debug inclusi contatori, timer, tracce e messaggi personalizzati tramite un'API integrata. Inoltre, consente di inserire codice in una pagina Web attiva e modificare i valori assegnati alle singole variabili in tempo reale. Scorciatoia da tastiera: (CTRL+2)
   • Debugger: consente di impostare punti di interruzione ed eseguire il debug del codice durante l'esecuzione, riga per riga se necessario. Scorciatoia da tastiera: (CTRL+3)
   • Rete: elenca ogni richiesta di rete avviata dal browser durante il caricamento e l'esecuzione della pagina, inclusi i dettagli del protocollo, il tipo di contenuto, l'utilizzo della larghezza di banda e molto altro. Scorciatoia da tastiera: (CTRL+4)
   • Performance: dettagli su frame rate, utilizzo della CPU e altre metriche relative alle prestazioni per aiutarti a velocizzare i tempi di caricamento della pagina e altre attività. Scorciatoia da tastiera: (CTRL+5)
   • Memoria: ti aiuta a isolare e correggere potenziali perdite di memoria sulla pagina Web corrente visualizzando una sequenza temporale di utilizzo della memoria insieme a istantanee da diversi intervalli di tempo. Scorciatoia da tastiera: (CTRL+6)
   • Emulazione: mostra come la pagina attiva verrebbe visualizzata in varie risoluzioni e dimensioni dello schermo, emulando smartphone, tablet e altri dispositivi. Fornisce inoltre la possibilità di modificare lo user agent e l'orientamento della pagina, nonché di simulare diverse geolocalizzazioni inserendo una latitudine e una longitudine. Scorciatoia da tastiera: (CTRL+7)

4. Per visualizzare la Console mentre sei all'interno di uno qualsiasi degli altri strumenti, premi il pulsante quadrato con una parentesi a destra all'interno, che si trova in nell'angolo in alto a destra dell'interfaccia degli strumenti di sviluppo.

   

5. Per sganciare l'interfaccia degli strumenti di sviluppo in modo che diventi una finestra separata, seleziona i due rettangoli sovrapposti o usa la seguente scorciatoia da tastiera: CTRL+P. Puoi rimettere gli strumenti nella loro posizione originale premendo CTRL+P una seconda volta.

   

Apple Safari (solo Mac)

Il set di strumenti di sviluppo di Safari riflette la vasta comunità di sviluppatori che utilizza un Mac per le proprie esigenze di progettazione e programmazione. Oltre a una potente console e alle tradizionali funzionalità di registrazione e debug, vengono forniti anche una modalità di progettazione reattiva di facile utilizzo e uno strumento per creare le proprie estensioni del browser.

1. Seleziona Safari nel menu del browser, situato nella parte superiore dello schermo. Quando viene visualizzato il menu a discesa, seleziona Preferenze. Puoi anche usare la seguente scorciatoia da tastiera al posto di questa voce di menu: COMANDO+COMMA(,)

   

2. L'interfaccia Preferenze di Safari dovrebbe ora essere visualizzata, sovrapponendosi alla finestra del browser. Seleziona l'icona Avanzate, situata all'estrema destra dell'intestazione.

   

3. Le preferenze Avanzate ora dovrebbero essere visibili. Nella parte inferiore di questa schermata c'è un'opzione etichettata Mostra menu Sviluppo nella barra dei menu, accompagnata da una casella di controllo. Se non è presente alcun segno di spunta nella casella, fare clic su di esso una volta per posizionarne uno lì.

   

4. Chiudi l'interfaccia Preferenze.

5. Ora dovresti notare una nuova opzione nel menu del browser denominata Develop, situata tra Bookmarks e Window. Fare clic su questa voce di menu. Ora dovrebbe essere visualizzato un menu a discesa, contenente le seguenti opzioni.

   • Apri pagina con: ti permette di aprire la pagina web attiva in uno degli altri browser attualmente installati sul tuo Mac.
   • User Agent: ti consente di selezionare tra oltre una dozzina di valori predefiniti di user agent tra cui diverse versioni di Chrome, Firefox e Internet Explorer, oltre a definire il tuo personalizzato stringa.
   • Entra in Responsive Design Mode: Rende la pagina corrente come apparirebbe su vari dispositivi e con diverse risoluzioni dello schermo.
   • Show Web Inspector: avvia l'interfaccia principale per gli strumenti di sviluppo di Safari, generalmente posizionata nella parte inferiore dello schermo del browser e contenente le seguenti sezioni: Elementi, Rete, Risorse, Sequenze temporali, Debugger, Archiviazione, Console.
   • Mostra console di errore: avvia anche l'interfaccia degli strumenti di sviluppo, direttamente nella scheda Console che mostra errori, avvisi e altri elementi ricercabili dati di registro.
   • Mostra sorgente pagina: Apre la scheda Risorse, che mostra il codice sorgente per la pagina attiva classificata dal documento.
   • Mostra risorse pagina: esegue la stessa funzione dell'opzione Mostra sorgente pagina.
   • Show Snippet Editor: Apre una nuova finestra in cui puoi inserire codice CSS e HTML, visualizzandone in anteprima l'output al volo.
   • Show Extension Builder: Offre la possibilità di creare o modificare estensioni Safari con CSS, HTML e JavaScript.
   • Mostra registrazione sequenza temporale: Apre la scheda Sequenze temporali e inizia a visualizzare le richieste di rete, il layout e le informazioni sul rendering, nonché l'esecuzione di JavaScript in tempo reale.
   • Empty Caches: Elimina l'intera cache attualmente archiviata sul disco rigido.
   • Disabilita cache: impedisce a Safari di memorizzare nella cache in modo che tutto il contenuto venga recuperato dal server ad ogni caricamento della pagina.
   • Disabilita immagini: Impedisce il rendering delle immagini su tutte le pagine web.
   • Disabilita stili: Ignora le proprietà CSS quando viene caricata una pagina.
   • Disabilita JavaScript: limita l'esecuzione di JavaScript su tutte le pagine.
   • Disable Extensions: Impedisce l'esecuzione di tutte le estensioni installate all'interno del browser.
   • Disabilita hack specifici del sito: Se Safari è stato modificato per gestire esplicitamente i problemi specifici della pagina Web attiva, questa opzione bloccherà tali modifiche in modo che la pagina carica come sarebbe stato prima dell'introduzione di queste modifiche.
   • Disable Local File Restrictions: consente al browser di accedere ai file sui dischi locali, un'azione che è limitata per impostazione predefinita per motivi di sicurezza.
   • Disabilita restrizioni cross-Origin: queste restrizioni sono messe in atto per impostazione predefinita per prevenire XSS e altri potenziali pericoli. Tuttavia, spesso devono essere temporaneamente disabilitati per scopi di sviluppo.
   • Consenti JavaScript dal campo di ricerca intelligente: se abilitato, offre la possibilità di inserire URL con javascript: incorporato direttamente nella barra degli indirizzi.
   • Tratta i certificati SHA-1 come non sicuri: I certificati SSL che utilizzano l'algoritmo SHA-1 sono ampiamente considerati obsoleti e vulnerabili.