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

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

Problema di Chromium: 423246

Riquadro Nuova API di reporting nel riquadro Applicazione

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

L'API Reporting è progettata per aiutarti a monitorare le violazioni della 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 fornisce una panoramica di tutti gli endpoint configurati nell'intestazione Reporting-Endpoints.

Problema di Chromium: 1205856

Supporta l'attesa fino a quando l'elemento non è visibile/cliccabile nel riquadro Registratore

Quando viene riprodotta una registrazione del flusso utente, il riquadro Registratore ora attenderà che l'elemento sia visibile o cliccabile nell'area visibile o tenterà di scorrere automaticamente l'elemento nell'area visibile prima di riprodurre il passaggio. In precedenza, la riproduzione non andava a buon fine immediatamente.

Ecco un esempio di un menu fuori schermo posizionato all'esterno dell'area visibile e che viene inserito quando viene attivato. Il flusso utente prevede di attivare/disattivare il menu e fare clic sulla voce del menu. In precedenza, la riproduzione non andava a buon fine nell'ultimo passaggio perché l'elemento del menu era ancora in scorrimento e non era ancora visibile nell'area visibile. Il problema è stato risolto.

Problema di Chromium: 1257499

Miglioramento di stile, formattazione e filtri della console

Applicare correttamente lo stile ai messaggi di log con il 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 in parte non funzionante) 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, ora puoi eseguire il debug delle applicazioni Node.js senza problemi utilizzando DevTools, con messaggi della console colorati correttamente. Apri questa demo per visualizzarla.

Per scoprire di più sulla formattazione e sullo stile dei messaggi della console con DevTools, consulta la documentazione relativa alla formattazione e allo stile dei messaggi nella console.

Problemi di Chromium: 1282837, 1282076

Supportare correttamente i parametri di formato %s, %d, %i e %f

Console ora esegue correttamente le conversioni di tipo %s, %d, %i e %f come specificato nello standard di Console. In precedenza, il risultato della conversazione non era coerente.

Problemi di Chromium: 1277944, 1282076

Filtro di gruppo di console più intuitivo

Quando filtri il messaggio della console, ora viene mostrato 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 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 di mappa sorgente. In precedenza, DevTools supportava solo le mappe sorgente in linea per il debug delle estensioni di Chrome.

Problema relativo a Chromium: 212374

Albero delle cartelle delle origini migliorato 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). Sotto il cofano, questo è il risultato della normalizzazione degli URL di origine assoluti nelle mappe di origine.

Problema di Chromium: 1284737

Visualizza i file di origine dei worker nel riquadro Origini

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

Problema di Chromium: 1277002

Aggiornamenti del tema scuro automatico di Chrome

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

Inoltre, quando il tema scuro automatico è attivo, il menu a discesa Emulare prefers-color-scheme viene 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, se l'utente ha attivato i temi scuri 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 uno 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:

• È stato risolto il problema relativo alla modifica dei cookie nel riquadro Cookie. (1290196)
• Utilizza Shift + Tab per selezionare il comando precedente nel menu comandi. (1278743)
• Segnala i problemi relativi alla richiesta di preflight CORS nella scheda Problemi. (1272445).
• Segnala i problemi relativi ai client hint dello user agent nella scheda Problemi. (1219359).
• Sono stati corretti i comportamenti di Shift + Delete e Page up / Page down nel riquadro Origini e Console. (1278461, 1285662)
• Chiudi la finestra di dialogo di modifica del punto di interruzione per la rimozione del punto di interruzione nel riquadro Origini. (922513)
• Non è necessaria la ricarica quando passi dal tema chiaro a quello scuro o viceversa in DevTools. (1278738)

Scaricare i canali di 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, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano gli utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità, degli aggiornamenti o di qualsiasi altra cosa relativa a DevTools.

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

Novità di DevTools

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