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 Network, 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

Nuovo riquadro dell'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 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 nella tua pagina e il relativo stato. Fai clic 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/selezionabile nel riquadro Registratore

Quando viene riprodotta una registrazione del flusso utente, il riquadro Registratore ora attende che l'elemento sia visibile o cliccabile nell'area visibile o tenta 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 menu off-screen posizionato all'esterno dell'area visibile e che si inserisce 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 applicare correttamente lo stile 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.

È comune per gli sviluppatori di Node.js colorare 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ù su come formattare e applicare stili ai messaggi della console con DevTools, consulta la documentazione su come formattare e applicare stili ai 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 dei gruppi di console più intuitivo

Quando filtri il messaggio della console, ora viene mostrato un messaggio della console se i relativi contenuti corrispondono al filtro o se il titolo del gruppo (o del gruppo principale) corrisponde al filtro. In precedenza, il titolo del gruppo di console veniva visualizzato nonostante il filtro.

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

Problema di Chromium: 1068788

Miglioramenti alle mappe di origine

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

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 di Chromium: 212374

Albero delle cartelle delle origini migliorato nel riquadro Origini

L'albero delle cartelle di origine nel riquadro Origini è stato migliorato con una minore confusione nelle strutture e nei nomi 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

Visualizzare i file di origine del worker nel riquadro Risorse

I file di origine worker (ad es. worker web, worker di servizio) 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 di Chromium: 1243309

Selettore colori e riquadro diviso ottimizzati per il tocco

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

Altri punti salienti

Di seguito sono riportate alcune correzioni importanti di questa release:

• È stato risolto il problema relativo alla modifica dei cookie nel riquadro Cookie. (1290196)
• Usa Shift + Tab per selezionare il comando precedente nel menu Comando. (1278743)
• Segnala i problemi relativi alla richiesta di preflight CORS nella scheda Problemi. (1272445).
• Segnala i problemi relativi ai client hint 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 alcuna ricarica quando si passa dal tema chiaro a quello scuro in DevTools. (1278738)

Scaricare i canali di anteprima

Valuta la possibilità di utilizzare 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 i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo 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'account @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.