Novità di DevTools, Chrome 127

Sofia Emelianova

Ispezionare il posizionamento dell'ancora CSS nel riquadro Elementi

Per semplificare il debug della funzionalità di posizionamento degli ancoraggi, la scheda Stili ora collega gli identificatori di ancoraggio espliciti e gli ancoraggi impliciti ai rispettivi nodi.

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

Miglioramenti al riquadro delle fonti

Questa versione introduce diversi miglioramenti al riquadro Fonti.

Funzionalità "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ù e più volte. In questo modo è più facile lavorare con i punti di interruzione irrilevanti che vengono attivati ripetutamente. Questa versione migliora questa funzionalità, che ora funziona per:

• Eccezioni o rifiuti di promesse dalle funzioni integrate.
• Annullamento dei punti di interruzione DOM, recupero/XHR e violazione CSP.
• Nel disassemblaggio di Wasm.

Guarda il flusso di lavoro in azione:

Problema di Chromium: 40924349.

Nuovi listener di eventi di scorrimento con snap

L'elenco Origini > Punti di interruzione del listener di eventi > Controllo contiene due listener correlati a scroll-snap: scrollsnapchange e scrollsnapchanging. Questi eventi vengono attivati quando scorri il contenitore di scorrimento in modo che si agganci a un nuovo elemento.

Problema di Chromium: 40286359.

Miglioramenti al riquadro Rete

Questa versione introduce diversi miglioramenti al riquadro Rete.

Preimpostazioni per la limitazione della rete aggiornate

Il pannello Rete viene aggiornato con i preset di limitazione: 4G veloce, 3G veloce rinominato in 4G lento e 3G lento rinominato in 3G. In questo modo, si allinea meglio ai preset di Lighthouse.

Problema di Chromium: 342406608.

Informazioni sul service worker nei campi personalizzati del formato HAR

Quando esporti il log di rete in formato HAR, ora puoi visualizzare le informazioni relative ai service worker, inclusi i tempi, come campi personalizzati (con prefisso di sottolineatura). 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 ad altri eventi WebSocket, il riquadro Prestazioni ora acquisisce gli eventi Invia messaggio WebSocket e Ricevi messaggio WebSocket e li mostra nella traccia delle prestazioni. Ad esempio:

Problema di Chromium: 40286129.

Punti salienti vari

Di seguito sono riportate alcune correzioni e alcuni miglioramenti degni di nota in questa release:

• Accessibilità: gli screen reader ora annunciano il contenuto dei messaggi nella console quando scorrono il log con i tasti freccia su e freccia giù (344484979).
• Fonti:
  • Pagina: l'opzione di menu Salva con nome ora salva i file del modulo Wasm come binari Wasm validi anziché come testo Base64 (40784130).
  • Stack di chiamate: è stato rimosso il suffisso (async) dalle descrizioni dei frame di chiamate asincrone ed è stato modificato l'evidenziazione da corsivo a grassetto (343750870).
• Memoria: è stato rimosso l'oggetto InternalNodes di dimensioni zero non necessario dallo snapshot dell'heap Riepilogo (340200025).
• Rete: è stato corretto un bug che impediva l'anteprima dei contenuti della risposta di 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 delle tracce: il pulsante Termina la configurazione delle tracce è 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 assistenza accanto a tutte le schede.

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 della piattaforma web all'avanguardia e trovare problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

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

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema di DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet a @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti di DevTools.

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.