Tutto quello che c'è da sapere sugli strumenti per sviluppatori di Firefox

La Firefox Developer Edition è una versione speciale di Firefox creata su misura per gli sviluppatori. È dotato di tutte le ultime funzionalità di Firefox insieme a una serie di strumenti di sviluppo specializzati. Qui fornirò una guida alle sue funzionalità in modo che tu sappia tutto quello che c'è da sapere sugli strumenti per sviluppatori di Firefox.

Interfaccia utente

Dopo aver installato Firefox Developer Edition, noterai che ha un aspetto leggermente diverso dalla barra degli strumenti standard di Firefox. Firefox ha sicuramente adottato un approccio più incentrato sugli sviluppatori nel progettare la sua barra degli strumenti, rendendola più stretta nell'aspetto e decorata con molti più pulsanti per impostazione predefinita.

Il tema predefinito per Firefox Developer Tools è scuro, che è probabilmente il risultato dei test degli utenti. Tuttavia, se non ti piace il tema scuro, puoi sempre disattivare il tema dell'edizione per sviluppatori andando su Menu > Personalizza .

Strumenti di creazione

La Firefox Developer Edition viene fornita con una serie di strumenti di creazione, progettati per coloro che creano siti Web e app Web. Di seguito ho fornito una panoramica degli strumenti e dei loro vantaggi in modo da non dover cercare queste informazioni.

Blocco per appunti

Questo strumento offre agli sviluppatori web l'opportunità di sperimentare il codice JavaScript. Nell'ambiente fornito da Scratchpad puoi scrivere, eseguire ed esaminare i risultati del codice che interagisce con la pagina corrente.

Per aprire Scratchpad basta premere Shift F4 o andare al menu Web Developer e fare clic su Scratchpad. Si aprirà la finestra in cui puoi scrivere il tuo codice. Al termine, fai clic su Esegui > Esegui e il codice verrà eseguito nella scheda corrente.

Editor di stile

L'editor di stile consente agli sviluppatori web di visualizzare e modificare tutti i fogli di stile con la pagina associata. Potrai anche creare nuovi fogli di stile da zero e applicarli a una pagina, nonché importare fogli di stile esistenti e applicarli alla pagina corrente.

Per aprire l'Editor di stile, vai al menu Sviluppatore Web e fai clic su Editor di stile . Il Firefox Developer Toolbox apparirà quindi nella parte inferiore del browser con l'Editor di stile pronto per l'uso.

Editor shader

Usare l'Editor Shader in Firefox è semplice. Gli sviluppatori possono visualizzare e modificare completamente gli shader dei frammenti e il vertice utilizzati da WebGL. E subito per chi non lo sapesse, WebGL utilizza in modo intelligente JavaScript (tramite un'API) per eseguire il rendering di grafica 2D e 3D direttamente tramite il browser Firefox, senza richiedere l'uso di plug-in.

Per poter utilizzare l'Editor Shader, è necessario prima abilitarlo. Per fare ciò, vai alle impostazioni della casella degli strumenti e quindi seleziona la casella accanto a "Shader Editor". Lo Shader Editor verrà quindi visualizzato nella barra degli strumenti di Firefox. Cliccaci sopra e sarai in grado di aprirlo.

Editor audio web

L'API Web Audio Editor consente agli sviluppatori di creare un contesto audio. Gli sviluppatori dovranno creare nodi audio che forniscano:

• Sorgenti audio
• Nodi che eseguono trasformazioni
• Note che rappresentano la destinazione scelta per il flusso audio.

Il Web Audio Editor esaminerà gli aspetti audio di una pagina e ne fornirà una rappresentazione visiva in un grafico. Ciò consente agli sviluppatori di esaminare funzionalità e funzionamento e di verificare che tutti i nodi si connettano correttamente. Gli sviluppatori possono sia modificare che esaminare le proprietà del nodo AudioParam, così come altre proprietà.

Come lo Shader Editor, il Web Audio Editor deve essere abilitato manualmente e non è un'impostazione predefinita. L'abilitazione è semplice: torna alle Impostazioni dello strumento per sviluppatori e seleziona la casella accanto a "Audio web". Vedrai quindi che è presente una scheda aggiuntiva nella barra degli strumenti di Firefox Toolbox. Basta fare clic su questa scheda e verrà caricata una pagina da cui è possibile costruire un contesto audio.

Strumenti di debug

Gli strumenti di debug di Firefox sono progettati per esaminare, esplorare ed eseguire il debug di siti Web e app Web. Di seguito ho delineato le caratteristiche principali di alcuni di questi strumenti e i loro vantaggi.

