Novità di DevTools (Chrome 120)

Ritiro dei cookie di terze parti

Il tuo sito potrebbe utilizzare cookie di terze parti ed è giunto il momento di intervenire in vista del loro ritiro. Per scoprire cosa fare in merito ai cookie interessati, consulta l'articolo Prepararsi al ritiro dei cookie di terze parti.

La casella di controllo Includi problemi di cookie di terze parti è stata attivata per impostazione predefinita per tutti gli utenti di Chrome, pertanto la scheda Problemi ora ti avvisa dei cookie che saranno interessati dal ritiro e dall'eliminazione graduale dei cookie di terze parti. Puoi deselezionare la casella di controllo in qualsiasi momento per non visualizzare più questi problemi.

Problema di Chromium: 1466310.

Analizzare i cookie del tuo sito web con Privacy Sandbox Analysis Tool

L'estensione Privacy Sandbox Analysis Tool per DevTools è in fase di sviluppo attivo con l'ultima versione pre-release 0.3.2. Lo strumento ti consente di capire in che modo il tuo sito web utilizza i cookie e fornisce indicazioni sulle nuove API di Chrome che tutelano la privacy.

Per analizzare i cookie:

1. Installa l'estensione in Chrome.
2. Apri il tuo sito web in una singola scheda per un'analisi ottimale.
3. Apri DevTools e vai al riquadro Privacy Sandbox. Questo riquadro potrebbe essere nascosto dietro il pulsante del menu a discesa in alto.
4. Apri la sezione Cookie e fai clic su Analizza questa scheda. Se lo strumento non ha trovato cookie, prova a ricaricare la pagina.

Per saperne di più su come utilizzare Privacy Sandbox Analysis Tool (PSAT), consulta quanto segue:

• Istruzioni del PSAT.
• Per prevedere cosa potrebbe succedere quando il ritiro entrerà in vigore, configura un ambiente di valutazione.
• Per identificare gli aspetti interessati, consulta Azioni di analisi generale.
• Per scoprire come analizzare scenari comuni, tra cui analisi, e-commerce, servizi SSO, contenuti incorporati e altro ancora, consulta gli esempi di demo in Scenari di analisi.

Inoltre, consulta le indicazioni su come segnalare i problemi.

Scheda ignora avanzata

Pattern di esclusione predefinito per node_modules

Questa versione attiva l'espressione regolare predefinita come regola di esclusione personalizzata in Impostazioni > Elenco ignora. Per aiutarti a concentrarti solo sul tuo codice, il Debugger ora salta gli script di /node_modules/ e /bower_components/ per impostazione predefinita. Puoi disattivare questa regola in qualsiasi momento nelle impostazioni.

Problema di Chromium: 1496301.

Ora le eccezioni interrompono l'esecuzione se vengono rilevate o passano attraverso codice non ignorato

Quando esegui il debug del codice con l'opzione Metti in pausa sulle eccezioni rilevate selezionata, il Debugger ora interrompe l'esecuzione sulle seguenti eccezioni rilevate, sia sincrone che asincrone:

• Eccezione rilevata nei frame non ignorati nello stack di chiamate.
• Sono state rilevate eccezioni che passano attraverso frame non ignorati nello stack di chiamate. Ad esempio, guarda lo screenshot.

Per testare questo comportamento, apri questa pagina di demo:

1. Apri DevTools > Origini, aggiungi la cartella hidden all'elenco di elementi da ignorare e seleziona Metti in pausa in caso di eccezioni rilevate.
2. Nella pagina, fai clic sui diversi pulsanti sotto l'elenco di scenari "Risultato" per vedere l'esecuzione in pausa nei casi indicati.

Per mettere in pausa l'esecuzione in caso di eccezioni rilevate e/o non rilevate (se selezionate) nelle chiamate asincrone, il Debugger cerca gestori di rifiuto nelle promesse. A partire da questa versione, il debugger non prevede più che Promise.finally() catturi un'eccezione, in modo simile al blocco try...finally che non ne cattura nessuna.

