Novità di DevTools (Chrome 99)

Jecelyn Yeen

Limitazione delle richieste WebSocket

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

Apri il riquadro Network, fai clic su una richiesta WebSocket 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

Nuovo riquadro dell'API Reporting nel pannello Applicazione

Utilizza il nuovo riquadro API Reporting per monitorare i report generati nella tua pagina e il loro 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 Reporting (ad es. la pagina demo). Nel riquadro Applicazione, scorri verso il basso fino alla sezione Servizi in background e seleziona il riquadro API Reporting.

La sezione Report mostra un elenco dei report generati sulla tua pagina e il loro stato. Fai clic 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

Support wait until element is visible/clickable in the Recorder panel

Quando riproduci una registrazione del flusso utente, il riquadro Registratore ora attende che l'elemento sia visibile o selezionabile nell'area visibile oppure tenta di scorrere automaticamente l'elemento nell'area visibile prima di riprodurre il passaggio. In precedenza, la riproduzione non riusciva immediatamente.

Ecco un esempio di menu fuori schermo posizionato al di fuori della finestra e che scorre verso l'interno quando viene attivato. Il flusso utente prevede di 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 era ancora in fase di scorrimento e non era ancora visibile nel riquadro. Il problema è stato risolto.

Problema di Chromium: 1257499

Stile, formattazione e filtri della console migliori

Applicare correttamente lo stile ai messaggi di log con il codice di escape ANSI

Ora puoi utilizzare le sequenze di escape ANSI per applicare lo stile corretto ai messaggi della console. In precedenza, la console DevTools aveva un supporto molto limitato (e in parte non funzionante) per le sequenze di escape ANSI.

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

Con queste modifiche, ora puoi eseguire il debug delle tue applicazioni Node.js senza problemi utilizzando DevTools, con messaggi della console colorati correttamente. Apri questa demo per vederla di persona.

Per scoprire di più sulla formattazione e sullo stile dei messaggi della console con DevTools, consulta la documentazione Formattare e applicare uno stile ai messaggi nella console.

Stile della console

Problemi di Chromium: 1282837, 1282076

Supportare correttamente gli identificatori di formato %s, %d, %i e %f

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

support format specifiers in console messege

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 se il titolo del gruppo (o del gruppo padre) corrisponde al filtro. In precedenza, il titolo del gruppo della console veniva visualizzato nonostante il filtro.

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

filtro per gruppi della console

Problema di Chromium: 1068788

Miglioramenti delle mappe di origine

Eseguire il debug dell'estensione Chrome con i file della mappa delle origini

Ora puoi eseguire il debug dell'estensione Chrome con i file della mappa delle origini. In precedenza, DevTools supportava solo la sourcemap incorporata per il debug delle estensioni di Chrome.

Eseguire il debug dell'estensione Chrome con i file della mappa delle origini

Problema di Chromium: 212374

Albero delle cartelle delle fonti migliorato nel riquadro Origini

L'albero delle cartelle di origine nel riquadro Origini è stato migliorato con una struttura e una denominazione delle cartelle più chiare (ad es. "../", "./" e così via). A livello tecnico, questo è il risultato della normalizzazione degli URL di origine assoluti nelle mappe delle origini.

Albero delle cartelle delle fonti migliorato nel riquadro Origini

Problema di Chromium: 1284737

Visualizzare i file sorgente dei worker nel riquadro Risorse

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, mentre in precedenza era un menu a discesa.

A parte questo, quando è attivato il tema scuro automatico, il menu a discesa Emula 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 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 ottimizzati per il tocco

Ora puoi selezionare il colore e ridimensionare il riquadro 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

Punti salienti vari

Di seguito sono riportate alcune correzioni degne di nota in questa release:

Scaricare i canali in 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, testare le API della piattaforma web all'avanguardia e trovare problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità, degli aggiornamenti o di qualsiasi altro argomento relativo a DevTools.

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.