Novità di DevTools (Chrome 71)

Kayce Basques
Kayce Basques
X GitHub

Le nuove funzionalità e le modifiche principali in arrivo in Chrome DevTools in Chrome 71 includono:

Continua a leggere o guarda la versione video di questa pagina:

Passa il mouse sopra un'espressione live per evidenziare un nodo DOM

Quando un'espressione live viene valutata come nodo DOM, passa il mouse sopra il risultato dell'espressione live per evidenziare il nodo nel riquadro.

Passaggio del mouse sopra un risultato di Espressione live per evidenziare il nodo nel riquadro.

Figura 1. Passaggio del mouse sopra un risultato di Live Expression per evidenziare il nodo nel riquadro di visualizzazione

Memorizzare i nodi DOM come variabili globali

Per memorizzare un nodo DOM come variabile globale, esegui un'espressione nella console che restituisce un nodo, fai clic con il tasto destro del mouse sul risultato e seleziona Memorizza come variabile globale.

Memorizza come variabile globale nella console.

Figura 2. Memorizza come variabile globale nella console

In alternativa, fai clic con il tasto destro del mouse sul nodo nell'albero DOM e seleziona Memorizza come variabile globale.

Memorizza come variabile globale nell'albero DOM.

Figura 3. Memorizza come variabile globale nell'albero DOM

Informazioni sull'iniziatore e sulla priorità ora nelle importazioni e nelle esportazioni HAR

Se vuoi diagnosticare i log di rete con i colleghi, puoi esportare le richieste di rete in un file HAR.

Esportazione delle richieste di rete in un file HAR.

Figura 8. Esportare le richieste di rete in un file HAR

Per importare di nuovo il file nel riquadro Rete, trascinalo.

Quando esporti un file HAR, DevTools ora include informazioni sull'iniziatore e sulla priorità nel file HAR. Quando importi di nuovo i file HAR in DevTools, le colonne Iniziatore e Priorità vengono ora compilate.

Il campo _initiator fornisce maggiori informazioni sul motivo per cui è stata richiesta la risorsa. Questa corrisponde alla colonna Iniziatore nella tabella Richieste.

La colonna Iniziatore.

Figura 9. Colonna Iniziatore

Puoi anche tenere premuto Maiusc e passare il mouse sopra una richiesta per visualizzarne l'iniziatore e le dipendenze.

Visualizzazione di iniziatori e dipendenze.

Figura 10. Visualizzazione di iniziatori e dipendenze

Il campo _priority indica il livello di priorità assegnato dal browser alla risorsa. Questa colonna corrisponde alla colonna Priorità nella tabella Richieste, che è nascosta per impostazione predefinita.

La colonna Priorità.

Figura 11. La colonna Priorità

Fai clic con il tasto destro del mouse sull'intestazione della tabella Richieste e seleziona Priorità per visualizzare la colonna Priorità.

Come mostrare la colonna Priorità.

Figura 12. Come mostrare la colonna Priorità

Accedere al menu dei comandi dal menu principale

Utilizza il menu Comandi per accedere rapidamente ai riquadri, alle schede e alle funzionalità di DevTools.

Il menu dei comandi.

Figura 13. Menu dei comandi

Ora puoi aprire il menu dei comandi dal menu principale. Fai clic sul pulsante Menu principale principale e seleziona Esegui comando.

Apertura del menu dei comandi dal menu principale.

Figura 14. Apertura del menu dei comandi dal menu principale

Punti di interruzione Picture in picture

Picture in Picture è una nuova API sperimentale che consente a una pagina di creare una finestra video mobile sul desktop.

Attiva le caselle di controllo enterpictureinpicture, leavepictureinpicture e resize nel riquadro Punti di interruzione listener di eventi per mettere in pausa ogni volta che viene attivato uno di questi eventi Picture in picture. DevTools si interrompe alla prima riga del gestore.

Eventi Picture in picture nel riquadro Punti di interruzione listener di eventi.

Figura 16. Eventi Picture in picture nel riquadro Punti di interruzione listener di eventi

(Suggerimento bonus) Esegui monitorEvents() nella console per osservare gli eventi di un elemento

Supponiamo che tu voglia aggiungere un bordo rosso intorno a un pulsante dopo averlo selezionato e premuto R, E, D, ma non sai a quali eventi aggiungere i listener. Utilizza monitorEvents() per registrare tutti gli eventi dell'elemento nella console.

  1. Ottieni un riferimento al nodo.

    Utilizzo di "Memorizza come variabile globale" per ottenere un riferimento al nodo.

    Figura 17. Utilizzo di Memorizza come variabile globale per ottenere un riferimento al nodo

  2. Passa il nodo come primo argomento a monitorEvents().

    Passaggio del nodo a monitorEvents().

    Figura 18. Trasferimento del nodo a monitorEvents()

  3. Interagisci con il nodo. DevTools registra tutti gli eventi del nodo nella console.

    Gli eventi del nodo nella console.

    Figura 19. Gli eventi del nodo nella console

Chiama il numero unmonitorEvents() per interrompere la registrazione degli eventi nella console.

unmonitorEvents(temp1);

Passa un array come secondo argomento a monitorEvents() se vuoi monitorare solo determinati eventi o tipi di eventi:

monitorEvents(temp1, ['mouse', 'focus']);

Il tipo mouse indica a DevTools di registrare tutti gli eventi correlati al mouse, ad esempio mousedown e click. Gli altri tipi supportati sono key, touch e control.

Consulta il riferimento alla riga di comando per altre utili funzioni che puoi chiamare dalla console.

Scaricare i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API della piattaforma web all'avanguardia e trovare problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità, degli aggiornamenti o di qualsiasi altro argomento relativo a DevTools.

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.