Come utilizzare gli strumenti di sviluppo del browser Web

Oltre alla maggior parte dei creatori di browser che si concentrano sull'utente quotidiano che cerca di navigare sul Web, si rivolgono anche agli sviluppatori Web, ai progettisti e ai professionisti dell'assicurazione qualità che aiutano a creare app e siti a cui gli utenti accedono integrando potenti strumenti direttamente nei browser loro 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 di oggi ti consentono di fare immersioni più profonde eseguendo operazioni come l'esecuzione e il debug di snippet di JavaScript, l'ispezione e la modifica di elementi DOM, il monitoraggio del traffico di rete in tempo reale mentre l'app o la pagina vengono caricate per identificare i colli di bottiglia, l'analisi delle prestazioni CSS, assicurando che il codice sia non utilizza troppa memoria o troppi cicli della CPU e molto altro. Dal punto di vista del test, puoi riprodurre il modo in cui un'app o una pagina Web verranno visualizzate in browser diversi e 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 lasciare il tuo browser!

Le esercitazioni di seguito illustrano come accedere a questi strumenti di sviluppo in diversi browser Web popolari.

Google Chrome

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

1. Fai clic sul pulsante del 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 sopra il Più strumenti opzione.
3. Ora dovrebbe apparire un sottomenu. Seleziona l'opzione etichettata Strumenti di sviluppo . Puoi anche utilizzare la seguente scorciatoia da tastiera al posto di questa voce di menu: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPZIONE) + Comando + I )
4. Ora dovrebbe essere visualizzata l'interfaccia degli Strumenti per sviluppatori di Chrome, come mostrato in questo esempio di schermata. A seconda della versione di Chrome, il layout iniziale che vedi potrebbe essere leggermente diverso da quello presentato qui. L'hub principale degli strumenti di sviluppo, in genere situato sul lato inferiore o destro dello schermo, contiene le seguenti schede.Elementi: Offre la possibilità di ispezionare codice CSS e HTML e di modificare CSS al volo, visualizzando gli effetti delle modifiche in tempo reale.Console: La console JavaScript di Chrome consente l'immissione diretta dei comandi e il debug diagnostico.fonti: Consente di eseguire il debug del codice JavaScript tramite una potente interfaccia grafica.Rete: Classifica e visualizza informazioni dettagliate su ciascuna operazione correlata sull'applicazione o sulla pagina attiva, comprese le intestazioni di richiesta e risposta complete nonché le metriche di temporizzazione avanzate.Sequenza temporale: Consente l'analisi approfondita di ogni attività che avviene all'interno del browser non appena viene avviata una richiesta di caricamento di pagine o app.
5. Oltre a queste sezioni, puoi anche accedere ai seguenti strumenti tramite >> icona, situata a destra di Sequenza temporale scheda.Profilo: Scomposto in Profiler CPU e Profilatore di heap sezioni, fornisce un uso completo della memoria e il tempo di esecuzione complessivo dell'applicazione o della pagina attiva.Sicurezza: Mette in evidenza i problemi dei certificati e altri problemi relativi alla sicurezza con la pagina o l'applicazione attiva.risorse: È qui che è possibile ispezionare i cookie, la memoria locale, la cache delle app e altre origini dati locali utilizzate dalla pagina Web o dall'applicazione corrente.audit: Offre modi per ottimizzare una pagina o il tempo di caricamento di un'applicazione e le prestazioni generali.
6. Modalità dispositivo consente di visualizzare la pagina attiva in un simulatore che la rende quasi esattamente come apparirebbe su una delle oltre una dozzina di dispositivi, inclusi diversi noti modelli Android e iOS come iPad, iPhone e Samsung Galaxy. Hai anche la possibilità di emulare risoluzioni dello schermo personalizzate per soddisfare le tue particolari esigenze di sviluppo o test. Per attivare Modalità dispositivo on e off, selezionare l'icona del telefono cellulare situata direttamente a sinistra di Elementi scheda.
7. Puoi anche personalizzare l'aspetto dei tuoi strumenti di sviluppo facendo prima clic sul pulsante del menu rappresentato da tre punti disposti verticalmente e situati nell'estrema destra delle schede sopracitate. All'interno di questo menu a discesa, puoi riposizionare il dock, mostrare o nascondere diversi strumenti e lanciare elementi più avanzati come un'ispettore dispositivo. Scoprirai che l'interfaccia per gli strumenti di sviluppo è altamente personalizzabile tramite le impostazioni trovate in questa sezione.

