Miglioramenti agli strumenti di sviluppo F12 in Internet Explorer 11

Informazioni su questo aggiornamento

Per sviluppare pagine Web di grande, è necessario codifica esperienza, nonché strumenti giusti per trovare ed eseguire il debug di problemi che inevitabilmente ritagliare verso l'alto. Questo aggiornamento fornisce notevoli miglioramenti agli strumenti di sviluppo F12, comprese funzionalità e correzioni di bug per la UI F12, console, DOM explorer, Debugger, emulazione strumento, tempi di risposta dell'interfaccia utente e gli strumenti di profilatura della memoria.

Modifiche all'interfaccia utente F12

Nuove icone e notificheSono state modificate le icone per la memoria e strumenti del Profiler .

Sono ora gli indicatori sulla barra di icone per gli errori nella Console, modifiche alle impostazioni di emulazione e per le sessioni attive di profilatura della memoria, Profilere Tempi di risposta dell'interfaccia utente strumenti. L'immagine seguente illustra le nuove icone con le notifiche sulle icone strumento Console e memoria , che indica che esistono due errori Console visualizzati e che una sessione di analisi di memoria attualmente in corso:
New interface

Spostamento di superset F6 all'interno di strumentiUtilizzo di F6 è simile utilizzando il tasto Tab per spostarsi all'interno di uno strumento, ma gli elementi "schede" tramite un insieme selezionato di più comunemente utilizzati in un riquadro strumenti invece che tramite ogni elemento selezionabile. Questo fa parte di un sistema globale di pulito per l'utilizzo della tastiera per spostarsi all'interno e tra gli strumenti.