Problemi di Chromium: 1489312, 1291064.

x_google_ignoreList rinominato in ignoreList nelle mappe di origine

La specifica delle mappe di origine ha adottato il campo ignoreList anziché x_google_ignoreList e ora DevTools supporta il nuovo nome con un valore alternativo per quello precedente. I framework e i bundler ora possono utilizzare il nuovo nome del campo.

Le mappe di origine ti consentono di eseguire il debug del codice che hai scritto anziché del codice minimizzato pubblicato dal tuo sito web.

Per ulteriori informazioni sulle mappe di origine, vedi:

• Che cosa sono le mappe di origine
• Eseguire il debug del codice originale anziché del codice di cui è stato eseguito il deployment con le mappe di origine

Nuovo pulsante di attivazione/disattivazione della modalità di immissione durante il debug remoto

Ora puoi passare dall'input tocco a quello del mouse e viceversa quando esegui il debug di una scheda di Chrome da remoto. Ad esempio, quando esegui un'istanza di Chrome con --remote-debugging-port=<port> e ti connetti a questo target di rete tramite chrome://inspect/#devices.

Guarda il video per vedere in azione il passaggio dalla modalità di inserimento numerico a quella alfanumerica.

Problema di Chromium: 1410433.

Il riquadro Elementi ora mostra gli URL per i nodi #document

Per semplificare il debug degli iframe, il riquadro Elementi ora mostra documentURL accanto ai nodi #document.

Problema di Chromium: 1376976.

Criteri di sicurezza dei contenuti efficaci nel riquadro Applicazione

Ora puoi visualizzare i dettagli del Criterio di sicurezza del contenuto (CSP) di un frame ispezionato. Per visualizzare i dettagli, vai a Applicazione > Frame, seleziona un frame e scorri verso il basso fino alla sezione Content Security Policy (CSP).

Problema di Chromium: 1424714.

Debug delle animazioni migliorato

Nella scheda Animazioni ora puoi:

• Fai clic in un punto qualsiasi dell'intestazione della sequenza temporale per impostare la testina di riproduzione. L'animazione continua a essere riprodotta se era già in riproduzione e si interrompe altrimenti. In precedenza, dovevi trascinarlo.
• Modifica le dimensioni della colonna dei nomi per visualizzare i nomi completi delle animazioni.

Problemi di Chromium: 1492460, 1489721.

Dialogo "Ritieni attendibile questo codice?" in Origini e avviso di XSS autonomo nella console

L'esperimento Mostra avviso relativo a Self-XSS quando incolli il codice è stato attivato per impostazione predefinita. L'attacco di tipo Self-XSS (cross-site scripting autonomo) ti induce a incollare codice dannoso in DevTools e consente a un malintenzionato di ottenere il controllo dei tuoi account web e delle tue informazioni personali.

Se sei un nuovo utente di DevTools e provi a incollare del codice, nel riquadro Origini viene ora visualizzata la finestra di dialogo Rivedi questo codice? e nella Console viene visualizzato un avviso simile. Incolla solo il codice che comprendi e che hai esaminato. Per incollare, digita allow pasting quando richiesto. Una volta consentito il copia-incolla, l'avviso non verrà più visualizzato.

Problema di Chromium: 345205.

Punti di interruzione dei listener di eventi in web worker e worklet

Quando imposti un punto di interruzione per evento in Origini > Punti di interruzione per ascoltatori di eventi, oltre a mettere in pausa questo evento sul tuo sito web, il Debugger ora si mette in pausa anche quando si verifica l'evento corrispondente in un worker web o un worklet di qualsiasi tipo, incluso il worklet di archiviazione condivisa.

Problema di Chromium: 1445175.

Il nuovo badge per i contenuti multimediali per <audio> e <video>

