Novità di DevTools (Chrome 122)

Sofia Emelianova
Sofia Emelianova

La raccolta ufficiale di estensioni Registratore è ora disponibile

La raccolta ufficiale delle estensioni Recorder 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 alla rete

Questa versione introduce una serie di miglioramenti al riquadro Rete.

Motivo dell'errore nella colonna Stato

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

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

Problemi di 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 di Chromium: 1267033, 1276452, 798498.

Miglioramenti del rendimento

Questa versione apporta una serie di miglioramenti al riquadro Prestazioni.

Breadcrumb nella cronologia

La Sequenza temporale 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 il mouse sopra 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 prossimo video per vedere i breadcrumb in azione.

Problemi di Chromium: 1467739.

Iniziatori di eventi nella traccia principale

Per impostazione predefinita, il canale Rendimento > Principale ora mostra frecce che collegano gli iniziatori e i seguenti eventi da essi generati.

  • Annullamento convalida stile o layout -> Ricalcola stili o Layout
  • Richiedi frame dell'animazione -> Frame dell'animazione attivato
  • Richiedi callback di inattività -> Attiva callback per inattività
  • 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 su di essa. In precedenza, questa funzionalità era un esperimento.

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

Problemi di Chromium: 1434596.

Menu del selettore di istanze VM JavaScript per DevTools Node.js

Nel riquadro Performance (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.

Il 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à successive, il riquadro Elementi ora memorizza l'ultima scheda aperta, ad esempio Elaborata 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 di Controllo.

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

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

Problemi di Chromium: 1511233.

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

La proprietà align-content ora funziona con tutti i contenitori di blocco, tra cui table-caption e table-cell. In precedenza, funzionava solo con le funzionalità Griglia e Flex.

Il supporto dei contenuti prima e dopo l'allineamento nei container a blocchi.

Problemi di Chromium: 1500511.

Nuova scorciatoia e 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 ai già esistenti Cmd (Mac) / Ctrl (Win) + clic per i punti di interruzione condizionali.

Il menu Comando riceve il nuovo comando Mostra file attivo nella barra laterale di navigazione che funziona come l'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 per la postura per dispositivi pieghevoli emulati

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

Un menu a discesa con opzioni per la postura.

Inoltre, all'elenco Dispositivi è presente un nuovo dispositivo pieghevole emulato: Asus Zenbook Fold.

Problema di Chromium: 1066842.

Temi dinamici

DevTools ora corrisponde automaticamente al tema a colori 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 tramite l'opzione Sfondo Cambia tema o seleziona una tavolozza dei colori.

DevTools corrisponde al tema a colori selezionato in Aspetto.

Problemi di Chromium: 1483276.

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

Entrambi i riquadri 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 avviso di avviso, fai clic sulla richiesta e apri la scheda Cookie.

I cookie di terze parti prima e dopo l'acquisizione 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.

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 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 consente di rilevare se il sito web utilizza ancora cookie di terze parti.

Un controllo che rileva 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 di Chromium: 772558.

Accessibilità

Questa versione presenta i seguenti miglioramenti all'accessibilità:

  • Quando apri le impostazioni Impostazioni > Esperimenti, la casella Ricerca è ora attiva automaticamente.
  • Il pulsante Annulla Cancella input in Rete > Filtro è ora attivabile.
  • La struttura ad albero dei file in Origini > Pagina ora viene visualizzata correttamente in modalità ad alto contrasto.
  • Ora gli screen reader enunciano 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 ignorare.

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

Varie in evidenza

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

  • Animazioni:
    • Risolto il bug relativo al rendering del popover di screenshot al di fuori dei limiti (1506991).
    • Risolto il bug relativo alla rimozione dei nodi di animazione non contrassegnati come rimossi (1506561).
  • Rete:
    • Override delle intestazioni: è stato corretto un bug relativo a un'icona con un falso punto viola nella scheda Intestazioni (1507856).
    • Anteprima: è stato corretto un bug con una doppia decodifica non necessaria (1509336).
    • Risolto un bug per cui le richieste brevi non venivano visualizzate (1509862).
  • Applicazione > IndexedDB: pulsanti riorganizzati nella barra delle azioni per garantire la coerenza con altri riquadri (1393800).
  • Sensori: è stato corretto un bug relativo al callback riuscito (1486859) relativo alla posizione non disponibile.
  • Rendimento:
    • Il pulsante Raccogli i rifiuti ora ha un'icona appropriata, "mop" anziché "bin" (1507530).
    • L'analisi del rendimento ora conserva i dati quando si accede a about:blank (1509947).

Scarica 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à di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema DevTools utilizzando Altre opzioni   Altre   > Guida > Segnala i problemi di DevTools in DevTools.
  • Tweet all'indirizzo @ChromeDevTools.
  • Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.

Novità di DevTools

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

Chrome 123

Chrome 122

Guida introduttiva di Chrome

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Versione 115 di Chrome

Chrome 114

Chrome 113

Chrome 112

Guida introduttiva di Chrome

Versione 110 di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

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

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

Chrome versione 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 versione 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59