Novità di DevTools (Chrome 120)

Sofia Emelianova
Sofia Emelianova

Eliminazione graduale dei cookie di terze parti

Il tuo sito potrebbe utilizzare cookie di terze parti ed è il momento di intervenire man mano che ci avviciniamo al 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 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 in merito ai cookie che saranno interessati dall'imminente ritiro e eliminazione graduale dei cookie di terze parti. Per non visualizzare più questi problemi, puoi deselezionare la casella di controllo in qualsiasi momento.

Un avviso sull'imminente ritiro dei cookie di terze parti nella scheda 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 incentrate sulla tutela della 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 riquadro potrebbe essere nascosto dietro il pulsante del menu a discesa Altre schede. in alto.
  4. Apri la sezione Cookie e fai clic su Analizza questa scheda. Se lo strumento non ha trovato alcun cookie, prova a ricaricare la pagina.

Privacy Sandbox Analysis Tool.

Per ulteriori informazioni su come utilizzare Privacy Sandbox Analysis Tool (PSAT), consulta le seguenti risorse:

Inoltre, consulta le indicazioni sulla segnalazione dei problemi.

Scheda da ignorare migliorata

Pattern di esclusione predefinito per node_modules

Questa versione abilita l'espressione regolare predefinita come regola di esclusione personalizzata in Impostazioni. Impostazioni > Elenco degli utenti da ignorare. Per aiutarti a concentrarti solo sul codice, il Debugger ora ignorerà gli script di /node_modules/ e /bower_components/ per impostazione predefinita. Puoi disattivare questa regola in qualsiasi momento nelle impostazioni.

Il prima e dopo l'aggiunta di un'espressione regolare.

Problema relativo a 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 Casella di controllo. Metti in pausa in caso di eccezioni rilevate, Debugger ora interrompe l'esecuzione nelle seguenti eccezioni rilevate, sia sincrone che asincrone:

  • Eccezioni rilevate nei frame non ignorati nello stack di chiamate.
  • Rilevate eccezioni che passano attraverso frame non ignorati nello stack di chiamate. Ad esempio, guarda lo screenshot.

Metti in pausa un'eccezione rilevata che ha superato il codice non ignorato.

Per verificare questo comportamento, apri questa pagina demo:

  1. Apri DevTools > Origini, aggiungi la cartella hidden all'elenco di elementi da ignorare e seleziona Casella di controllo. Metti in pausa in caso di eccezioni rilevate.
  2. Nella pagina, sotto la sezione "Presi" dell'elenco di scenari, 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 di rifiuto nelle promesse. A partire da questa versione, il Debugger non prevede più che Promise.finally() rileverà un'eccezione, in modo simile al modo in cui il blocco try...finally non rileva alcuna eccezione.

Problemi relativi a 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 un fallback 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:

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

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

Problema relativo a 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 a 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 relativo a 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. La riproduzione dell'animazione continua se era già in corso e in caso contrario si interrompe. In precedenza, era necessario trascinarlo.
  • Ridimensiona la colonna del nome per visualizzare i nomi completi delle animazioni.

Problemi relativi a Chromium: 1492460, 1489721.

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

L'esperimento Casella di controllo. Mostra avviso sull'XSS quando si incolla il codice è stato attivato per impostazione predefinita. Self-XSS (self cross-site scripting) è un attacco che ti induce con l'inganno a incollare codice dannoso in DevTools e consente a un utente malintenzionato di ottenere il controllo dei tuoi account web e delle tue informazioni personali.

Se sei un nuovo utente di DevTools e cerchi di incollare il codice, nel riquadro Origini ora compare la finestra di dialogo Ti fidi di questo codice? e la console ora mostra un avviso simile. Incolla solo il codice che comprendi e che hai esaminato. Per incollare, digita allow pasting quando richiesto. Una volta che è stato possibile incollare una volta, l'avviso non verrà più mostrato.

Il messaggio &quot;Ti fidi di questo codice?&quot; quando si incolla il codice nelle origini.

Problema relativo a Chromium: 345205.

Punti di interruzione listener di eventi in web worker e worklet

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

Debugger in pausa quando un service worker chiama la funzione di timeout impostato.

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. Quando fai clic sul badge, viene visualizzato il riquadro Contenuti multimediali, da cui puoi eseguire il debug di questi elementi.

Attivazione del nuovo badge multimediale per i tag audio e video.

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

Problema relativo a Chromium: 1448214.

Precaricamento rinominato in caricamento speculativo

Per evitare di abusare del termine precedente e rispecchiare meglio il comportamento, Applicazione > L'opzione Precaricamento è stata rinominata Caricamenti 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.

Prima e dopo la ridenominazione del precaricamento in caricamento speculativo.

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

La revisione del rendimento 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 relativi a Chromium: 772558.

Miglioramenti all'accessibilità

Questa versione presenta i seguenti miglioramenti all'accessibilità:

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

Problemi relativi a Chromium: 1488645, 1484918.

Varie in evidenza

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

  • Prestazioni: è stato corretto l'indicatore LCP a volte mancante nella registrazione (1487136).
  • Caricamenti speculativi: corretti gli URL completi per i target nel menu a discesa nel riquadro Rete (1471020).
  • Copertura:
      .
    • Copertura corretta riga per riga per codice stampato (1464974).
    • Le informazioni sulla copertura vengono ora 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 URL nelle analisi dello stack (1473926).
  • Origini: è supportata l'evidenziazione della sintassi della parola chiave TypeScript using (1490515).
  • Il menu Apertura rapida ora mostra i metodi privati (1492957).
  • Applicazione > Servizi in background: la barra delle azioni in alto ora mette a capo il testo durante il ridimensionamento (1487276).
  • Elementi > Stili:
      .
    • È stata corretta la risoluzione delle variabili CSS ereditate per gli elementi slot (1492162).
    • Quando disattivi una proprietà CSS, i relativi commenti vengono ora eliminati per correggere le interruzioni di sintassi (1101224).
  • Rete: la colonna Priority ora mostra una descrizione comando con informazioni sulla priorità iniziale (lo stesso viene mostrato quando è selezionata l'opzione Big request rows) (1495735).
  • Deprecazioni:
    • L'impostazione Formato colore è stata disattivata nelle versioni precedenti e ora è 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

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

Contattare il team di Chrome DevTools

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

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema di DevTools utilizzando Altre opzioni   Altro > Guida > Segnala un problema di DevTools in DevTools.
  • Invia un tweet all'indirizzo @ChromeDevTools.
  • Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.

Novità di DevTools

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