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.

Prima e dopo aver collegato ancoraggi espliciti e impliciti.

Inoltre, il valore dell'attributo popovertarget ora si collega 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" consente di evitare che il Debugger venga messo in pausa più volte sulla stessa riga. In questo modo è più facile lavorare con breakpoint irrilevanti che vengono attivati ripetutamente. Questa versione migliora questa funzionalità e ora funziona per:

  • Eccezioni o promesse di rifiuto delle funzioni integrate.
  • "Annullamento" dei punti di interruzione DOM, di recupero/XHR e di violazione CSP.
  • Smontaggio di Wasm.

Guarda il flusso di lavoro in azione:

Problema relativo a Chromium: 40924349.

Nuovi listener di eventi di aggancio di scorrimento

L'elenco Origini > Punti di interruzione listener di eventi > Controllo ottiene due listener correlati 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.

Problema relativo a 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. Questa opzione si allinea meglio con i predefiniti di Lighthouse.

Le impostazioni predefinite per la 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

Analogamente agli altri eventi WebSocket, il riquadro Prestazioni ora acquisisce gli eventi Invia messaggi WebSocket e Ricevi messaggi WebSocket e li mostra nell'analisi del rendimento. Ad esempio:

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

Problema relativo a Chromium: 40286129.

Varie in evidenza

Di seguito sono riportate alcune correzioni e miglioramenti degni di nota in 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 il InternalNodes non necessario a dimensione zero 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 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 Indietro/Avanti (40894153).
  • Impostazioni: sono state aggiunte icone di supporto accanto a tutte le schede.

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