Share
disconoscimento: Lavoro per Microsoft Corporation.
A gennaio, ti ho illustrato le funzionalità degli strumenti di sviluppo F12 di Internet Explorer 10. La recente versione di Microsoft di Windows 8.1 Preview include non solo un aggiornamento a Internet Explorer (ora alla v11), ma anche un aggiornamento gradito agli Strumenti di sviluppo F12. Quest'ultimo è particolarmente importante dal momento che gli sviluppatori dipendono da loro per risolvere i problemi relativi ai siti da IE. Finora gli strumenti hanno risolto la maggior parte dei casi d'uso di debug, ma è chiaro che quando i siti diventano più complessi, gli sviluppatori hanno bisogno di strumenti più ricchi con cui lavorare. Questo aggiornamento mira a conferire un aspetto rinnovato e funzionalità estese per gli sviluppatori con un forte focus su quanto segue:
Alcuni degli aggiornamenti sono semplicemente funzionalità di convenienza che hanno lo scopo di semplificare il flusso di lavoro degli sviluppatori (ad es. Breadcrumb degli elementi) mentre alcuni hanno un impatto significativo sul miglioramento delle prestazioni e del rendering delle app Web.
In questo post, esamineremo alcuni degli aggiornamenti e delle funzionalità più recenti degli strumenti di sviluppo di IE11 F12 e in alcuni casi, mostrerò le chiare differenze nelle funzionalità delle versioni precedenti.
Fin dalla sua istituzione, gli strumenti F12 hanno mantenuto un'interfaccia utente abbastanza coerente utilizzando menu a discesa e una metafora basata su schede per presentare le varie opzioni disponibili. Ma alcune lendini che sembravano sempre intromettersi erano cose come gli strumenti che si aprivano nella loro finestra durante una sessione di debug e le schede che prendevano preziosi immobili verticali. Con IE11, gli strumenti F12 sono stati notevolmente ridisegnati per rendere l'interfaccia utente più intuitiva sfruttando un sistema di navigazione basato su grafica posizionato come barra di scorrimento sul lato sinistro del riquadro del debugger:
I menu utilizzati per allineare la parte superiore degli strumenti sono stati rimossi per fornire una maggiore chiarezza all'interfaccia di debug e per liberare spazio immobiliare con cui lavorare. Inoltre, il design del debugger stesso è stato notevolmente aggiornato rompendosi da uno stile dell'interfaccia utente di Windows 7 a un aspetto più moderno di Windows 8. Puoi vedere la principale differenza qui sotto:
La nuova interfaccia utente è chiaramente più coerente con gli elementi moderni introdotti in Windows 8.
Mentre lo strumento di ispezione DOM originale forniva un'esperienza decente, mancava alcune funzionalità chiave. I principali punti dolenti per me erano la mancanza di aggiornamento del DOM dal vivo, l'ordine di visualizzazione degli stili CSS e l'impossibilità di vedere gli eventi collegati agli elementi DOM. Per fortuna, questi sono stati affrontati in questo aggiornamento.
Poiché mi concentro molto su JavaScript, la ricerca di eventi collegati è stata particolarmente frustrante richiedendo un sacco di codice di debug basato su console e tentativi ed errori per definire la combo evento / metodo chiamata. Guardando lo screenshot qui sotto, puoi vedere come posso fare clic su un elemento specifico, vedere l'evento ad esso collegato e il metodo che verrà chiamato quando l'evento viene attivato. Questo è un enorme risparmio di tempo da una prospettiva di debug.
E anche se può sembrare ovvio, un lieve ma importante cambiamento nel modo in cui gli strumenti visualizzano il CSS applicato a un elemento, ha reso le cose sostanzialmente più semplici. Prima di questo aggiornamento, gli strumenti F12 mostrerebbero gli stili ereditati per prima cosa costringendo a scorrere verso il basso nel riquadro degli stili per ottenere lo stile effettivo utilizzato per l'elemento.
Il team ha aggiornato la visualizzazione in modo che vengano visualizzati per primi gli stili più recenti, che a mio parere hanno molto più senso, specialmente da una prospettiva di debug:
Altre fantastiche nuove funzionalità che sono sicuramente belle da avere sono:
In precedenza, dovevi aprire gli strumenti F12, fare clic sulla freccia del DOM inspector e fare clic su un elemento. Questo semplifica notevolmente le cose e porta quell'esperienza alla pari con altri strumenti di debug.
Il breadcrumb fornisce un modo intuitivo per setacciare la struttura gerarchica di un elemento DOM, consentendo di fare facilmente clic su qualsiasi parte del breadcrumb per visualizzare il singolo elemento padre:
Con la nuova funzionalità in stile Intellisense, quando modifichi uno stile o aggiungi una nuova regola, ti viene immediatamente presentato un popup che ti offre un rapido accesso alle regole e ai valori CSS. Mentre alcuni di voi potrebbero essere enciclopedie CSS, io per prima cosa apprezzo non doverli ricordare tutti. :)
Infine, con DnD all'interno del DOM explorer, puoi testare in modo interattivo come i tuoi elementi appariranno e reagiranno quando sposti la loro posizione all'interno del layout di pagina. Le modifiche sono rese live, quindi ricevi un feedback immediato mentre riposiziona il tuo elemento.
C'è un MOLTO codice in più sul lato client che mai. Strutture come Ember.js e Angular rendono sostanzialmente più semplice per gli sviluppatori creare app web a pagina singola e gli sviluppatori sfruttano le funzionalità basate su HTML5 per creare giochi coinvolgenti che richiedono frame rate elevati e tempi di risposta. Con ciò, arriva una nuova serie di considerazioni relative alle prestazioni della pagina e i nuovi strumenti F12 offrono un nuovo strumento per aiutarti a profilare e misurare la reattività dell'interfaccia utente. Lo strumento UI Responsiveness è un profiler che consente di misurare il framerate e l'utilizzo della CPU per individuare eventuali problemi di prestazioni dell'interfaccia utente.
Aprendo il profiler, posso tenere traccia di come la mia CPU reagisce alla mia pagina e quale sia il throughput visivo (frame al secondo di AKA) come punti diversi nel ciclo di caricamento della pagina.
Il pannello Dettagli cronologia offre dettagli ancora più dettagliati su come determinati eventi o richieste di rete hanno influito sul rendimento della pagina, consentendomi di approfondire eventuali problemi e apportare modifiche per migliorare le prestazioni del mio sito.
Osservando ciascun elemento della timeline puoi vedere come azioni specifiche, ad esempio lo stile, possono influire sulle prestazioni del rendering.
Puoi immaginare quanto questi dati siano inestimabili, specialmente per gli sviluppatori di giochi che desiderano sfruttare le funzionalità native del browser per i giochi e sono abituati ad avere strumenti di debug affidabili in altri strumenti di sviluppo basati su plugin come Flash.
Di tutti i cambiamenti, i più significativi per me sono stati quelli del debugger degli script, principalmente perché hanno contribuito a prevenire la rabbia che provavo quando lo usavo. Si trattava principalmente di un problema UX in quanto al momento in cui si è scelto di eseguire il debugger, l'intero pannello degli strumenti si apriva nella finestra del browser e nella propria finestra popup autonoma. È stata un'esperienza sconvolgente per non dire altro. Questo aggiornamento risolve questo e garantisce che il debugger rimanga saldamente in posizione.
Un altro grande miglioramento è l'uso di una metafora di tabulazione per visualizzare ogni file aperto che si sta eseguendo il debug. La versione precedente dello strumento ti obbligava a riaprire ogni file necessario per il debug. La nuova versione mostra una scheda per ogni file con cui stai lavorando rendendo la navigazione sostanzialmente più semplice.
Inoltre, le opzioni che erano generalmente sepolte nei menu contestuali sono ora chiaramente evidenziate e facilmente individuabili. È incredibile quante volte gli sviluppatori sono stati sorpresi quando ho mostrato loro la bella funzione di stampa per la formattazione di JavaScript anche se era presente da IE8. La funzionalità è ora evidenziata tramite un'icona nella parte superiore del riquadro di debug accanto all'icona del wordwrap.
Ultimo ma non meno importante, dimenticare console.log (). I nuovi strumenti ora supportano Tracepoints facilmente consentendo di monitorare valori specifici nello stesso modo in cui lo si utilizzava console.log ().
Pegging problemi di memoria è sempre stata una resistenza soprattutto se si tratta di un problema di degrado della memoria lenta. I nuovi strumenti F12 si propongono di affrontare questo problema con il suo nuovo profilo di memoria. Lo strumento ti consente di scattare istantanee dell'utilizzo della memoria del tuo sito o dell'app per un periodo di tempo che consente di individuare le azioni o le aree della tua app che potrebbero essere la causa principale del problema.
Creando un'istantanea di base dell'impronta di memoria seguita da istantanee successive, è possibile confrontare i dati raccolti per determinare il numero di oggetti attivi e quali tipi di oggetti persistono. Ciò include elementi HTML, nodi DOM e oggetti JavaScript e puoi eseguire il drill nei confronti delle istantanee per vedere le modifiche in memoria tra di loro per singoli oggetti.
Probabilmente hai già familiarità con i complessi menu a cascata denominati "Modalità browser" e "Modalità documento". Dovevano aiutare gli sviluppatori a risolvere i problemi relativi alle versioni non moderne di Internet Explorer. In realtà, erano un po 'confusi da usare e offrivano solo un supporto marginale di test per IE non moderni. Con questo nuovo aggiornamento, gli strumenti F12 lo hanno semplificato per aiutare gli sviluppatori a concentrare i test sulla versione più conforme agli standard di IE, specialmente se il loro sito è attualmente in esecuzione in qualche modalità di compatibilità.
Modificando la modalità documento su "Edge", uno sviluppatore può forzare il proprio sito a eseguire il rendering nella modalità standard più recente supportata da quella versione di IE e lavorare per apportare le modifiche necessarie basate sugli standard affinché il loro sito renda cross-browser. Inoltre, un collegamento informativo viene fornito direttamente nello strumento che porta gli sviluppatori direttamente a modern.IE, una risorsa online che offre uno scanner per problemi di compatibilità comuni, macchine virtuali per le diverse versioni di Internet Explorer e best practice per garantire il sito compatibilità nelle versioni moderne di IE.
Una nuova funzionalità che indirizza esplicitamente i dispositivi mobili e tablet è la simulazione di geolocalizzazione. Ciò ti consente di sfruttare l'API di geolocalizzazione anche se il tuo dispositivo non è connesso.
Questo è un ottimo aggiornamento per una suite di strumenti che ci è stata utile, ma che sicuramente necessitavano di qualche miglioramento. C'è stata una chiara attenzione all'offerta di strumenti che ti hanno aiutato a risolvere i problemi relativi alle prestazioni, un aspetto che è incredibilmente importante, specialmente con le tendenze che vanno verso app a pagina singola, in stile nativo.
.
Accentsconagua