Novità di DevTools, Chrome 127

Sofia Emelianova

Ispezionare il posizionamento degli ancoraggi CSS nel riquadro Elementi

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

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

Miglioramenti al riquadro Origini

Questa versione introduce diversi miglioramenti al riquadro Origini.

Opzione "Non mettere mai in pausa qui" migliorata

Non fermarti mai consente di impedire al Debugger di essere messo in pausa più volte sulla stessa riga. In questo modo è più facile lavorare con punti di interruzione non pertinenti che si attivano ripetutamente. Questa versione migliora questa funzionalità e ora funziona per:

• Eccezioni o promesse di rifiuto delle funzioni integrate.
• "Annullamento" Punti di interruzione per violazioni DOM, fetch/XHR e CSP.
• Smontaggio di Wasm.

Guarda il flusso di lavoro in azione:

Problema relativo a Chromium: 40924349.

Nuovi listener di eventi di aggancio di scorrimento

Nella sezione Fonti > Punti di interruzione listener di eventi > L'elenco controllo riceve due listener correlati a scroll-snap: scrollsnapchange e scrollsnapchanging. Questi eventi si attivano quando fai scorrere il contenitore di scorrimento in un modo che lo farebbe agganciare a un nuovo elemento.

Problema relativo a Chromium: 40286359.

Miglioramenti al riquadro Rete

Questa versione introduce diversi miglioramenti al riquadro Rete.

Preimpostazioni di limitazione della rete aggiornate

Nel riquadro Rete vengono aggiornati i predefiniti aggiornati per la limitazione: i nuovi modelli 4G veloce e 3G veloce sono stati rinominati 4G lento e 3G lento è stato rinominato 3G. Questa opzione si allinea meglio con i predefiniti di Lighthouse.

Problema relativo a Chromium: 342406608.

Informazioni sul service worker in campi personalizzati del formato HAR

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

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

Problema relativo a Chromium: 342406608.

Invia e ricevi eventi WebSocket nel riquadro Prestazioni

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:

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 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 di moduli Wasm come binari wasm validi anziché come testo Base64 (40784130).
  • Stack di chiamate: è stato rimosso il suffisso (async) dalle descrizioni dei frame di chiamata asincroni e ne è stata modificata l'evidenziazione da corsivo a 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 delle risposte in streaming per le richieste appena avviate, ma che non ricevevano ancora 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 Termina configurazione canali è stato spostato in basso a destra (345256274).
• Console: è stato corretto un bug che mostrava più messaggi identici nella console durante la navigazione con la cache back-forward (40894153).
• Impostazioni: sono state aggiunte icone di aiuto 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 in 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   > 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.