DevTools Showdown Edge F12 vs Firefox vs Chrome

Gli strumenti di sviluppo di Microsoft Edge, il nuovo browser predefinito di Windows 10 hanno un design moderno e alcune nuove funzionalità rispetto al suo predecessore, gli strumenti di sviluppo F12 di Internet Explorer 11.

La questione se gli strumenti di sviluppo di Microsoft Edge siano all'altezza dei loro concorrenti popolari - gli strumenti di sviluppo in altri browser moderni come Mozilla Firefox e Google Chrome - si pone naturalmente nella mente di molti sviluppatori.

In questo post cerchiamo di rispondere a questa domanda, e capire se gli F12 Dev Tools di Edge sono davvero utili. Confronteremo le sue funzionalità con quelle degli Strumenti per sviluppatori di Firefox e DevTools di Google Chrome.

Apri gli strumenti di sviluppo

Premendo F12 si aprono gli strumenti di sviluppo in tutti e 3 i casi: Strumenti per sviluppatori in Firefox, DevTools in Chrome e F12 Dev Tools in Microsoft Edge. Questa è la scorciatoia da tastiera in cui il nome ufficiale di Edge's F12 Dev Tools viene da.

Quando apri gli Strumenti di sviluppo di Edge puoi provare subito uno dei suoi difetti più noti: al momento è così impossibile fissare gli strumenti a una finestra esistente. Mentre puoi seguire ciò che accade sullo schermo su Firefox Developer Tools e Chrome DevTools posizionando la finestra degli strumenti di sviluppo nella parte inferiore dello schermo, tu (al momento) non puoi fare lo stesso con Edge.

Gli sviluppatori Microsoft sostengono che risolveranno questo problema in un futuro aggiornamento.

Ispeziona il DOM

Il DOM Explorer tool (Shortcut: CTRL + 1) è la prima scheda di F12 Dev Tools di Microsoft Edge. La sua struttura e il design generale sono abbastanza simili a quelli di Elemento scheda di Chrome e il Ispettore scheda in Firefox, tuttavia le capacità visive differiscono.

In Edge è possibile dare un'occhiata al documento HTML reso, agli stili CSS correlati e ai gestori di eventi registrati su ciascun elemento. Puoi anche trovare la piccola immagine del modello di box CSS con i valori calcolati, già ben noti dai due browser concorrenti.

Puoi sperimentare con le regole CSS eliminando quelli attuali e aggiungendone di nuovi, e puoi vedere il tuo cambiamenti riassunti in una sottotabella separata denominata “I cambiamenti” (si trova sul lato sinistro). Quest'ultima è una funzionalità che non è sviluppata in Firefox Developer né Chrome DevTools. Può dare un rapido riassunto all'utente, quindi è un'opzione davvero utile.

Ci sono alcune funzionalità negli Strumenti per sviluppatori di Firefox che né Edge, né Google Chrome forniscono attualmente, ma possono aiutare in modo significativo la vita di un designer: gli strumenti di analisi dei caratteri e dell'animazione.

In Edge c'è a cool color picker sebbene ciò possa in qualche modo compensare l'utente per questo.

Interagisci con JavaScript

Il consolle scheda (Collegamento: CTRL + 2) in Microsoft Edge consente di interagire con JavaScript del tuo sito, proprio come in Firefox e Chrome Dev Tools. Tutti e tre ti consentono di seguire gli errori JavaScript in tempo reale e puoi anche analizzarli inserendo il tuo input.

Lo strumento Console di Edge's F12 Dev Tools ha un bell'aspetto funzione di completamento automatico che ti aiuta con i comandi, comunque sembra essere meno esperto rispetto a quello di Firefox e Chrome Dev Tools.

Bordo separa Errori, Avvisi e Messaggi che è un grande aiuto, anche se non qualcosa che gli altri due toolkit non hanno.

La Console di Firefox sembra essere la più professionale tra i tre strumenti di sviluppo, come anche mostra separatamente altri tipi di problemi: rete, CSS, errori di sicurezza e messaggi di registrazione, e ti permette di interagire con questi attraverso il Interfaccia della console, non solo con gli errori JavaScript.

Capire cosa sta facendo il tuo codice

Il Debugger tool (scorciatoia: CTRL + 3) ti aiuta a capire cosa sta succedendo al tuo codice mentre trovi potenziali bug. È possibile impostare orologi e punti di interruzione e visualizzare pile di chiamate.

Il riquadro Orologi visualizza valori variabili, la modalità Callstack mostra la catena di chiamate di funzione che hanno portato allo stato corrente e la modalità Punti di interruzione mostra un elenco dei punti di interruzione che hai impostato.

Gli strumenti di sviluppo F12 di Edge ti consentono metti in pausa il tuo codice nel mezzo dell'esecuzione, e lo attraversa linea per linea. Hai anche la possibilità di migliorare la leggibilità di un file JavaScript compilato o minimizzato, e tu puoi eseguire il debug di risorse diverse (JavaScript, estensioni, ecc.) Uno per uno.

Firefox e Chrome DevTools forniscono tutte queste funzionalità, quindi Edge non offre un'esperienza di debug eccezionale, ma fornisce all'utente uno strumento solido e affidabile che è in linea con i suoi concorrenti.