Ispettore pagina

Lo strumento Page Inspector consente agli sviluppatori di ispezionare e apportare modifiche alla codifica HTML e CSS di una pagina web. Utilizzando questo strumento, gli sviluppatori possono esaminare le pagine tramite la versione caricata localmente o tramite una destinazione remota.

Aprire il Controllo pagina è facile. Se hai selezionato un elemento, puoi semplicemente fare clic con il pulsante destro del mouse sull'elemento e quindi selezionare "Ispeziona elemento". In alternativa, puoi andare al menu Web Developer e quindi fare clic sull'opzione Inspector. L'Ispettore pagina apparirà quindi nella parte inferiore del browser.

Console Web

Questo strumento registra tutte le informazioni associate a una pagina Web, come richieste di rete, JavaScript, CSS, errori e avvisi di sicurezza, avvisi di errore e messaggi informativi. Consente inoltre di interagire con una pagina Web utilizzando JavaScript.

La Web Console è stata progettata per sostituire la vecchia Error Console, originariamente parte di Firefox Developer Tools. Mentre la Console degli errori ha fornito un enorme elenco di errori da più pagine, la Console Web mostrerà sempre e solo le informazioni associate a una pagina Web specifica, rendendola quindi più utile.

Per aprire la Web Console, vai al sottomenu Web Developer nel menu Firefox e fai clic su "Web Console". Puoi anche usare la scorciatoia Ctrl Shift K. La casella degli strumenti apparirà quindi nella parte inferiore del browser con 'Console' attivato.

Debugger

Lo strumento Firefox Debugger offre agli sviluppatori web l'opportunità di esaminare e modificare il codice JavaScript. Può anche essere usato per identificare i bug. Utilizzando il debugger, puoi eseguire il debug del codice localmente in Firefox o in remoto su un dispositivo Firefox OS o Firefox per Android.

Per aprire il debugger, vai al sottomenu Web Developer nel menu principale di Firefox e fai clic su "Debugger". In alternativa puoi premere Ctrl Shift S e la casella degli strumenti apparirà nella parte inferiore del browser con il Debugger attivato e pronto per l'uso.

Monitor di rete

Il Network Monitor è progettato per mostrarti tutte le diverse richieste di rete effettuate da Firefox, quanto tempo impiega ciascuna richiesta e i dettagli di ciascuna richiesta. Vai a Web Developer Menu > Network per attivare lo strumento. Dovrai aggiornare la pagina per vedere le richieste.

Nel Network Monitor sarai in grado di visualizzare una cronologia delle richieste e filtrare il contenuto per tipo. C'è anche uno strumento di analisi delle prestazioni, che puoi utilizzare per vedere quanto tempo impiega il browser a scaricare diverse parti del tuo sito web. Per eseguire questo strumento, fai semplicemente clic sull'icona del cronometro nella barra degli strumenti nella parte inferiore di Network Monitor.

Ispettore di stoccaggio

Se vuoi scoprire i diversi tipi di archiviazione che una pagina web può utilizzare, dovrai abilitare lo strumento Storage Inspector. Allo stato attuale, Storage Inspector può essere utilizzato per ispezionare Cookie, Local Storage, Session Storage e IndexedDB.

Storage Inspector fornisce una vista di sola lettura dello storage. Tuttavia Firefox ha affermato che sta lavorando allo sviluppo dello strumento in modo che gli sviluppatori possano modificare i propri contenuti di archiviazione in futuro.

Per aprire Storage Inspector, vai al sottomenu Web Developer e fai clic su Storage Inspector. In alternativa puoi premere Maiusc + F9 per utilizzare la scorciatoia da tastiera.

Barra degli strumenti per sviluppatori

La barra degli strumenti per sviluppatori è progettata per fornire agli sviluppatori web l'accesso dalla riga di comando a una serie di strumenti per sviluppatori di Firefox. Oltre a utilizzare i comandi impostati da Firefox, che puoi trovare qui, puoi anche aggiungere i tuoi comandi utilizzando Scratchpad. Questi possono essere convertiti in componenti aggiuntivi in ​​modo che anche altre persone possano utilizzarli.

Apri la barra degli strumenti per sviluppatori premendo Maiusc + F2. In alternativa puoi andare al menu Sviluppatore Web e fare clic su Barra degli strumenti sviluppatore.

Altri strumenti di debug: visualizzazione 3D, contagocce, iFrame

Altri strumenti di debug inclusi nel pacchetto Firefox Developer Tools includono:

