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 informazioni su cosa fare in merito ai cookie interessati, consulta Prepararsi alla fine 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 relativo a 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 ulteriori informazioni 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.

Elenco di elementi da ignorare migliorato

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.

Le eccezioni ora interrompono l'esecuzione se rilevate o trasmesse tramite 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 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, Debugger cerca i gestori di rifiuto nelle promesse. A partire da questa versione, il debugger non prevede più che Promise.finally() catturi un'eccezione, in modo simile a come il blocco try...finally 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. Ora i framework e i bundler 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, consulta:

• 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 questa rete di destinazione tramite chrome://inspect/#devices.

Guarda il video per vedere come si attiva la modalità di immissione.

Problema relativo a 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 controllato. 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.
• Ridimensiona la colonna del nome per visualizzare i nomi completi delle animazioni.

Problemi di Chromium: 1492460, 1489721.

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

L'esperimento Mostra avviso relativo a Self-XSS quando si incolla 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 e incolla, l'avviso non verrà più visualizzato.

Problema di Chromium: 345205.

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

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 relativo a Chromium: 1445175.

Il nuovo badge multimediale 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 delle pagine quasi istantaneo in base a regole di speculazione che definisci per consentire al tuo sito web di prerenderizzare e precaricare la maggior parte delle pagine visitate.

Problema di Chromium: 1478888.

Lighthouse 11.2.0

Nel riquadro Lighthouse ora è in esecuzione 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 presenta i seguenti miglioramenti all'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 relativi a 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 del testo parziale nei messaggi (1487449).
  • È stato risolto lo sfarfallio del menu a discesa di 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 è ora rimossa a causa del basso utilizzo dopo la snellimento degli override (1473681).

Scaricare i canali in 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 gli 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.