Dai un'occhiata alla comunicazione Browser-Server

Il Rete tool (Collegamento: CTRL + 4) è stato completamente ridisegnato per Microsoft Edge da Internet Explorer 11. Con l'aiuto di questo pratico strumento puoi seguire la comunicazione tra il server e il browser, e ispezionare le singole richieste.

Puoi filtra i risultati per tipo di contenuto come fogli di stile, immagini, media, caratteri, XHR e molti altri. Puoi anche eseguire il debug di AJAX con l'aiuto dello strumento Rete.

La scheda Rete di Edge e Firefox offre funzionalità e interfaccia utente abbastanza simili. Entrambi hanno un pannello della barra laterale di facile utilizzo che consente di dare un'occhiata all'intestazione HTTP della risorsa selezionata, al corpo HTTP, ai parametri, ai relativi cookie e ai tempi articolo per articolo.

La scheda Rete di Chrome DevTools non ha un riquadro come questo, ma se fai clic sulle richieste una ad una puoi vedere le stesse informazioni. È una soluzione meno intuitiva però.

Tracciare le pagine lente

Il Prestazione scheda (scelta rapida: CTRL + 5) ti aiuta a capire le ragioni di una pagina web lenta. Con lo strumento Performance, Microsoft ha compiuto un enorme balzo in avanti combinando il precedente Risposta e profiler dell'interfaccia utente strumenti per creare una vista end-to-end di tutti gli script e visualizzare le prestazioni.

Questo pratico strumento ti fornisce report su diversi tipi di utilizzo della CPU, ti offre approfondimenti sulla cornice del tuo sito, ed è anche possibile isolare diversi scenari utente impostando etichette sulla timeline.

Durante il processo di test abbiamo rilevato che lo strumento Performance di Edge ci ha fornito maggiori informazioni sui problemi di velocità rispetto a Firefox Developer o Chrome DevTools. L'interfaccia utente della scheda Prestazioni in Edge è abbastanza ben progettata, ci aiuta con molti suggerimenti visivi ed è relativamente facile da usare. Se vuoi saperne di più su come usarlo, leggi i documenti dettagliati.

Diagnostica i problemi di memoria

Il Memoria strumento (scorciatoia: CTRL + 6) rende possibile trova perdite di memoria che può anche rallentare la tua pagina web, inoltre può impatto sulla stabilità del tuo sito.

Con l'aiuto di un buon grafico puoi capire facilmente dove sta crescendo l'utilizzo della memoria e puoi creare istantanee in punti specifici che consentono di analizzare l'utilizzo della memoria. Puoi anche confronta due istantanee fatte in punti diversi del ciclo di vita della pagina per capire la differenza tra loro.

Chrome DevTools ha anche un buon profilo di memoria sotto la scheda Profili, mentre Firefox Developer non fornisce questa funzionalità per impostazione predefinita, ma puoi scaricare e installare componenti aggiuntivi come questo se vuoi. Il profilo di memoria di Chrome DevTools è abbastanza avanzato e offre più funzionalità di Edge, ad esempio, consente di farlo registra le allocazioni di oggetti JavaScript nel tempo ciò può aiutarti a isolare le perdite di memoria.

Prova il tuo sito su diverse dimensioni dello schermo

Il Emulazione tool (scorciatoia: CTRL + 7) ti consente di testare il tuo sito in diverse circostanze. Puoi scegliere tra due profili browser, Desktop e Windows 10 Mobile e da molti diversi programmi utente, incluse tutte le versioni desktop e mobile di Internet Explorer, fino a IE6, insieme a molti concorrenti di Edge, Chrome, Firefox, Safari, ecc..

È interessante che tu abbia la possibilità di prendere un guarda la tua pagina come un Bot Bing. Puoi anche emulare un GPS, e impostare diverse risoluzioni e orientamenti.

Firefox Developer Tools non ha uno strumento di emulazione del dispositivo, ma Chrome DevTools ha un emulatore così sofisticato che Edge's difficilmente può competere con esso.

Ad esempio, lo schermo di emulazione di Chrome ha un griglia precisa in cui è inserita la vista emulata, e non solo puoi scegliere tra profili del browser e user-agent, ma anche da molti dispositivi come il versioni differenti di iPhone o Samsung Galaxy e molti altri. L'emulatore di Chrome DevTools ha anche un pratico Opzione di zoom e puoi testare il tuo sito su reti diverse come 3G, 4G, DSL, WiFi, ecc.

Sommario

Nel complesso, gli strumenti di sviluppo F12 di Microsoft Edge sembrano sorprendentemente buoni. Fornisce funzionalità del tutto simili ai famosi toolkit di sviluppo web di altri browser moderni. Ci sono due aree in cui Edge's F12 Dev Tools è piuttosto forte: il interfaccia utente questo è veramente intuitivo, facile da usare e ben progettato, e il strumenti di diagnostica delle prestazioni.

Per queste due funzionalità può valere la pena di passare a, o almeno testare Edge. La mancanza più grande è la mancanza della possibilità di appuntare gli strumenti di sviluppo nella parte inferiore dello schermo, ma speriamo che Microsoft risolva rapidamente questo problema.