Novità di DevTools (Chrome 99)

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 Network (Rete), fai clic su una richiesta socket web e apri la scheda Messaggi per osservare i trasferimenti dei messaggi. Seleziona 3G lento per limitare la velocità.

Problema relativo a Chromium: 423246

Riquadro 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 di sicurezza della tua pagina, le chiamate API ritirate e altro ancora.

Apri una pagina che utilizza l'API di reporting (ad es. 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 visualizzare i dettagli del report.

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

Problema relativo a Chromium: 1205856

Il supporto attende fino a quando l'elemento non è visibile/cliccabile nel riquadro Registratore

Quando riproduci di nuovo la registrazione del flusso utente, il riquadro Registratore attenderà che l'elemento diventi visibile o cliccabile nell'area visibile oppure tenterà di far scorrere automaticamente l'elemento nell'area visibile prima di ripetere il passaggio. In precedenza, la riproduzione non riusciva immediatamente.

Ecco un esempio di un menu fuori schermo posizionato all'esterno dell'area visibile e che viene inserito quando viene attivato. La procedura consiste nell'attivare/disattivare il menu e fare clic sulla voce di menu. In precedenza, la riproduzione non riusciva nell'ultimo passaggio, perché la voce di menu scorre ancora e non è ancora visibile nell'area visibile. Il problema è stato risolto.

Problema relativo a Chromium: 1257499

Miglioramento dello stile, della formattazione e dei filtri nella console

Formattare correttamente i messaggi di log con codice di escape ANSI

Ora puoi utilizzare le sequenze di escape ANSI per definire lo stile corretto dei messaggi della console. In precedenza, la console DevTools aveva un supporto molto limitato (e parzialmente interrotto) per le sequenze di escape ANSI.

Di solito gli sviluppatori Node.js colorano i messaggi di log tramite sequenze di escape ANSI, spesso con l'aiuto di alcune librerie di stili come chalk, colors, ansi-colors, kleur e così via.

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

Per scoprire di più sulla formattazione e Per i messaggi della console per gli stili con DevTools, vai ai messaggi di formattazione e stile nella documentazione della console.

Problemi relativi a Chromium: 1282837, 1282076

Supporta correttamente gli indicatori di formato %s, %d, %i e %f

La console ora esegue correttamente le conversioni dei tipi %s, %d, %i e %f come specificato nella console standard. In precedenza, il risultato della conversazione era incoerente.

Problemi relativi a Chromium: 1277944, 1282076

Filtro di gruppo di 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, ora viene mostrato anche il gruppo (o il gruppo predecessore) a cui appartiene.

Problema relativo a 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 delle mappe di origine. In precedenza, DevTools supportava solo la mappa di origine in linea per il debug delle estensioni di Chrome.

Problema relativo a Chromium: 212374

Struttura delle cartelle di origine migliorata nel riquadro Origini

La struttura delle cartelle di origine nel riquadro Origini ora è stata migliorata e presenta meno disordine nella struttura e nella denominazione delle cartelle (ad es. "../", "./" e così via). Di fondo, questo è il risultato della normalizzazione degli URL di origine assoluti nelle mappe di origine.

Problema relativo a Chromium: 1284737

Visualizza i file di origine dei worker nel riquadro Origini

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

Problema relativo a Chromium: 1277002

Aggiornamenti automatici del tema scuro di Chrome

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

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

Chrome 96 introduce 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 questi temi nel sistema operativo.

Problema relativo a Chromium: 1243309

Selettore colori touch-screen e riquadro diviso

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

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

Problemi relativi a Chromium: 1284245, 1284995

Varie in evidenza

Di seguito sono riportate alcune importanti correzioni di questa release:

• È stato risolto il problema di modifica dei cookie nel riquadro Cookie. (1290196)
• Utilizza Shift + Tab per selezionare il comando precedente nel menu comandi. (1278743)
• Segnala i problemi relativi alle richieste preflight CORS nella scheda Problemi. (1272445).
• Segnala i problemi relativi ai client hint dello user agent nella scheda Problemi. (1219359).
• Sono stati risolti i comportamenti Shift + Delete e Page up / Page down nel riquadro Origini e Console. (1278461, 1285662)
• Chiudi la finestra di dialogo di modifica dei punti di interruzione quando rimuovi i punti di interruzione nel riquadro Origini. (922513)
• Non è necessario ricaricare il dispositivo quando si passa dal tema chiaro a quello scuro in DevTools. (1278738)

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