Mozilla Firefox

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

Lettura raccomandata Lifewire:I 25 principali script utente di Greasemonkey e Tampermonkey

1. Fai clic sul pulsante del 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, selezionare l'icona con l'etichetta Sviluppatore . Il Sviluppatore web ora dovrebbe essere visualizzato il menu, 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. Tasti di scelta rapida: Mac OS X ( ALT (OPZIONE) + Comando + I ), Finestre ( CTRL + SHIFT + I )Ispettore: Consente di ispezionare e / o modificare codice CSS e HTML sulla pagina attiva e su un dispositivo portatile tramite debug remoto. Tasti di scelta rapida: Mac OS X ( ALT (OPZIONE) + COMMAND + C ), Finestre ( CTRL + SHIFT + C )Console Web: Consente di eseguire espressioni JavaScript all'interno della pagina attiva e di rivedere una serie diversificata di dati registrati, inclusi avvisi di sicurezza, richieste di rete, messaggi CSS e altro. Tasti di scelta rapida: Mac OS X ( ALT (OPZIONE) + COMMAND + K ), Finestre ( CTRL + SHIFT + K )Debugger: Il JavaScript Debugger consente di individuare e correggere i difetti impostando i punti di interruzione, ispezionando i nodi DOM, le fonti esterne di boxing nero e molto altro ancora. Come nel caso del Ispettore , questa funzione supporta anche il debug remoto. Tasti di scelta rapida: Mac OS X ( ALT (OPZIONE) + COMMAND + S ), Finestre ( CTRL + MAIUSC + S) Editor di stili: Ti permette di creare nuovi fogli di stile e incorporarli con la pagina Web attiva, oppure modificare i fogli esistenti e verificare come le tue modifiche vengono visualizzate in un browser con un solo clic. Tasti di scelta rapida: Mac OS X, Windows ( SHIFT + F7 )Prestazione: Fornisce una ripartizione dettagliata delle prestazioni della rete della pagina attiva, i dati della frequenza fotogrammi, il tempo e lo stato di esecuzione di JavaScript, il flashing della pittura e molto altro. Tasti di scelta rapida: Mac OS X, Windows ( SHIFT + F5 )Rete: Elenca ogni richiesta di rete avviata dal browser insieme al metodo, al dominio di origine, al tipo, alle dimensioni e al tempo corrispondenti. Tasti di scelta rapida: Mac OS X ( ALT (OPZIONE) + COMMAND + Q ), Finestre ( CTRL + MAIUSC + Q )Barra degli strumenti per sviluppatori: Apre un interprete interattivo della riga di comando. accedere Aiuto nell'interprete per un elenco di tutti i comandi disponibili e la loro sintassi corretta. Tasti di scelta rapida: Mac OS X, Windows ( SHIFT + F2 )WebIDE: Offre la possibilità di creare ed eseguire app Web tramite un dispositivo reale con sistema operativo Firefox o tramite Firefox OS Simulator. Tasti di scelta rapida: Mac OS X, Windows ( SHIFT + F8 )Console del browser: Fornisce la stessa funzionalità di Console Web (vedi sopra). Tuttavia, tutti i dati restituiti riguardano l'intera applicazione di Firefox (comprese le estensioni e le funzioni a livello di browser) anziché la sola pagina Web attiva. Tasti di scelta rapida: Mac OS X ( SHIFT + COMMAND + J ), Finestre ( CTRL + MAIUSC + J )Vista di progettazione reattiva: Consente di visualizzare immediatamente una pagina Web in diverse risoluzioni, layout e dimensioni dello schermo per imitare più dispositivi, inclusi tablet e smartphone. Tasti di scelta rapida: Mac OS X ( ALT (OPZIONE) + COMANDO + M ), Finestre ( CTRL + MAIUSC + M )contagocce: Visualizza il codice colore esadecimale per i pixel selezionati individualmente.Scratchpad: Consente di scrivere, modificare, integrare ed eseguire snippet di codice JavaScript all'interno di una finestra di Firefox. Tasti di scelta rapida: Mac OS X, Windows ( SHIFT + F4 )Fonte di pagina: Lo strumento di sviluppo originale basato su browser, questa opzione mostra semplicemente il codice sorgente disponibile per la pagina attiva. Tasti di scelta rapida: Mac OS X ( COMMAND + U ), Finestre ( CTRL + U )Ottieni altri strumenti: Apre il Toolbox per gli sviluppatori Web raccolta sul sito ufficiale di Mozilla, con circa una dozzina di estensioni popolari come Firebug e Greasemonkey.

