Novità di DevTools (Chrome 122)

Sofia Emelianova
Sofia Emelianova
GitHub

La raccolta ufficiale di estensioni di Registratore è disponibile

La raccolta ufficiale di estensioni di Registratore per l'esportazione e la riproduzione è ora disponibile.

Per aprire la raccolta direttamente da Registratore, seleziona Esporta > Ottieni 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

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

La situazione 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.

L'immagine 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 riquadro Rendimento.

Breadcrumb nella cronologia

La sezione Cronologia nella parte superiore del riquadro Rendimento ora ti consente di impostare i breadcrumb e passare da uno all'altro.

Per impostare un breadcrumb, seleziona un intervallo nella Sequenza temporale, passaci sopra il mouse e fai clic sul pulsante N ms . Puoi creare diversi percorsi nidificati in successione. Per passare da un livello di zoom all'altro, fai clic sul breadcrumb corrispondente nella catena in cima alla sequenza temporale. Guarda il video successivo per vedere i breadcrumb in azione.

Problemi di Chromium: 1467739.

Iniziatori di eventi nel canale principale

Per impostazione predefinita, la traccia Rendimento > Principale ora mostra frecce che collegano gli iniziatori e i seguenti eventi causati.

  • Mancata convalida dello stile o del layout -> Ricalcola stili o Layout
  • Richiedi frame dell'animazione -> Frame dell'animazione attivato
  • Richiedi callback di inattività -> Attiva callback di inattività
  • Installa timer -> Timer attivato
  • Crea WebSocket -> Invia… e Ricevi l'handshake di WebSocket o Elimina WebSocket

Per visualizzare le frecce, individua 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 gli strumenti di sviluppo Node.js

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

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

Problemi di Chromium: 1511813.

Miglioramenti agli elementi

Questa versione introduce una serie di miglioramenti al riquadro Elementi.

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

L'elemento pseudo ::view-transition ora è modificabile in Stili

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

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

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

Problemi di Chromium: 1511233.

Il supporto della proprietà align-content per i contenitori di blocchi

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

Il supporto di prima e dopo l'allineamento dei contenuti nei contenitori di blocco.

Problemi di Chromium: 1500511.

Nuova scorciatoia e nuovo comando in Origini

Ora puoi premere Cmd (Mac) / Ctrl (Win) + Maiusc + fare clic su un numero di riga in Origini per creare un punto di log. Questa scorciatoia si aggiunge a Cmd (Mac) / Ctrl (Win) + clic per i breakpoint condizionali già esistenti.

Il menu dei comandi riceve il nuovo comando Mostra file attivo nella barra laterale del navigatore che ha lo stesso comportamento 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 posizione di un dispositivo pieghevole emulato: Continua o Piegato. La postura continua si riferisce a una posizione "piatta" e, quando il dispositivo è chiuso, forma un angolo tra le sezioni del display.

Un menu a discesa con le opzioni per la postura.

Inoltre, l'elenco Dispositivi include un nuovo dispositivo pieghevole simulato: Asus Zenbook Fold.

Problema di Chromium: 1066842.

Temi dinamici

Ora DevTools si abbina automaticamente al 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 a colori selezionato in Aspetto.

Problemi di Chromium: 1483276.

Avvisi sull'eliminazione graduale dei cookie di terze parti nei riquadri Rete e Applicazione

Ora i riquadri Rete e Applicazione 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 su di essa e apri la scheda Cookie.

La situazione prima e dopo l'acquisizione dei cookie di terze parti nel riquadro Rete.

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

L'immagine prima e dopo l'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, spicca 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 conoscere 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 Ricerca è ora automaticamente attiva.
  • Ora è possibile attivare il pulsante Cancella input in Rete > Filtro.
  • La struttura ad albero dei file in Origini > Pagina ora viene visualizzata correttamente in modalità ad alto contrasto.
  • Ora gli screen reader annunciano correttamente quanto segue:
    • Lo stato delle caselle di controllo in Origini > Punti di interruzione.
    • Posizione e informazioni sull'indice per un elenco di suggerimenti.
    • Risultato dell'azione quando aggiungi o elimini una stazione di ricarica in Impostazioni > Stazioni di ricarica.
    • Gruppi di regole di esclusione (generali o personalizzate) in Impostazioni > Elenco ignora.

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

Altri punti salienti

Di seguito sono riportate alcune correzioni e miglioramenti significativi di questa release:

  • Animazioni:
    • È stato corretto il bug relativo al rendering fuori bordo del popup dello screenshot (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 con un 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 garantire la coerenza con gli altri riquadri (1393800).
  • Sensori: è stato corretto un bug relativo al richiamo corretto con posizione non disponibile (1486859).
  • Rendimento:
    • Il pulsante Raccogli immondizia ora ha un'icona appropriata, "mop" anziché "pattumiera" (1507530).
    • Ora il monitoraggio del rendimento conserva i dati quando si accede a about:blank (1509947).

Scaricare i canali di 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 API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano i tuoi 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.