Ora puoi attivare il nuovo badge multimediale per gli elementi <audio> e <video> nel riquadro Elementi. Se fai clic sul badge, viene visualizzato il riquadro Media, in modo da poter eseguire il debug di questi elementi.

Questa funzionalità è in fase di sviluppo e verrà ulteriormente migliorata. Il team di DevTools vuole esprimere la propria gratitudine a Junseo (Jeremy) Yoo per aver implementato questo miglioramento.

Problema di Chromium: 1448214.

Il precaricamento è stato rinominato in Caricamento speculativo

Per evitare un uso eccessivo del termine precedente e riflettere meglio il comportamento, Applicazione > Precaricamento è stato rinominato in Carichi speculativi. Il caricamento speculativo consente un caricamento quasi istantaneo delle pagine in base a regole di speculazione che puoi definire per il tuo sito web in modo che pre-esegui il rendering e il prefetch della maggior parte delle pagine visitate.

Problema di Chromium: 1478888.

Lighthouse 11.2.0

Il pannello Lighthouse ora esegue Lighthouse 11.2.0. Consulta l'elenco completo delle modifiche.

Questo aggiornamento include una revisione della categoria Rendimento. Ora gli approfondimenti sul rendimento vengono valutati e assegnati in base all'impatto stimato sulle metriche sul rendimento. Inoltre, l'indicatore del punteggio di rendimento include informazioni più dettagliate su come ogni metrica influisce sul punteggio.

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

Problemi di Chromium: 772558.

Miglioramenti all'accessibilità

Questa versione include i seguenti miglioramenti dell'accessibilità:

• Ora gli screen reader annunciano lo stato (selezionato o deselezionato) delle caselle di controllo in Origini > Punti di interruzione.
• Ora puoi accedere al menu a discesa Nascondi problemi simili a questo con la tastiera.

Problemi di Chromium: 1488645, 1484918.

Altri punti salienti

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

• Rendimento: è stato corretto l'indicatore LCP a volte mancante nella registrazione (1487136).
• Caricamenti speculativi: sono stati corretti gli URL completi per le destinazioni nel menu a discesa del riquadro Rete (1471020).
• Copertura:
  • È stata corretta la copertura riga per riga per il codice stampato in modo leggibile (1464974).
  • Le informazioni sulla copertura ora vengono aggiornate al ricaricamento della pagina (1494457).
• Console:
  • È stata corretta la selezione parziale del testo nei messaggi (1487449).
  • È stato corretto il tremolio del menu a discesa del completamento automatico (1487453).
  • Parentesi supportate nei percorsi dello stack e negli URL nelle tracce dello stack (1473926).
• Origini: è stato supportato l'evidenziazione della sintassi della parola chiave using di TypeScript (1490515).
• Il menu Apri rapidamente ora mostra i metodi privati (1492957).
• Applicazione > Servizi in background: la barra di azioni superiore ora inserisce un a capo nel testo quando viene modificato il ridimensionamento (1487276).
• Elementi > Stili:
  • È stata corretta la risoluzione delle variabili CSS ereditate per gli elementi con slot (1492162).
  • Quando viene disattivata una proprietà CSS, i relativi commenti vengono rimossi per correggere le interruzioni di sintassi (1101224).
• Rete: la colonna Priorità ora mostra una descrizione comando con informazioni sulla priorità iniziale (la stessa viene mostrata quando è selezionata l'opzione Righe di richieste di grandi dimensioni) (1495735).
• Ritiro:
  • L'impostazione Formato colore è stata disattivata nelle versioni precedenti ed è stata rimossa.
  • L'opzione Elimina tutti gli override in Origini è stata rimossa a causa del ridotto utilizzo dopo la semplificazione degli override (1473681).

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.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema DevTools in DevTools.
• Invia un tweet all'account @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti per DevTools.

Novità di DevTools

Un elenco di tutto ciò che è stato trattato nella serie Novità di DevTools.