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 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

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

  • Annullamento dello stile o del layout -> Ricalcola stili o Layout
  • Richiedi frame dell'animazione -> Frame dell'animazione attivato
  • Richiedi callback di inattività -> Richiamata 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) / Cmd (Win) + Cmd + 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 posizione "piatta" e la posizione chiusa 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 Archiviazione > 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 automaticamente attiva.
  • Il pulsante Annulla Cancella input in Rete > Filtro è ora attivabile.
  • La struttura di file in Origini > 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 quando aggiungi o elimini una località in Impostazioni Impostazioni > Località.
    • Gruppi di regole di esclusione (generali o personalizzate) in Impostazioni Impostazioni > Elenco ignorati.

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 riordinati 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 presenta un'icona appropriata, "pulisci" anziché "cestino" (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 di anteprima ti consentono di accedere alle ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di 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 usando Altre opzioni   Altre   > 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome - Guida introduttiva

Chrome - Guida introduttiva

Guida introduttiva di Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59