Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di DevTools (Chrome 120)

Sofia Emelianova

Eliminazione graduale dei cookie di terze parti

Il tuo sito potrebbe utilizzare cookie di terze parti ed è giunto il momento di intervenire mentre ci avviciniamo al ritiro. Per scoprire cosa fare con i cookie interessati, leggi l'articolo Prepararsi alla fine dei cookie di terze parti.

La casella di controllo Includi problemi relativi ai 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 dall'imminente ritiro e dall'eliminazione graduale dei cookie di terze parti. Puoi deselezionare la casella di controllo in qualsiasi momento per non vedere più questi problemi.

Un avviso sull'imminente ritiro dei cookie di terze parti nella scheda Problemi.

Problema di Chromium: 1466310.

Analizzare i cookie del tuo sito web con lo strumento di analisi di Privacy Sandbox

L'estensione Strumento di analisi Privacy Sandbox per DevTools è in fase di sviluppo attivo con l'ultima versione pre-release, la 0.3.2. Questo strumento ti consente di capire in che modo il tuo sito web utilizza i cookie e fornisce indicazioni sulle nuove API di Chrome incentrate sulla tutela della privacy.

Per analizzare i cookie:

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

Lo strumento di analisi di Privacy Sandbox.

Per saperne di più su come utilizzare lo strumento di analisi di Privacy Sandbox (PSAT), consulta quanto segue:

Istruzioni di PSAT.
Per prevedere cosa potrebbe accadere una volta che il ritiro avrà effetto, configura un ambiente di valutazione.
Per identificare gli aspetti interessati, consulta Azioni generali di analisi.
Per scoprire come analizzare scenari comuni, inclusi analisi, e-commerce, servizi SSO, contenuti incorporati e altro ancora, guarda gli esempi demo in Scenari di analisi.

Inoltre, consulta le indicazioni relative ai problemi relativi ai report.

Scheda Ignora migliorata

Pattern di esclusione predefinito per `node_modules`

Questa versione attiva l'espressione regolare predefinita come regola di esclusione personalizzata in Impostazioni > Elenco di ignorare. Per consentirti di concentrarti solo sul codice, per impostazione predefinita il Debugger ignorerà gli script di /node_modules/ e /bower_components/. Puoi disattivare questa regola in qualsiasi momento dalle impostazioni.

Prima e dopo l'aggiunta di un'espressione regolare.

Problema di Chromium: 1496301.

Ora le eccezioni interrompono l'esecuzione se vengono rilevate o passano attraverso un 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 delle seguenti eccezioni rilevate, sia sincrone che asincrone:

Eccezioni rilevate 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.

Metti in pausa su un'eccezione rilevata che ha trasmesso attraverso un codice non ignorato.

Per testare questo comportamento, apri questa pagina demo:

Apri DevTools > Origini, aggiungi la cartella hidden all'elenco di elementi da ignorare e seleziona Metti in pausa in caso di eccezioni rilevate.
Nella pagina, nell'elenco degli scenari "Rilevati", fai clic sui diversi pulsanti e osserva l'esecuzione in pausa nei casi menzionati.

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

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 DevTools ora supporta il nuovo nome con una riserva per quello precedente. Framework e bundler possono ora 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:

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

Ora puoi spostarti tra l'input del tocco e del mouse durante 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 funziona l'attivazione della modalità di immissione.

Problema di Chromium: 1410433.

Il riquadro Elementi ora mostra gli URL di `#document` nodi

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

Il prima e il dopo mostra documentURL accanto al nodo #document.

Problema di Chromium: 1376976.

Criterio di sicurezza del contenuto effettivo nel riquadro Applicazione

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

La sezione Criteri di sicurezza del contenuto nella scheda Applicazione.

Problema di Chromium: 1424714.

Debug dell'animazione migliorato

Nella scheda Animazioni ora puoi:

Fai clic in un punto qualsiasi dell'intestazione della sequenza temporale per impostare la testina di riproduzione. La riproduzione dell'animazione continua se era già in corso e si interrompe in caso contrario. In precedenza, dovevi trascinare l'immagine.
Ridimensiona la colonna del nome per visualizzare i nomi completi dell'animazione.

