Novità di DevTools (Chrome 122)

Sofia Emelianova
Sofia Emelianova

La raccolta ufficiale di estensioni di Registratore è disponibile

La raccolta ufficiale di estensioni di esportazione e riproduzione del Registratore è ora disponibile.

Per aprire la raccolta direttamente da Registratore, seleziona Esporta > Scarica estensioni… nella barra delle azioni nella parte superiore del riquadro Registratore.

Miglioramenti alla rete

Questa versione introduce una serie di miglioramenti al riquadro Rete.

Motivo dell'errore nella colonna Stato

La colonna Stato ora mostra sempre un motivo di errore. In precedenza, dovevi attivare Righe di richieste di grandi dimensioni o selezionare la richiesta nella tabella.

Prima e dopo la visualizzazione del motivo dell'errore nella colonna Stato.

Problemi di Chromium: 1506760.

Sottomenu Copia migliorato

Il sottomenu Copia di una richiesta ora è organizzato meglio.

Prima e dopo il miglioramento del sottomenu Copia.

Inoltre, l'opzione Copia come cURL ora copia il comando corretto negli appunti su Windows.

Problemi di Chromium: 1267033, 1276452, 798498.

Miglioramenti del rendimento

Questa versione introduce una serie di miglioramenti al pannello Rendimento.

Breadcrumb in Spostamenti

La cronologia nella parte superiore del riquadro Rendimento ora ti consente di impostare le breadcrumb e passare da una all'altra.

Per impostare un breadcrumb, seleziona un intervallo nella sequenza temporale, passaci sopra il mouse e fai clic sul pulsante N ms . Puoi creare diverse breadcrumb nidificate in successione. Per passare da un livello di zoom all'altro, fai clic sul breadcrumb corrispondente nella catena nella parte superiore della sequenza temporale. Guarda il video successivo per vedere le breadcrumb in azione.

Problemi di Chromium: 1467739.

Iniziatori di eventi nella traccia principale

La traccia Rendimento > Principale per impostazione predefinita ora mostra frecce che collegano gli iniziatori e gli eventi successivi che hanno causato.

  • Invalidazione di stile o layout -> Ricalcola stili o Layout
  • Richiedi frame dell'animazione -> Frame dell'animazione attivato
  • Request Idle Callback -> Fire Idle Callback
  • Installa timer -> Timer attivato
  • Crea WebSocket -> Invia… e Ricevi l'handshake di WebSocket o Elimina WebSocket

Per visualizzare le frecce, trova un evento di questo tipo nella traccia e fai clic. In precedenza, questa funzionalità era un esperimento.

Una freccia dalla richiesta e l'attivazione di un callback di inattività.

Problemi di Chromium: 1434596.

Menu di selezione dell'istanza VM JavaScript per Node.js DevTools

Nel riquadro Prestazioni di Node.js DevTools, ora puoi selezionare un'istanza VM JavaScript dal menu a discesa corrispondente nella barra delle azioni. Una funzionalità simile era disponibile in JavaScript Profiler, che verrà ritirato a breve.

Prima e dopo l'aggiunta di un nuovo menu che consente di selezionare un'istanza VM JavaScript.

Problemi di Chromium: 1511813.

Miglioramenti degli elementi

Questa versione introduce una serie di miglioramenti al riquadro Elementi.

Oltre alle due funzionalità successive, il riquadro Elementi ora ricorda l'ultima scheda aperta, ad esempio Calcolato o Proprietà.

Lo pseudo-elemento ::view-transition ora è modificabile in Stili

Ora puoi modificare gli pseudo-elementi CSS ::view-transition in Stili utilizzando il foglio di stile dell'inspector.

Il supporto prima e dopo la modifica degli pseudo-elementi di transizione della visualizzazione.

Per saperne di più, consulta Transizioni fluide e semplici con l'API View Transitions.

Problemi di Chromium: 1511233.

Supporto della proprietà align-content per i contenitori di blocchi

La proprietà align-content ora funziona con qualsiasi contenitore di blocchi, inclusi table-caption e table-cell. In precedenza, funzionava solo con griglia e flex.

Il supporto di before e after align-content nei contenitori di blocchi.

Problemi di Chromium: 1500511.

Nuova scorciatoia e nuovo comando in Sources

Ora puoi premere Cmd (Mac) / Ctrl (Win) + Maiusc + fare clic su un numero di riga in Origini per creare un logpoint. Questa scorciatoia si aggiunge a quella già esistente Cmd (Mac) / Ctrl (Windows) + clic per i punti di interruzione condizionali.

Il menu dei comandi riceve il nuovo comando Mostra file attivo nella barra laterale del navigatore, che svolge la stessa funzione dell'opzione corrispondente nel menu a discesa dell'editor.

