Novità di DevTools, Chrome 127

Sofia Emelianova
Sofia Emelianova
GitHub

Per aiutarti a eseguire più facilmente il debug della funzionalità di posizionamento degli elementi di ancoraggio, la scheda Stili ora collega gli identificatori di elementi di ancoraggio espliciti e gli elementi di ancoraggio impliciti ai relativi nodi.

Le ancore esplicite e implicite prima e dopo il collegamento.

Inoltre, il valore dell'attributo popovertarget ora rimanda al relativo elemento popover nel DOM.

L'elemento popovertarget prima e dopo il collegamento all'elemento popover.

Miglioramenti al riquadro Origini

Questa versione introduce diversi miglioramenti al riquadro Origini.

"Non mettere mai in pausa qui" migliorata

L'opzione "Non mettere mai in pausa qui" ti consente di impedire al Debugger di mettere in pausa la stessa riga più volte. In questo modo è più facile lavorare con breakpoint irrilevanti che vengono attivati ripetutamente. Questa versione migliora questa funzionalità e ora è supportata per:

  • Eccezione o rifiuto di promesse da funzioni integrate.
  • "Annullamento" dei punti di interruzione DOM, di recupero/XHR e di violazione CSP.
  • Nell'assemblaggio di Wasm.

Guarda il flusso di lavoro in azione:

Problema di Chromium: 40924349.

Nuovi listener di eventi di snap di scorrimento

L'elenco Origini > Breakpoint degli ascoltatori di eventi > Controllo riceve due ascoltatori relativi a scroll-snap: scrollsnapchange e scrollsnapchanging. Questi eventi vengono attivati quando scorri il contenitore in modo che si agganci a un nuovo elemento.

Lo stato prima e dopo l'aggiunta di listener di eventi relativi allo scorrimento con scatto.

Problema di Chromium: 40286359.

Miglioramenti al riquadro Rete

Questa versione introduce diversi miglioramenti al riquadro Rete.

Preimpostazioni di limitazione della rete aggiornate

Il riquadro Rete viene aggiornato con le preimpostazioni di limitazione: nuova opzione 4G veloce, 3G veloce rinominata in 4G lento e 3G lento rinominata in 3G. In questo modo, il tuo sito sarà più in linea con le preimpostazioni di Lighthouse.

I preset di limitazione della rete prima e dopo l'aggiornamento.

Problema di Chromium: 342406608.

Informazioni sui worker di servizio nei campi personalizzati del formato HAR

Quando esporti il log di rete in un formato HAR, ora puoi visualizzare le informazioni relative ai service worker, inclusi i tempi, come campi personalizzati (preceduti da trattini bassi). Ad esempio, nel log potresti trovare i seguenti nuovi campi:

...
"response": {
  ...
  "_fetchedViaServiceWorker": true,
  "_responseCacheStorageCacheName": "V1",
  "_serviceWorkerResponseSource": "cache-storage"
}
...
"timings": {
  ...
  "_workerStart": -1,
  "_workerReady": -1,
  "_workerFetchStart": -1,
  "_workerRespondWithSettled": -1
}
...

Problema di Chromium: 342406608.

Inviare e ricevere eventi WebSocket nel riquadro Rendimento

Come per altri eventi WebSocket, il riquadro Rendimento ora acquisisce gli eventi Invia messaggio WebSocket e Ricevi messaggio WebSocket e li mostra nella traccia del rendimento. Ad esempio:

L'evento "Ricevi messaggio WebSocket" acquisito nella traccia delle prestazioni.

Problema di Chromium: 40286129.

Altri punti salienti

Di seguito sono riportate alcune correzioni e miglioramenti significativi di questa release:

  • Accessibilità: gli screen reader ora annunciano i contenuti dei messaggi nella console quando si scorre il log con i tasti freccia su e giù (344484979).
  • Fonti:
    • Pagina: l'opzione di menu Salva con nome ora salva i file del modulo Wasm come file binari wasm validi anziché come testo Base64 (40784130).
    • Pila di chiamate: è stato rimosso il suffisso (async) dalle descrizioni del frame di chiamata asincrona e l'evidenziazione è passata dal corsivo al grassetto (343750870).
  • Memoria: è stato rimosso l'elemento InternalNodes di dimensioni pari a zero non necessario dal riepilogo dello snapshot dell'heap (340200025).
  • Rete: è stato corretto un bug che impediva l'anteprima dei contenuti della risposta in streaming per le richieste appena avviate, ma che non avevano ancora ricevuto un evento responseReceived (338340752).
  • Rendimento:
    • Statistiche del selettore: è stata aggiunta una descrizione comando esplicativa per la colonna %-of-Slow-Path-Non-Matches (324282954).
    • Modalità di configurazione dei canali: il pulsante Completa la configurazione dei canali è stato spostato in basso a destra (345256274).
  • Console: è stato corretto un bug che mostrava più messaggi della console identici durante la navigazione utilizzando la cache avanti/indietro (40894153).
  • Impostazioni: sono state aggiunte icone di supporto accanto a tutte le schede.

Scaricare i canali di 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 i tuoi 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.