Novità di DevTools (Chrome 71)

Kayce Basques

Le nuove funzionalità e le modifiche principali che verranno introdotte 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 dinamica restituisce un nodo DOM, passa il mouse sopra il risultato dell'espressione dinamica per evidenziare il nodo nel viewport.

Passa il mouse sopra un risultato dell'espressione dal vivo per evidenziare il nodo nell'area visibile.

Figura 1. Passare il mouse sopra un risultato dell'espressione dal vivo per evidenziare il nodo nell'area visibile

Archiviare i nodi DOM come variabili globali

Per memorizzare un nodo DOM come variabile globale, esegui un'espressione nella console che restituisca 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 Archivia come variabile globale.

Memorizza come variabile globale nell'albero DOM.

Figura 3. Memorizza come variabile globale nell'albero DOM

Informazioni su iniziatore e priorità ora disponibili nelle importazioni ed 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. Esportazione delle richieste di rete in un file HAR

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

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

Il campo _initiator fornisce ulteriori informazioni su cosa ha causato la richiesta della risorsa. Questa colonna corrisponde alla colonna Iniziatore nella tabella Richieste.

La colonna dell'iniziatore.

Figura 9. La colonna dell'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 impostazione corrisponde alla colonna Priorità della 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 Comando per accedere rapidamente a riquadri, schede e funzionalità di DevTools.

Il menu dei comandi.

Figura 13. Il 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 interruzione listener di eventi per mettere in pausa ogni volta che viene attivato uno di questi eventi picture-in-picture. DevTools si mette in pausa sulla prima riga dell'handler.

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 extra) Esegui monitorEvents() nella console per osservare l'attivazione degli eventi di un elemento

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

  1. Ottieni un riferimento al nodo.

    Utilizza "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().

    Passare il nodo a monitorEvents().

    Figura 18. Passaggio del nodo a monitorEvents()

  3. Interagire 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 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 relativi al mouse, ad esempio mousedown e click. Altri tipi supportati sono key, touch e control.

Consulta la documentazione di riferimento della riga di comando per altre funzioni utili che puoi chiamare dalla console.

Scaricare i canali in anteprima

Valuta la possibilità di utilizzare Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano gli utenti.

Contatta il team di Chrome DevTools

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

Novità di DevTools

Un elenco di tutto ciò che è stato trattato nella serie Novità di DevTools.