Il nuovo comando per mostrare il file attivo nella barra laterale del navigatore.

Problemi di Chromium: 1486933, 1467464.

Supporto della postura per i dispositivi pieghevoli emulati

La modalità Dispositivo ora ti consente di impostare la postura di un dispositivo pieghevole emulato: Continua o Piegata. La postura continua si riferisce a una posizione "piatta", mentre la postura piegata forma un angolo tra le sezioni del display.

Un menu a discesa con le opzioni di postura.

Inoltre, l'elenco Dispositivi riceve un nuovo dispositivo pieghevole emulato: Asus Zenbook Fold.

Problema di Chromium: 1066842.

Temi dinamici

Ora DevTools abbina automaticamente il tema a colori di Chrome. Per impostare un tema:

  1. Apri una nuova scheda e fai clic su Personalizza Chrome nell'angolo in basso a destra.
  2. In Aspetto, scegli un tema tramite Cambia temi o seleziona una tavolozza di colori.

DevTools corrisponde al tema cromatico selezionato in Aspetto.

Problemi di Chromium: 1483276.

Avvisi di ritiro graduale dei cookie di terze parti nei riquadri Rete e Applicazione

I pannelli Rete e Applicazione ora evidenziano e mostrano avvisi accanto ai cookie interessati dalle limitazioni di terze parti di Protezione antitracciamento.

In Rete, trova una richiesta con un'icona di , fai clic e apri la scheda Cookie.

Prima e dopo l'acquisizione dei cookie di terze parti nel riquadro Rete.

In Applicazione, vai a Storage > Cookie e fai clic su un dominio. I cookie evidenziati in giallo non vengono memorizzati nel browser.

Il prima e il dopo dell'evidenziazione dei cookie di terze parti nel riquadro Applicazione.

Passa il mouse sopra l'icona di avviso per visualizzare una descrizione comando che descrive i problemi e fai clic sull'icona per aprire la scheda Problemi con ulteriori informazioni.

Inoltre, i cookie nella tabella ora sono ordinati per nome per impostazione predefinita.

Problemi di Chromium: 1506225, 1503961.

Lighthouse 11.4.0

Il riquadro Lighthouse ora esegue Lighthouse 11.4.0. Consulta l'elenco completo delle modifiche. Tra le modifiche più importanti c'è il nuovo controllo che ti consente di rilevare se il tuo sito web utilizza ancora cookie di terze parti.

Controllo che rileva i cookie di terze parti.

Per scoprire le nozioni di base sull'utilizzo del riquadro Lighthouse in DevTools, consulta Lighthouse: ottimizzare la velocità del sito web.

Problema di Chromium: 772558.

Accessibilità

Questa versione include i seguenti miglioramenti dell'accessibilità:

  • Quando apri Impostazioni > Esperimenti, la casella Cerca è ora automaticamente selezionata.
  • Il pulsante Cancella input in Rete > Filtro è ora selezionabile.
  • L'albero dei file in Origini > Pagina ora viene visualizzato correttamente in modalità ad alto contrasto.
  • Gli screen reader ora annunciano correttamente quanto segue:
    • Lo stato delle caselle di controllo in Origini > Punti di interruzione.
    • Informazioni su posizione e indice per un elenco di suggerimenti.
    • Risultato dell'azione quando si aggiunge o si elimina una posizione in Impostazioni > Posizioni.
    • Gruppi di regole di esclusione (generali o personalizzate) in Impostazioni > Elenco Ignora.

Problemi di Chromium: 1504938, 1499868, 1512161, 1515224, 1515418, 1516998, 1517015.

Punti salienti vari

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

  • Animazioni:
    • È stato corretto il bug relativo al rendering del popup dello screenshot fuori dai limiti (1506991).
    • È stato corretto il bug relativo ai nodi di animazione rimossi non contrassegnati come rimossi (1506561).
  • Rete:
    • Override intestazioni: è stato corretto un bug relativo a un'icona a forma di punto viola nella scheda Intestazioni (1507856).
    • Anteprima: è stato corretto un bug relativo a una doppia decodifica non necessaria (1509336).
    • È stato corretto un bug a causa del quale le richieste di Short non venivano visualizzate (1509862).
  • Applicazione > IndexedDB: i pulsanti nella barra delle azioni sono stati riorganizzati per coerenza con gli altri pannelli (1393800).
  • Sensori: è stato corretto un bug con il callback riuscito errato della posizione non disponibile (1486859).
  • Rendimento:
    • Il pulsante Raccogli spazzatura ora ha un'icona appropriata, "mocio" anziché "cestino" (1507530).
    • Il tracciamento del rendimento ora conserva i dati quando si passa a about:blank (1509947).

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.

Novità di DevTools

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