Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di DevTools (Chrome 99)

Jecelyn Yeen

Limitazione delle richieste WebSocket

Il riquadro Rete ora supporta la limitazione delle richieste web Socket. In precedenza, la limitazione della rete non funzionava per le richieste socket web.

Apri il riquadro Rete, fai clic su una richiesta Web Socket e apri la scheda Messaggi per osservare i trasferimenti di messaggi. Seleziona 3G lenta per limitare la velocità.

Limitazione delle richieste WebSocket

Problema di Chromium: 423246

Nuova API di reporting nel riquadro Applicazione

Utilizza il nuovo riquadro API di reporting per monitorare i report generati nella pagina e il relativo stato.

L'API di reporting è progettata per aiutarti a monitorare le violazioni della sicurezza della pagina, le chiamate API ritirate e altro ancora.

Apri una pagina che utilizza l'API di reporting, ad esempio pagina demo. Nel riquadro Applicazione, scorri verso il basso fino alla sezione Servizi in background e seleziona il riquadro API di reporting.

La sezione Report mostra un elenco dei report generati nella tua pagina e il relativo stato. Fai clic sul report per visualizzarne i dettagli.

La sezione Endpoint offre una panoramica di tutti gli endpoint configurati nell'intestazione Reporting-Endpoints.

Riquadro dell'API di reporting

Problema di Chromium: 1205856

Supporto "Attendi che l'elemento sia visibile/selezionabile nel riquadro Registratore"

Durante la riproduzione di una registrazione del flusso utente, il riquadro Registratore attende che l'elemento diventi visibile o cliccabile nell'area visibile oppure prova a far scorrere automaticamente l'elemento all'interno dell'area visibile prima di ripetere il passaggio. In precedenza, la riproduzione non andava a buon fine immediatamente.

Ecco un esempio di menu fuori schermo posizionato al di fuori dell'area visibile e scorrimento all'interno quando attivato. La procedura prevede di attivare/disattivare il menu e fare clic sulla voce di menu. In precedenza, la riproduzione non andava a buon fine nell'ultimo passaggio, perché la voce di menu continua a scorrere e non è ancora visibile nell'area visibile. Il problema è stato risolto.

Problema di Chromium: 1257499

Miglioramento dello stile, della formattazione e dei filtri nella console

Applica lo stile corretto ai messaggi di log con codice di escape ANSI

Ora puoi utilizzare le sequenze di escape ANSI per definire correttamente i messaggi della console. In precedenza, la console DevTools aveva un supporto molto limitato (e parzialmente non funzionante) per le sequenze di escape ANSI.

È comune per gli sviluppatori Node.js colorare i messaggi di log tramite sequenze di escape ANSI, spesso con l'aiuto di alcune librerie di stili come gesso, colors, ansi-colors, kleur e così via.

Grazie a queste modifiche, ora puoi eseguire senza problemi il debug delle tue applicazioni Node.js utilizzando DevTools, con messaggi della console colorati corretti. Apri questa demo per vederla autonomamente.

Per scoprire di più su come formattare e definire lo stile dei messaggi nella console con DevTools, leggi l'articolo Formattare e applicare stili ai messaggi nella documentazione della console.

personalizzazione della console

Problemi di Chromium: 1282837, 1282076

Supporto corretto degli identificatori di formato `%s`, `%d`, `%i` e `%f`

La console ora esegue correttamente le conversioni di tipo %s, %d, %i e %f come specificato nella sezione Standard della console. In precedenza, il risultato della conversazione non era coerente.

supporto degli identificatori di formato in Console Messenger

Problemi di Chromium: 1277944, 1282076

Filtro dei gruppi della console più intuitivo

Quando filtri il messaggio della console, ora viene visualizzato un messaggio della console se il contenuto del messaggio corrisponde al filtro o il titolo del gruppo (o del gruppo di predecessori) corrisponde al filtro. In precedenza, il titolo del gruppo di console veniva visualizzato nonostante il filtro.

Inoltre, se viene mostrato un messaggio della console, viene visualizzato anche il gruppo (o il gruppo predecesso) a cui appartiene.

filtro gruppo console

Problema di Chromium: 1068788

Miglioramenti alle mappe di origine

Esegui il debug dell'estensione di Chrome con i file delle mappe di origine

Ora puoi eseguire il debug dell'estensione di Chrome con i file mappa di origine. In precedenza, DevTools supportava solo la mappa di origine in linea per il debug delle estensioni di Chrome.

Esegui il debug dell'estensione di Chrome con i file delle mappe di origine

Problema di Chromium: 212374

Albero delle cartelle di origine migliorato nel riquadro Origini

La struttura ad albero delle cartelle di origine nel riquadro Origini è stata migliorata, riducendo il disordine nelle strutture e nella denominazione delle cartelle (ad es. "../", "./" e così via). In fin dei conti, questo è il risultato della normalizzazione degli URL di origine assoluti nelle mappe di origine.

Albero delle cartelle di origine migliorato nel riquadro Origini

Problema di Chromium: 1284737

Visualizza i file di origine worker nel riquadro Origini

I file di origine Worker (ad es. web worker, service worker) con SourceURL relativo vengono ora visualizzati nel riquadro Source (Origine). In precedenza, i file di origine worker non venivano gestiti correttamente.

ALT_TEXT_HERE

Problema di Chromium: 1277002

Aggiornamenti del tema scuro automatico di Chrome

L'interfaccia utente per l'emulazione automatica del tema scuro è ora semplificata. Ora è una casella di controllo, in precedenza era un menu a discesa.

Inoltre, quando il Tema scuro automatico è attivato, il menu a discesa Emula prefers-color-scheme viene disattivato e impostato automaticamente su prefers-color-scheme: dark.

In Chrome 96 viene introdotta una prova dell'origine per il tema scuro automatico su Android. Con questa funzionalità, il browser applica un tema scuro generato automaticamente ai siti con tema chiaro, quando l'utente ha attivato i temi scuri nel sistema operativo.

Emulazione del tema scuro automatico

Problema di Chromium: 1243309

Selettore colori e riquadro diviso

Ora puoi selezionare il colore e ridimensionare il riquadro a scomparsa in DevTools con le dita o lo stilo sui dispositivi touchscreen.

Ecco un esempio acquisito con il touchscreen del dispositivo Google Pixelbook.

Problemi di Chromium: 1284245, 1284995

Varie in evidenza

Di seguito sono riportate alcune correzioni importanti di questa release:

Risolto il problema di modifica dei cookie nel riquadro Cookie. (1290196)
Utilizza Shift + Tab per selezionare il comando precedente nel menu Comando. (1278743)
Segnala i problemi relativi alle richieste preflight CORS nella scheda Problemi. (1272445).
Segnala i problemi relativi ai client client hint dello user agent nella scheda Problemi. (1219359).
Sono stati corretti i comportamenti Shift + Delete e Page up / Page down nel riquadro Origini e nella console. (1278461, 1285662)
Chiudi la finestra di dialogo di modifica dei punti di interruzione alla rimozione dei punti di interruzione nel riquadro Origini. (922513)
Non è necessario ricaricare il tema quando passi da un tema chiaro a uno scuro in DevTools. (1278738)

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.