Novità di DevTools (Chrome 120)

Eliminazione graduale dei cookie di terze parti

Il tuo sito potrebbe utilizzare cookie di terze parti ed è il momento di intervenire in vista del loro ritiro. Per scoprire cosa fare con i cookie interessati, consulta Prepararsi alla fine dei cookie di terze parti.

La casella di controllo Include 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 dalla graduale eliminazione dei cookie di terze parti. Puoi deselezionare la casella di controllo in qualsiasi momento per non visualizzare più questi problemi.

Problema di Chromium: 1466310.

Analizza 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 come 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 sola scheda per un'analisi ottimale.
3. Apri DevTools e vai al riquadro Privacy Sandbox. Questo pannello potrebbe essere nascosto dietro il pulsante a discesa nella parte superiore.
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:

• How To del PSAT.
• Per prevedere cosa accadrà probabilmente una volta entrato in vigore il ritiro, configura un ambiente di valutazione.
• Per identificare gli aspetti da modificare, consulta Azioni di analisi generali.
• 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 avanzato

Pattern di esclusione predefinito per node_modules

Questa versione consente di utilizzare l'espressione regolare predefinita come regola di esclusione personalizzata in Impostazioni > Elenco Ignora. Per aiutarti a concentrarti solo sul tuo codice, il debugger ora ignora 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 se 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:

• Eccezioni rilevate nei frame non ignorati nello stack di chiamate.
• Eccezioni rilevate che passano attraverso frame non ignorati nello stack di chiamate. Ad esempio, vedi 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 Sospendi in caso di eccezioni rilevate .
2. Nella pagina, nella sezione "Rilevati" dell'elenco di scenari, fai clic sui diversi pulsanti e vedi l'esecuzione in pausa nei casi menzionati.

Per mettere in pausa l'esecuzione in caso di eccezioni rilevate e/o non rilevate (se selezionato) nelle chiamate asincrone, il debugger cerca i gestori di rifiuto nelle promesse. A partire da questa versione, il debugger non prevede più che Promise.finally() intercetti un'eccezione, in modo simile a come il blocco try...finally non ne intercetta alcuna.

Problemi di Chromium: 1489312, 1291064.

x_google_ignoreList rinominato in ignoreList nelle mappe di origine

La specifica delle mappe delle origini ha adottato il campo ignoreList anziché x_google_ignoreList e ora DevTools supporta il nuovo nome con un fallback per quello precedente. Framework e 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é di quello di cui è stato eseguito il deployment con le mappe di origine

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

Ora puoi alternare l'input tramite tocco e mouse durante il debug di una scheda Chrome da remoto. Ad esempio, quando esegui un'istanza di Chrome con --remote-debugging-port=<port> e ti connetti a questa destinazione di rete tramite chrome://inspect/#devices.

Guarda il video per vedere l'alternanza della modalità di inserimento in azione.

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.

Policy di sicurezza dei contenuti effettiva nel riquadro Applicazione

Ora puoi visualizzare i dettagli del Content Security Policy (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 corso, altrimenti si interrompe. In precedenza, dovevi trascinarlo.
• Ridimensiona la colonna del nome per visualizzare i nomi completi delle animazioni.

Problemi di Chromium: 1492460, 1489721.

Finestra di dialogo "Ritieni attendibile questo codice?" in Origini e avviso di self-XSS in Console

L'esperimento Mostra avviso relativo a Self-XSS quando viene incollato il codice è stato attivato per impostazione predefinita. Il self-XSS (self cross-site scripting) è un attacco che 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 tenti di incollare il codice, ora il riquadro Sources mostra la finestra di dialogo Ti fidi di questo codice? e la console mostra un avviso simile. Incolla solo il codice che comprendi e che hai esaminato. Per incollare, digita allow pasting quando richiesto. Una volta consentito l'incolla, l'avviso non verrà più mostrato.

Problema di Chromium: 345205.

Punti di interruzione listener di eventi in web worker e worklet

Quando imposti un punto di interruzione degli eventi in Sources > Event Listener Breakpoints, oltre a mettere in pausa questo evento sul tuo sito web, il Debugger ora si mette in pausa anche quando l'evento corrispondente si verifica in un web worker o in un worklet di qualsiasi tipo, incluso il worklet Shared Storage.

Problema di Chromium: 1445175.

Il nuovo badge dei media per <audio> e <video>

Ora puoi attivare il nuovo badge dei contenuti multimediali per gli elementi <audio> e <video> nel riquadro Elementi. Quando 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 desidera 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 Caricamenti speculativi. Il caricamento speculativo consente un caricamento della pagina quasi istantaneo in base a regole di speculazione che puoi definire per il tuo sito web per il prerendering e il prefetching delle pagine più visitate.

Problema di Chromium: 1478888.

Lighthouse 11.2.0

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

Questo aggiornamento include una revisione della categoria Prestazioni. Gli approfondimenti sul rendimento ora vengono valutati e classificati in base alla priorità in base al loro 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 scoprire 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à:

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

Problemi di Chromium: 1488645, 1484918.

Punti salienti vari

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

• Rendimento: è stato corretto l'indicatore LCP a volte mancante nella registrazione (1487136).
• Caricamenti speculativi: sono stati corretti gli URL completi per i target nel menu a discesa nel pannello 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 risolto lo sfarfallio del menu a discesa del completamento automatico (1487453).
  • Parentesi supportate nei percorsi dello stack e negli URL nelle analisi dello stack (1473926).
• Origini: è stata aggiunta l'evidenziazione della sintassi della parola chiave TypeScript using (1490515).
• Il menu Apertura rapida ora mostra i metodi privati (1492957).
• Applicazione > Servizi in background: ora la barra delle azioni superiore esegue il wrapping del testo durante il ridimensionamento (1487276).
• Elementi > Stili:
  • È stata corretta la risoluzione delle variabili CSS ereditate per gli elementi con slot (1492162).
  • Quando si disattiva una proprietà CSS, i relativi commenti vengono ora rimossi per correggere gli errori di sintassi (1101224).
• Rete: la colonna Priorità ora mostra una descrizione comando con informazioni sulla priorità iniziale (la stessa mostrata quando è selezionata l'opzione Righe di richieste di grandi dimensioni) (1495735).
• Deprecazioni:
  • L'impostazione Formato colore è stata disattivata nelle versioni precedenti e ora è stata rimossa.
  • L'opzione Elimina tutte le sostituzioni in Origini è stata rimossa a causa del basso utilizzo dopo la semplificazione delle sostituzioni (1473681).

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 funzionalità più recenti di DevTools, testare le API della piattaforma web all'avanguardia e trovare problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità, degli aggiornamenti o di qualsiasi altro argomento relativo a DevTools.

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

Novità di DevTools

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