Microsoft Edge / Internet Explorer

Comunemente indicato come il Strumenti di sviluppo F12 , 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 pratico di monitor, debugger, emulatori e compilatori del the-fly.

1. Clicca sul Più azioni menu, rappresentato da tre punti e situato nell'angolo in alto a destra della finestra del browser. Quando viene visualizzato il menu a discesa, selezionare l'opzione etichettata Strumenti di sviluppo F12 . Come ho già detto, puoi anche accedere agli strumenti tramite il F12 scorciatoia da tastiera.
2. 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 sulla rispettiva intestazione della scheda o utilizzando la scorciatoia da tastiera associata.DOM Explorer: Consente di modificare i fogli di stile e l'HTML nella pagina attiva, visualizzando i risultati modificati man mano che si procede. Utilizza la funzionalità IntelliSense per completare automaticamente il codice laddove applicabile. Scorciatoia da tastiera: (CTRL + 1) Console: Offre la possibilità di inviare informazioni di debug tra contatori, timer, tracce e messaggi personalizzati tramite un'API integrata. Inoltre, consente di iniettare il 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 i punti di interruzione e di eseguire il debug del codice mentre viene eseguito, 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 dettagli del protocollo, tipo di contenuto, utilizzo della larghezza di banda e molto altro. Scorciatoia da tastiera: (CTRL + 4) Prestazione: Frequenze fotogrammi dei dettagli, utilizzo della CPU e altre metriche relative alle prestazioni per velocizzare i tempi di caricamento delle pagine e altre attività. Scorciatoia da tastiera: (CTRL + 5) Memoria: Aiuta a isolare e correggere potenziali perdite di memoria sulla pagina Web corrente visualizzando una timeline di utilizzo della memoria insieme a istantanee di diversi intervalli di tempo. Scorciatoia da tastiera: (CTRL + 6) Emulazione: Mostra come la pagina attiva viene visualizzata in varie risoluzioni e dimensioni dello schermo, emulando smartphone, tablet e altri dispositivi. Fornisce inoltre la possibilità di modificare l'agente utente e l'orientamento della pagina, nonché di simulare diverse geolocalizzazioni inserendo una latitudine e una longitudine. Scorciatoia da tastiera: (CTRL + 7)
3. Per visualizzare il consolle mentre all'interno di uno degli altri strumenti clicca sul pulsante quadrato con una parentesi destra all'interno di esso, situato nell'angolo in alto a destra dell'interfaccia degli strumenti di sviluppo.
4. Per sganciare, l'interfaccia degli strumenti di sviluppo diventa così una finestra separata, fare clic sul pulsante rappresentato da due rettangoli a cascata o utilizzare la seguente scorciatoia da tastiera: CTRL + P . È possibile riportare gli strumenti nella loro posizione originale premendo CTRL + P una seconda volta.

Apple Safari (solo OS X)

Il variegato set di strumenti di sviluppo di Safari riflette la grande 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, sono disponibili anche una modalità di progettazione reattiva di facile utilizzo e uno strumento per creare le proprie estensioni del browser.

