Novità di DevTools (Chrome 99)

Limitazione delle richieste WebSocket

Il riquadro Rete ora supporta la limitazione delle richieste socket web. 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à.

Limitazione delle richieste WebSocket

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.

Riquadro API di reporting

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 saperne di più su formattazione e stile dei messaggi della console con DevTools, vai alla sezione relativa alla formattazione e allo stile dei messaggi nella documentazione della console.

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

Supportare gli indicatori di formato nella console di messaggistica

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.

filtro gruppo console

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.

Esegui il debug dell'estensione di Chrome con i file delle mappe di origine

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.

Struttura delle cartelle di origine migliorata nel riquadro Origini

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.

ALT_TEXT_HERE

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.

Emulazione automatica del tema scuro

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:

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 ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di 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 usando Altre opzioni   Altre   > 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome - Guida introduttiva

Chrome - Guida introduttiva

Guida introduttiva di Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59