• Vista 3D: ti offre una vista 3D dei tuoi blocchi nidificati di HTML e contenuto
• Contagocce: consente di selezionare un colore particolare dalla pagina e di copiarlo negli appunti)
• Selezione di iFrame: questo ti consente di puntare i tuoi strumenti di sviluppo su iFrame specifici all'interno di un documento.

Strumenti mobili

Oltre agli strumenti di creazione e debug di Firefox, ci sono anche una serie di strumenti mobili che gli sviluppatori possono utilizzare per gli sviluppi mobili. Li esaminerò per intero di seguito.

Gestore delle applicazioni

Questo strumento consente agli sviluppatori di testare, distribuire ed eseguire il debug di app HTML5 sui dispositivi Firefox OS. Funziona anche come un simulatore, quindi i test possono essere eseguiti direttamente dal browser desktop Firefox.

L'App Manager viene fornito con un pannello App, in cui gli sviluppatori possono gestire app locali e app ospitate esternamente; un pannello Dispositivo, che fornisce informazioni su un dispositivo connesso come la sua versione del sistema operativo e le app installate; e Toolbox, che sono un insieme di strumenti per sviluppatori di Firefox che possono essere utilizzati sull'app in esecuzione.

WebIDE

Questo strumento mobile consente agli sviluppatori di creare, modificare, eseguire ed eseguire il debug delle proprie app Web tramite Firefox OS Simulator o tramite un dispositivo Firefox OS. Puoi usarlo per connetterti a Firefox Developer Tools con altri browser come Firefox per Android e Chrome per Android.

Altri strumenti mobili

Altri strumenti mobili includono:

• Debug remoto per Firefox per Android
• Simulatore di Firefox OS: simula un dispositivo Firefox OS ma funziona su desktop
• Responsive Design View: ti consente di visualizzare l'aspetto del tuo sito Web o della tua app Web su dispositivi diversi con dimensioni dello schermo diverse.

Strumenti per le prestazioni

Le prestazioni sono fondamentali nello sviluppo web, motivo per cui Firefox fornisce agli sviluppatori web una serie di strumenti che possono essere utilizzati per diagnosticare e risolvere eventuali problemi di prestazioni con i suoi siti web e app web.

Strumento per le prestazioni

Lo strumento Performance ha sostituito il profiler di campionamento JavaScript originale di Firefox. Contiene ancora una versione aggiornata del profilo di campionamento; tuttavia ha anche una timeline del frame rate. Altre funzionalità sono previste in futuro.

Lo strumento Performance può essere utilizzato per creare, analizzare e campionare i profili.

JavaScript Profiler

JavaScript Profiler è progettato per aiutare gli sviluppatori a trovare problemi nel loro codice JavaScript. Lo fa campionando lo stack di chiamate JavaScript corrente e fornendo statistiche al riguardo.

Strumento per lampeggiare la vernice

Questo strumento evidenzierà la parte della tua pagina web che il browser deve ridisegnare in risposta a un input. Consente agli sviluppatori web di capire se il loro sito web sta facendo ridipingere il browser più del necessario. Ricorda che i ridisegnamenti possono avere un impatto negativo sulle tue prestazioni, quindi è una buona idea utilizzare questo strumento per eliminare ridipinti non necessari e migliorare le prestazioni del tuo sito web.

Profilo sviluppatore separato

Dover passare da una versione all'altra di Firefox sarebbe una vera seccatura. La buona notizia è che Firefox Developer Edition utilizza un profilo completamente separato dalle altre versioni di Firefox che hai installato.

Note di rilascio dello sviluppatore

Gli sviluppatori che desiderano leggere le note relative alle versioni attuali ea tutte le versioni storiche di Firefox Developer Edition possono farlo semplicemente visitando questo link.

Avvolgendo

Se sei uno sviluppatore web nuovo o esperto, trarrai grandi vantaggi dall'utilizzo dei vari e dettagliati strumenti per sviluppatori di Firefox. Dalla creazione del codice al debug dell'HTML, gli strumenti consentono di eseguire un'ampia gamma di azioni necessarie per sviluppare un sito Web o un'app Web. Gli strumenti mobili sono anche estremamente utile, soprattutto per coloro che cercano di creare siti web sensibili al fine di beneficiare della più recente ⁽²¹ aprile 2015) l'aggiornamento dell'algoritmo di Google.

Per ulteriori informazioni sugli strumenti per sviluppatori di Firefox, vai al sito Web di Mozilla Developer e unisciti alla comunità degli sviluppatori. La Firefox Developer Edition può essere scaricata e utilizzata gratuitamente.