Novità di DevTools, Chrome 127

Sofia Emelianova

Ispeziona il posizionamento degli ancoraggi CSS nel riquadro Elementi

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

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

Miglioramenti al riquadro Fonti

Questa versione introduce diversi miglioramenti al riquadro Origini.

"Non mettere mai in pausa qui" migliorato

L'opzione "Non mettere mai in pausa qui" ti consente di impedire al debugger di mettere in pausa ripetutamente sulla stessa riga. In questo modo è più facile lavorare con i punti di interruzione non pertinenti che vengono attivati ripetutamente. Questa versione migliora questa funzionalità, che ora è disponibile per:

• Eccezioni o rifiuti di promise da funzioni integrate.
• "Annullamento" dei punti di interruzione DOM, fetch/XHR e violazione CSP.
• Nel disassemblaggio Wasm.

Guarda il flusso di lavoro in azione:

Problema di Chromium: 40924349.

Nuovi listener di eventi di allineamento dello scorrimento

L'elenco Origini > Punti di interruzione listener di eventi > Controllo riceve due listener relativi all'allineamento dello scorrimento: scrollsnapchange e scrollsnapchanging. Questi eventi vengono attivati quando scorri il contenitore di scorrimento in modo da agganciarlo 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 larghezza di banda della rete aggiornate

Il riquadro Rete riceve preset di limitazione aggiornati: il nuovo 4G veloce, il 3G veloce rinominato in 4G lento e il 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 un formato HAR, ora puoi visualizzare le informazioni relative ai service worker, incluse le tempistiche, come campi personalizzati (con prefisso di 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.

Invia e ricevi eventi WebSocket nel riquadro Prestazioni

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.

Momenti salienti vari

Ecco alcune correzioni e alcuni miglioramenti degni di nota in questa release:

• Accessibilità: gli screen reader ora annunciano i contenuti dei messaggi nella Console quando scorri il log con i tasti Freccia su e Freccia giù (344484979).
• Fonti:
  • Pagina: l'opzione di menu Salva con nome ora salva i file dei moduli Wasm come file binari wasm validi anziché come testo Base64 (40784130).
  • Stack di chiamate: è stato rimosso il suffisso (async) dalle descrizioni dei frame di chiamata asincrona ed è stata modificata l'evidenziazione da corsivo a grassetto (343750870).
• Memoria: è stato rimosso l'elemento InternalNodes di dimensioni pari a zero non necessario dal riepilogo dell'istantanea 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).
• Prestazioni:
  • Statistiche del selettore: è stato aggiunto un tooltip esplicativo per la colonna %-of-Slow-Path-Non-Matches (324282954).
  • Modalità di configurazione delle tracce: il pulsante Completa 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 back-forward (40894153).
• Impostazioni: sono state aggiunte icone di aiuto accanto a tutte le schede.

Scarica i canali in 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 le API della piattaforma 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.

• 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 commenti sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti per DevTools.

Novità di DevTools

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