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

Limitazione delle richieste WebSocket

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.

Riquadro API di reporting

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.

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

supporta gli specificatori di formato nel messaggio della console

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.

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 di mappa sorgente. In precedenza, DevTools supportava solo le mappe sorgente in linea per il debug delle estensioni di Chrome.

Eseguire il debug dell'estensione di Chrome con i file mappa sorgente

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.

Struttura delle cartelle di origine migliorata nel riquadro Origini

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.

ALT_TEXT_HERE

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.

Emulazione del tema scuro automatico

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:

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.

Novità di DevTools

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