1. Clicca su Safari nel menu del browser, che si trova nella parte superiore dello schermo. Quando viene visualizzato il menu a discesa, selezionare Preferenze . Puoi anche usare la seguente scorciatoia da tastiera al posto di questa voce di menu: COMMAND + virgola (,)
2. Safari Preferenze ora dovrebbe essere visualizzata l'interfaccia, sovrapposta alla finestra del browser. Clicca sul Avanzate icona, situata nell'estrema destra dell'intestazione.
3. Il Avanzate le preferenze dovrebbero ora essere visibili. In fondo a questa schermata c'è un'opzione etichettata Mostra il menu Sviluppo nella barra dei menu , accompagnato da una casella di controllo. Se nella casella non è presente alcun segno di spunta, fare clic su di esso una volta per inserirne uno.
4. Chiudi il Preferenze interfaccia cliccando sulla 'x' rossa trovata nell'angolo in alto a sinistra.
5. Ora dovresti notare una nuova opzione nel menu del browser chiamato Sviluppare , situato tra segnalibri e Finestra . Clicca su questa voce di menu. Ora dovrebbe essere visualizzato un menu a discesa contenente le seguenti opzioni.Pagina aperta con: Ti permette di aprire la pagina Web attiva in uno degli altri browser attualmente installati sul tuo Mac.Agente utente: Consente di selezionare tra una dozzina di valori predefiniti per gli user agent, tra cui diverse versioni di Chrome, Firefox e Internet Explorer, oltre a definire una stringa personalizzata.Entra in modalità progettazione reattiva: Esegue il rendering della pagina corrente come apparirebbe su vari dispositivi e con diverse risoluzioni dello schermo.Mostra Web Inspector: Avvia l'interfaccia principale per gli strumenti di sviluppo di Safari, in genere posizionata nella parte inferiore della schermata del browser e contenente le seguenti sezioni: Elementi , Rete , risorse , Linea del tempo , Debugger , Conservazione , consolle .Mostra console degli errori: Lancia anche l'interfaccia degli strumenti di sviluppo, direttamente su consolle scheda che visualizza errori, avvisi e altri dati di registro ricercabili.Mostra origine pagina: Apre il risorse scheda, che mostra il codice sorgente per la pagina attiva categorizzata per documento.Mostra risorse della pagina: Esegue la stessa funzione del Mostra origine pagina opzione.Mostra editor di frammenti: Apre una nuova finestra in cui è possibile inserire codice CSS e HTML, visualizzando in anteprima l'output al volo.Mostra Extension Builder: Offre la possibilità di creare o modificare estensioni di Safari con CSS, HTML e JavaScript.Mostra registrazione linea temporale: Apre il Linea del tempo scheda e inizia a visualizzare le richieste di rete, il layout e le informazioni di rendering, nonché l'esecuzione di JavaScript in tempo reale.Cache vuote: Elimina l'intera cache attualmente archiviata sul tuo disco rigido.Disabilita cache: Arresta Safari dalla memorizzazione nella cache in modo che tutti i contenuti vengano recuperati dal server al caricamento di ogni 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.Disabilita estensioni: Proibisce l'esecuzione di tutte le estensioni installate nel browser.Disabilitare gli attacchi specifici del sito: Se Safari è stato modificato per gestire in modo esplicito i problemi specifici della pagina Web attiva, questa opzione bloccherà tali modifiche in modo che la pagina venga caricata come avrebbe fatto prima che queste modifiche venissero introdotte.Disabilita limitazioni file locali: Consente al browser di accedere ai file sui dischi locali, un'azione limitata per impostazione predefinita per motivi di sicurezza.Disabilita le restrizioni tra origini diverse: Queste restrizioni sono messe in atto di default per prevenire l'XSS e altri potenziali pericoli. Tuttavia, spesso devono essere temporaneamente disabilitati per scopi di sviluppo.Consenti JavaScript dal campo di ricerca intelligente: Se abilitato, fornisce la possibilità di inserire URL con javascript: incorporato direttamente nella barra degli indirizzi.Trattare i certificati SHA-1 come non sicuri: I certificati SSL che utilizzano l'algoritmo SHA-1 sono ampiamente considerati non aggiornati e vulnerabili.