Novità di DevTools (Chrome 64)

Kayce Basques

Siamo felici di rivederti. Le nuove funzionalità in arrivo in DevTools in Chrome 64 includono:

Continua a leggere o guarda la versione video delle note di rilascio riportate di seguito.

Monitoraggio delle prestazioni

Utilizza lo strumento Monitoraggio del rendimento per avere una visione in tempo reale dei vari aspetti del caricamento di una pagina le prestazioni di runtime, tra cui:

  • CPU utilizzata.
  • Dimensione heap JavaScript.
  • Il numero totale di nodi DOM, listener di eventi JavaScript, documenti e frame nella pagina.
  • Layout e ricalcoli di stile al secondo.

Se gli utenti segnalano che la tua app sembra lenta o insidiosa, controlla Performance Monitor per indizi.

Perché il caricamento è importante: BookMyShow ha ottenuto un aumento dell'80% delle conversioni grazie a una App web progressiva incentrata sulla velocità. Scopri di più.

Per utilizzare Performance Monitor:

  1. Apri il menu dei comandi.

  2. Inizia a digitare Performance, quindi seleziona Show Performance Monitor.

    Monitoraggio delle prestazioni Figura 1. La Monitoraggio delle prestazioni

  3. Fai clic su una metrica per visualizzarla o nasconderla. nella figura 1: utilizzo della CPU, dimensione heap di JS e JS con i listener di eventi.

Funzionalità correlate:

  • Riquadro Rendimento: Ripercorri un percorso critico dell'utente e registra tutto ciò che accade su la pagina, tra cui attività JavaScript, richieste di rete, utilizzo della CPU e molto altro ancora. Può anche essere utilizzata per analizzare le prestazioni di caricamento. Scopri di più.
  • Riquadro Controlli. Esegui una suite di test automatici delle prestazioni di caricamento e runtime su qualsiasi URL. Scopri di più.

Se hai appena iniziato l'analisi del rendimento, il percorso consigliato è quello di utilizzare Controlli, poi analizza ulteriormente il rendimento utilizzando il riquadro Rendimento o Rendimento. monitoraggio.

Barra laterale della console

Sui siti di grandi dimensioni, la console può essere rapidamente inondata di messaggi non pertinenti. Usa la nuova console Barra laterale per ridurre il rumore e concentrare l'attenzione sui messaggi importanti per te.

Utilizzo della barra laterale della console per mostrare solo i messaggi di errore

Figura 2. Utilizzo della barra laterale della console per mostrare solo i messaggi di errore

La barra laterale della console è nascosta per impostazione predefinita. Fai clic su Mostra barra laterale della console. Mostra barra laterale della console per mostrarlo.

Funzionalità correlate:

  • Casella di testo Filtro. Inserendo del testo, nella console verranno mostrati solo i messaggi che includono testo. Supporta anche pattern regex, filtri esclusi e filtri URL.

Raggruppa messaggi della console simili

La console ora raggruppa insieme i messaggi simili per impostazione predefinita. Ad esempio, nella Figura 3 sono presenti 27 del messaggio [Violation] Avoid using document.write().

Esempio di raggruppamento di messaggi simili nella console

Figura 3. Esempio di raggruppamento di messaggi simili nella console

Fai clic su un gruppo per espanderlo e visualizzare ciascuna istanza del messaggio.

Esempio di un gruppo espanso di messaggi della console

Figura 4. Esempio di un gruppo espanso di messaggi della console

Deseleziona la casella di controllo Raggruppa simili per disattivare questa funzionalità.

Funzionalità correlate:

Override locali

Ci dispiace. Inizialmente avevamo programmato il lancio di questa funzione in Chrome 64, ma poi l'abbiamo ritirata e la scadenza del periodo di conservazione per compensare alcuni margini. A quanto pare, la UI della sezione Novità non si aggiornava nel tempo. Spiacenti.

Questa funzionalità sarà disponibile in Chrome 65, che sarà disponibile circa 6 settimane dopo la versione 64. Controllo per saperne di più, consulta Override locali. Se utilizzi Windows o Mac, puoi provare subito Chrome 65 scaricare Chrome Canary.

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 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.