Novità di DevTools (Chrome 71)

Le nuove funzionalità e i cambiamenti 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 dal vivo per evidenziare un nodo DOM

Quando un'espressione live corrisponde a un nodo DOM, passa il mouse sopra il risultato dell'espressione live per evidenziare il nodo nell'area visibile.

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

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

Archiviare i nodi DOM come variabili globali

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

Memorizzare come variabile globale nell'albero DOM.

Figura 3. Memorizzare come variabile globale nell'albero DOM

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

Se desideri eseguire la diagnostica dei log di rete insieme ai tuoi colleghi, puoi esportare le richieste di rete in un HAR.

Esportazione delle richieste di rete in un file HAR.

Figura 8. Esportazione delle richieste di rete in un file HAR

Per importare nuovamente il file nel riquadro Rete, trascinalo.

Quando esporti un file HAR, DevTools ora include le informazioni di iniziatore e priorità nell'HAR . Quando importi di nuovo i file HAR in DevTools, le colonne Initiator e Priority (Priorità) vengono visualizzate ora compilata.

Il campo _initiator fornisce maggiore contesto sul motivo per cui è stata richiesta la risorsa. Questo è mappato 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 visualizzare la persona che l'ha avviata e delle 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. Questo viene mappato a alla colonna Priority (Priorità) della tabella Richieste, che è nascosta per impostazione predefinita.

La colonna Priorità.

Figura 11. Colonna Priorità

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

Come visualizzare la colonna Priorità.

Figura 12. Come visualizzare la colonna Priorità

Accedi al menu Comando dal menu principale

Utilizza il menu Comando per accedere rapidamente a riquadri, schede e funzionalità di DevTools.

Il menu dei comandi.

Figura 13. Menu dei comandi

Ora puoi aprire il menu Comando dal menu principale. Fai clic sul 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 un video mobile finestra sul desktop.

Attiva le caselle di controllo enterpictureinpicture, leavepictureinpicture e resize in Evento Riquadro Punti di interruzione listener per mettere in pausa ogni volta che si attiva uno di questi eventi Picture in picture. DevTools si mette in pausa sulla 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 extra) Esegui monitorEvents() nella Console per controllare l'attivazione degli eventi di un elemento

Supponiamo di voler aggiungere un bordo rosso intorno a un pulsante dopo averlo attivato e aver premuto R, E, D ma non sai a quali eventi aggiungere i listener. Utilizza monitorEvents() per registrare tutti i gli eventi dell'elemento alla 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. Passaggio del nodo a monitorEvents() in corso...

  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 correlati del mouse, ad esempio mousedown e click. Altri tipi supportati sono key, touch e control.

Consulta la pagina Riferimento a riga di comando per conoscere altre pratiche funzioni che puoi richiamare 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 in anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità e modifiche nel post o di qualsiasi altra informazione relativa a DevTools.

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema di DevTools utilizzando Altre opzioni   Altro > Guida > Segnala un problema di DevTools in DevTools.
  • Invia un tweet all'indirizzo @ChromeDevTools.
  • Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.

Novità di DevTools

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