Spostarsi avanti e indietro tra gli strumenti utilizzati di recente utilizzando la tastieraÈ possibile utilizzare Ctrl + [per spostarsi all'indietro nella cronologia di spostamento dello strumento e CTRL +] per andare avanti, simile a indietro e Avanti frecce durante l'esplorazione.

Accedere rapidamente alla modalità documentoViene aggiunto un nuovo elenco a discesa nella parte superiore dell'interfaccia che consente di accedere alla modalità di documento da qualsiasi strumento, in modo non è necessario cambiare strumenti.
Dropdown

Modifiche alla console

Console.timeStamp()Quando viene chiamato dalla Console o all'interno del codice, Console.timeStamp() l'output sulla Console il numero di millisecondi scheda browser corrente è stato aperta. Se viene chiamato durante l'esecuzione di una sessione di analisi con lo strumento di Tempi di risposta dell'interfaccia utente , viene creato un utente di spunta sulla linea temporale della sessione con un timestamp in base al tempo dall'avvio della sessione.

CTRL + L Cancella la console di tutti i messaggi

Completamento automatico accuratoCompletamento automatico della Consolenon include più le proprietà dell'indicizzatore. Il risultato di una selezione più chiara e precisa di completamento automatico.

$ $$, _ $x e $ e $0 a$ 5, sono stati aggiunti all'elenco di completamento automatico della Console per praticità e per rendere più coerente con altri browser il comportamento della Console.

Indicatore di messaggio non aggiornatiSe si è scelto di disattivare l'opzione Cancella dal spostarsi , vecchi messaggi di console dispongono le icone in grigio per distinguere tra messaggi per la pagina attiva e dalle pagine precedente nella cronologia.
Stale message indicator

Modifiche a Explorer DOM

Barre delle modifiche nel riquadro ComputedLe barre di modifica (colori diversi per le proprietà modificate, aggiunte proprietà e proprietà eliminate) che gli utenti sono stati godono riquadro stili ora vengono visualizzate nel riquadro stili Computed .
Change bars in Computed pane

Modifiche del debugger

Designazione di origine è mappataPulsante destro del mouse nella scheda del documento il Debuggered è possibile specificare un mapping di origine. Questo rende possibile utilizzare i mapping di origine con il codice fornito che ha avuto origine il mapping di commento rimosso.
Sourcemaps designate

Completamento automatico nella finestra Espressioni di controlloA questo punto, quando si aggiunge un controllo, opzioni di completamento automatico vengono suggerite per l'utente.
Autocomplete in watches

Esame del valore restituitoQuando si suddividono in una funzione con un valore restituito, eseguire la funzione fino a quando non è stato eseguito per la parentesi graffa di chiusura. Il valore restituito verrà visualizzato nella sezione del riquadro Watches variabili locali . Esegue nuovamente l'istruzione e verrà restituito il valore per il codice di chiamata.

Per una rapida dimostrazione, provare a eseguire questo codice nella Console:

function showval() { var x = 0; x++; debugger; return x; } showval(); 

Esso sarà chiamare la funzione interruzione nel debuggered è possibile eseguire per verificare il valore restituito.

Selezione multipla per i punti di interruzioneTasto CTRL, MAIUSC + clic e Ctrl + a può essere utilizzato per selezionare più punti di interruzione nel riquadro di punti di interruzione .

Continua e ignora le interruzioniPremere F5 per continuare fino alla successiva interruzione. Tenere premuto F5 per continuare oltre più interruzioni fino al rilascio F5.

I punti di analisi e i punti di interruzione di eventiQuesti lavoro simili ai punti di interruzione e punti di analisi è già presente nella F12 degli strumenti, ma invece viene attivato quando un blocco di codice specifico viene eseguita, ma vengono attivati quando viene generato un evento specifico. Ognuno dispone di un filtro condizionale opzionale che consentono di restringere l'ambito a una specifica istanza di un evento che si desidera controllare. Possono essere aggiunti utilizzando il punto di analisi eventi Aggiungi e icone punto di interruzione Aggiungi evento evidenziato nella figura seguente:
Event breakpoints and tracepoints

Tempi di risposta dell'interfaccia utente dello strumento modifiche

Importazione/esportazione sessioni di prestazioniNon è necessario per riprodurre il test case, ogni volta che si desidera analizzare i dati che produce o condividere i dati con un collega. (Cartella) di importazione / esportazione (disco) le icone sulla barra delle icone di Tempi di risposta dell'interfaccia utente dello strumento consentono di salvare gli snapshot di memoria in un file che può essere importato in un secondo momento.

Anteprima immagineSe si è visto una richiesta HTTP per un'immagine e domandato quale immagine è l'immagine è ora visualizzato in anteprima nei dettagli dell'evento.
Image preview

Filtraggio di eventiPulsante filtro eventi è piccolo ma potente. Nascoste dietro a tale pulsante è un menu che consente filtrare gli eventi in più modi e ogni modo ha un impatto significativo:

  • Filtro nome evento: filtro per qualsiasi nome di evento che contiene una corrispondenza per il testo del filtro.

  • Filtro attività di interfaccia utente: utilizzando le caselle di controllo, è possibile escludere grandi categorie di eventi per rendere più semplice per lo stato attivo sull'area di cui si sta indagando. Ad esempio, se desidera solo in attività di rete, è possibile filtrare tutti il rumore dell'interfaccia utente e garbage collection.

  • Filtro soglia temporale: questa funzionalità consente di filtrare gli eventi di primo livello minore di un millisecondo in durata. In molti scenari, questo semplifica notevolmente la visualizzazione a cascata e consente di concentrarsi sugli eventi più forte impatto.
    Time threshold filter

Eventi di script HTML5Se si utilizza media query listener o MutationObservers, è ora possibile identificare i rispettivi costi quando si eseguono una sessione di profilatura delle prestazioni.
HTML5 scripting events

Raggruppamento di framePulsante tra l'elenco a discesa Ordina per e il menu filtro eventi attiva o disattiva il raggruppamento di Frame. Questo gruppi di eventi di primo livello nelle corrispondenti unità di lavoro (o "frame") durante i periodi di tempo in cui erano in corso le animazioni o gli aggiornamenti di visual. I fotogrammi vengono considerati come gli altri eventi, in modo che possano essere ordinati e filtrati e forniscono un riepilogo di tempo inclusivo.
Frame grouping

Misure di utenteSe si utilizza l'API performance.mark() per aggiungere triangoli alla linea temporale per indicare dove si è verificato eventi specifici, performance.measure() API estende l'utilità degli indicatori di prestazioni. Utilizzare performance.measure() per creare un evento di misura di utente che comprende il tempo tra due eventi di performance.mark() , quindi l'evento mouse e quindi utilizzare l'opzione di filtro all'evento per selezionare solo gli eventi tra i due contrassegni.
User measures

Colorazione per DOMQuesta funzione aggiunge la colorazione di elementi DOM, valori letterali di stringa e valori letterali numerici. Oltre a rendere il contenuto all'interno di F12 diversi strumenti di aspetto e il comportamento più simili, aggiunge più attraente per lo strumento di tempi di risposta dell'interfaccia utente.

Selezione riepilogoQuando si seleziona una parte della sequenza temporale, il riquadro dettagli dell'evento verrà visualizzato un riepilogo della selezione. Posizionare su segmenti diversi del grafico circolare per una descrizione comandi con la categoria di eventi del segmento.
Selection summary

Supporto per console.timeStamp()Utilizzando il metodo console.timeStamp() nel codice o nella console durante una sessione di analisi crea un utente di spunta sulla linea temporale che include l'ora dall'inizio della sessione di profilatura.

Modifiche dello strumento di memoria

La riduzione di DOMINATORDOMINATOR piegatura consente di semplificare il contenuto di un snapshot rimuovendo gli oggetti con le viste di primo livello che logicamente sono i componenti di un altro oggetto (ad esempio, una < BR > < DIV > all'interno di un ambito intestato a una funzione) e tendono a essere dettagli aggiuntivi che non migliorare la visione dei dati, ma è potrebbero risparmiare tempo.

Ad esempio, nell'immagine riportata di seguito viene prima e dopo le visualizzazioni, dimostrando come riduzione dominator migliora lo strumento "storia" è quella di comunicare. Il visualizzazione ripiegato Mostra 30 < DIV > elementi HTML, conto di 15.64 megabyte (MB) di memoria, e tenga a disconnesso nodi DOM. In molti casi, non è importante conoscere la composizione di un oggetto, in modo più semplicemente sapere che è troppo grande o che essa si verifica una perdita (soprattutto quando si utilizzano le librerie di terze parti).
Dominator folding

Colorazione dei DOM, stringa e numero di valori letteraliQuesta funzione aggiunge la colorazione di elementi DOM, valori letterali di stringa e valori letterali numerici. Oltre a rendere il contenuto all'interno di F12 diversi strumenti di aspetto e il comportamento più simili, effettua analisi della memoria visivamente più interessante.

Le radici del ciclo del filtroSe si desidera essere in grado di analizzare la composizione di un oggetto senza venga inavvertitamente perso in un percorso di riferimento circolare. Questa funzionalità rileva riferimenti figlio che sono circolari e "Taglia" loro in modo che non si confonda passando li all'infinito. Inoltre, esso annota questi riferimenti in modo che sia chiaro quando un riferimento "rifilato."

Sessione di importazione/esportazioneNon è di riprodurre il test case, ogni volta che si desidera analizzare i dati che produce o condividere i dati con un collega. (Cartella) di importazione / esportazione (disco) le icone sulla barra degli strumenti dello strumento memoria consentono di salvare gli snapshot di memoria in un file che può essere importato in un secondo momento.
Import/export session

Modifiche dello strumento di emulazione

Reset e persistenza delle impostazioniUn'icona di emulazione di mantenere impostazioni viene aggiunto allo strumento di emulazione . Questa operazione manterrà le impostazioni correnti di emulazione finché specificamente disabilitata. Ciò consente di lavorare, chiudere il browser e tornare con le impostazioni di emulazione intatte. A destra di questa icona è un'icona di emulazione reimpostare impostazioni , che reimposta rapidamente lo strumento i valori predefiniti.
Settings persistence and reset



Inoltre, questo aggiornamento include i seguenti miglioramenti in base ai suggerimenti dal canale per gli sviluppatori di Internet Explorer:

  • Aggiunge un selettore colore in Explorer DOM che consente di selezionare i colori da qualsiasi finestra sul desktop.

  • Aggiunge gli stack di chiamate di chiamate asincrone correlate per timer e le risposte XHR.

Per ulteriori informazioni sull'utilizzo di strumenti di sviluppo F12 11, Internet Explorer, visitare i seguenti siti Web Microsoft:

Utilizzando gli strumenti di sviluppo F12

Canale per gli sviluppatori di Internet Explorer

Informazioni sull'aggiornamento

Questo aggiornamento era prima incluso nell'aggiornamento della protezione 2976627:

2976627 MS14-051: aggiornamento cumulativo della protezione per Internet Explorer: il 12 agosto 2014.
Nota: Se è installata un'anteprima degli strumenti di sviluppo di F12 dal canale per gli sviluppatori di Internet Explorer, non è necessario disinstallare tale versione prima di installare questo aggiornamento.

Per installare l'aggiornamento della protezione cumulativo più recente per Internet Explorer, passare a Microsoft Update.

Per informazioni tecniche sull'aggiornamento della protezione cumulativo più recente per Internet Explorer, visitare il seguente sito Web Microsoft:

http://www.microsoft.com/technet/security/current.aspx

Serve aiuto?

Amplia le tue competenze
Esplora i corsi di formazione
Ottieni in anticipo le nuove caratteristiche
Partecipa a Microsoft Insider

Queste informazioni sono risultate utili?

Grazie per il feedback!

Grazie per il tuo feedback! Potrebbe essere utile metterti in contatto con uno dei nostri operatori del supporto di Office.

×