Problemi di Chromium: 1492460, 1489721.

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

L' esperimento di avviso relativo a Self-XSS quando viene incollato il codice è stato attivato per impostazione predefinita. Self-XSS (self-cross-site scripting) è un attacco che ti induce a incollare del codice dannoso in DevTools e consente a un aggressore di acquisire il controllo dei tuoi account web e delle tue informazioni personali.

Se sei un nuovo utente DevTools e cerchi di incollare del codice, nel riquadro Origini viene ora visualizzata la finestra di dialogo Ritieni attendibile questo codice? e la Console ora mostra un avviso simile. Incolla solo il codice che comprendi e che hai controllato. Per incollare, digita allow pasting quando ti viene richiesto. Dopo aver consentito di incollare una volta, l'avviso non verrà mai più mostrato.

La finestra di dialogo "Ritieni attendibile questo codice?" quando incolli il codice nelle origini.

Problema di Chromium: 345205.

Punti di interruzione del listener di eventi nei web worker e nei worklet

Quando imposti un punto di interruzione dell'evento in Origini > Punti di interruzione listener di eventi, oltre a mettere in pausa questo evento sul tuo sito web, ora Debugger viene messo in pausa anche quando l'evento corrispondente si verifica in un web worker o worklet di qualsiasi tipo, incluso il worklet dello spazio di archiviazione condiviso.

Il debugger è stato messo in pausa quando un service worker chiama la funzione di impostazione del timeout.

Problema di 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. Quando fai clic sul badge, si apre il riquadro Contenuti multimediali, dove puoi eseguire il debug di questi elementi.

Questa funzionalità è in fase di sviluppo e verrà migliorata ulteriormente. Il team di DevTools desidera ringraziare Junseo (Jeremy) Yoo per aver apportato questo miglioramento.

Problema di Chromium: 1448214.

Precaricamento rinominato in caricamento speculativo

Per evitare un uso eccessivo del termine precedente e rispecchiare meglio il comportamento, Applicazione > Precaricamento è stata rinominata in Caricamenti speculativi. Il caricamento speculativo consente un caricamento delle pagine quasi istantaneo in base a regole di speculazione che puoi definire per il tuo sito web di prerenderizzare e precaricare la maggior parte delle pagine visitate.

Il prima e il dopo aver rinominato il precaricamento in caricamento speculativo.

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 di rendimento. Gli approfondimenti sul rendimento ricevono ora un punteggio e una priorità in base al loro impatto stimato sulle metriche sul rendimento. Inoltre, l'indicatore del punteggio delle prestazioni include informazioni più dettagliate su come ogni metrica influisce sul punteggio.

La revisione delle prestazioni "prima e dopo".

Per apprendere 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 annunceranno lo stato (selezionato o deselezionato) delle caselle di controllo in Origini > Punti di interruzione.
Ora puoi accedere al menu a discesa Nascondi problemi come questo con la tastiera.

Problemi di Chromium: 1488645, 1484918.

Varie in evidenza

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

Prestazioni: è 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 riquadro Rete (1471020).
Copertura:
- Copertura riga per riga fissa per il codice stampato (1464974).
- Le informazioni sulla copertura ora vengono aggiornate al ricaricamento della pagina (1494457).
Console:
- Correzione della selezione del testo parziale 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).
Fonti: è supportata l'evidenziazione della sintassi della parola chiave using di TypeScript (1490515).
Il menu Apertura rapida ora mostra i metodi privati (1492957).
Applicazione > Servizi in background: la barra delle azioni in alto ora aggrega il testo durante il ridimensionamento (1487276).
Elementi > Stili:
- È stata corretta la risoluzione delle variabili CSS ereditate per gli elementi inseriti in aree annuncio (1492162).
- Quando disattivi una proprietà CSS, i relativi commenti vengono ora 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 richiesta richiesta) (1495735).
Deprecazioni:
- L'impostazione Formato colore è stata disabilitata nelle versioni precedenti e ora è stata rimossa.
- L'opzione Elimina tutti gli override in Origini è stata rimossa a causa dello scarso utilizzo in seguito alla s semplificazione degli override (1473681).

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