Novità di DevTools (Chrome 122)

Sofia Emelianova
Sofia Emelianova

È disponibile la raccolta ufficiale delle estensioni di Registratore

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

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

Miglioramenti della 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, era necessario attivare check_box Righe di richiesta grande o selezionare la richiesta nella tabella.

Il motivo dell'errore mostrato prima e dopo nella colonna Stato.

Problemi relativi a Chromium: 1506760.

Sottomenu Copia migliorato

Il sottomenu Copia di una richiesta ora è meglio organizzato.

Il prima e dopo il miglioramento del sottomenu Copia.

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

Problemi relativi a Chromium: 1267033, 1276452, 798498.

Miglioramenti del rendimento

Questa versione introduce una serie di miglioramenti al riquadro Prestazioni,

Breadcrumb nella sequenza temporale

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

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

Problemi relativi a Chromium: 1467739.

Utenti che hanno avviato gli eventi nel canale principale

La sezione Rendimento > Per impostazione predefinita, la traccia Principale ora mostra frecce che collegano chi inizia e i seguenti eventi che hanno causato.

  • Annullamento convalida stile o layout -> Ricalcola stili o Layout
  • Richiedi frame dell'animazione -> Frame dell'animazione attivato
  • Richiedi callback di inattività -> Richiamata incendio in caso di inattività
  • Installa Timer -> Timer attivato
  • Crea WebSocket -> Invia... e Ricevi l'handshake di WebSocket o Destroy WebSocket.

Per vedere le frecce, individua l'evento di questo tipo nella traccia e fai clic. In precedenza, questa funzionalità era un esperimento.

Una freccia proveniente dalla richiesta e attivazione di un callback inattivo.

Problemi relativi a Chromium: 1434596.

Menu del selettore di istanze 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 nel Profilo JavaScript che verrà presto ritirato.

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

Problemi relativi a Chromium: 1511813.

Miglioramenti agli elementi

Questa versione introduce una serie di miglioramenti al riquadro Elementi.

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

Ora lo pseudoelemento ::view-transition è modificabile in Stili

Ora puoi modificare gli pseudoelementi CSS ::view-transition in Stili utilizzando il foglio di stile dello strumento di controllo.

Il supporto della modifica prima e dopo degli pseudo-elementi di transizione delle viste.

Per ulteriori informazioni, vedi Transizioni semplici e fluide con l'API View Transizione.

Problemi relativi a Chromium: 1511233.

Supporto delle proprietà align-content per i contenitori a blocchi

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

Supporto dell'allineamento dei contenuti prima e dopo nei contenitori a blocchi.

Problemi relativi a Chromium: 1500511.

Nuova scorciatoia e nuovo comando in Origini

Ora puoi Cmd (Mac) / Ctrl (Win) + Maiusc + fare clic su un numero di riga in Origini per creare un punto di log. Questa scorciatoia è un'aggiunta agli elementi già esistenti Cmd (Mac) / Ctrl (Win) + clic per i punti di interruzione condizionali.

Il Menu comando consente di recuperare il nuovo comando Mostra file attivo nella barra laterale del navigatore che equivale all'opzione corrispondente nel menu a discesa dell'Editor.

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

Problemi relativi a Chromium: 1486933, 1467464.

Supporto della postura per i dispositivi pieghevoli emulati

Ora la modalità dispositivo ti consente di impostare la postura di un dispositivo pieghevole emulato: continua o piegata. La postura continua è una postura "piatta" posizione e piegato forma un angolo tra le sezioni del display.

Un menu a discesa con le opzioni della postura.

Inoltre, nell'elenco Dispositivi viene associato un nuovo dispositivo pieghevole emulato: Asus Zenbook Fold.

Problema relativo a Chromium: 1066842.

Temi dinamici

DevTools ora si abbina automaticamente al tema cromatico di Chrome. Per impostare un tema:

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

DevTools corrisponde al tema a colori selezionato in Aspetto.

Problemi relativi a Chromium: 1483276.

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

I riquadri Rete e Applicazioni ora evidenziano e mostrano avvisi accanto ai cookie interessati dalle limitazioni di terze parti della Protezione antitracciamento.

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

I dati 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 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 sono ora ordinati per nome per impostazione predefinita.

Problemi relativi a Chromium: 1506225, 1503961.

Lighthouse 11.4.0

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

Controllo che rileva i cookie di terze parti.

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

Problema relativo a Chromium: 772558.

Accessibilità

Questa versione presenta i seguenti miglioramenti all'accessibilità:

  • Quando apri le impostazioni Impostazioni > Esperimenti, la casella di ricerca è ora attiva automaticamente.
  • Pulsante per annullare Cancella input in Rete > Ora l'opzione Filtro è attiva.
  • La struttura dei file in Origini > La pagina ora viene visualizzata 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 indicizzazione per un elenco di suggerimenti.
    • Risultato dell'azione durante l'aggiunta o l'eliminazione di una località in Impostazioni Impostazioni > Località.
    • Gruppi di regole di esclusione (generali o personalizzate) in Impostazioni Impostazioni > Elenco di persone da ignorare.

Problemi relativi a Chromium: 1504938, 1499868, 1512161, 1515224, 1515418, 1516998 e 1517015.

Varie in evidenza

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

  • Animazioni:
      .
    • È stato corretto il bug relativo al rendering dei popover degli screenshot fuori dai limiti (1506991).
    • È stato corretto il bug relativo ai nodi di animazione rimossi non contrassegnati come rimossi (1506561).
  • Rete:
      .
    • Override delle intestazioni: è stato corretto un bug con un'icona a forma di puntino viola falso nella scheda Intestazioni (1507856).
    • Anteprima: è stato corretto un bug con una doppia decodifica non necessaria (1509336).
    • È stato corretto un bug per cui le richieste brevi non venivano visualizzate (1509862).
  • Applicazione > IndexedDB: pulsanti riorganizzati nella barra delle azioni per coerenza con gli altri riquadri (1393800).
  • Sensori: è stato corretto un bug relativo alla posizione non disponibile e al callback riuscito (1486859).
  • Rendimento:
      .
    • Il pulsante Raccogli rifiuti ora ha un'icona appropriata, "lavapavimenti" anziché "contenitore" (1507530).
    • Ora la traccia del rendimento conserva i dati durante la navigazione verso 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 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   Altro > 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.