Novità di DevTools (Chrome 76)

Kayce Basques

Ciao! Ecco le novità di Chrome DevTools in Chrome 76.

Completamento automatico con valori CSS

Quando aggiungi dichiarazioni di stile a un nodo DOM, a volte il valore della dichiarazione è più facile da ricordare rispetto al nome della dichiarazione. Ad esempio, quando rendi grassetto un nodo <p>, il valore bold potrebbe essere più facile da ricordare rispetto al nome font-weight. La UI di completamento automatico del riquadro Stile ora supporta i valori CSS. Se ricordi il valore della parola chiave che ti interessa, ma non ricordi il nome della proprietà, prova a digitare il valore e il completamento automatico dovrebbe aiutarti a trovare il nome che stai cercando.

Figura 1. Dopo aver digitato bold, il riquadro Stili viene completato automaticamente in font-weight: bold.

Invia un feedback su questa nuova funzionalità al problema di Chromium n. 931145.

Una nuova UI per le impostazioni della rete

In precedenza, il riquadro Rete presentava un problema di usabilità per cui opzioni come il menu di limitazione non erano raggiungibili quando la finestra di DevTools era stretta. Per risolvere questo problema e riordinare il riquadro Rete, alcune opzioni meno utilizzate sono state spostate nel nuovo riquadro Impostazioni di rete .

Figura 2. Impostazioni di rete.

Le seguenti opzioni sono state spostate in Impostazioni della rete: Usa righe di richiesta grandi, Raggruppa per frame, Mostra panoramica, Acquisisci screenshot. La Figura 3 mappa le posizioni precedenti a quelle nuove.

Figura 3. Mappatura delle vecchie posizioni alle nuove.

Invia un feedback su questa modifica dell'interfaccia utente al problema di Chromium n. 892969.

Messaggi WebSocket nelle esportazioni HAR

Quando esporti un file HAR dal riquadro Rete per condividere i log di rete con i tuoi colleghi, il file HAR ora include i messaggi WebSocket. La proprietà _webSocketMessages inizia con un trattino basso per indicare che si tratta di un campo personalizzato.

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

Invia un feedback su questa nuova funzionalità al problema di Chromium n. 496006.

Pulsanti di importazione ed esportazione HAR

Condividi i log di rete con i colleghi più facilmente con i nuovi pulsanti Esporta tutto come HAR con i contenuti e Importa file HAR . L'importazione e l'esportazione di file HAR sono disponibili in DevTools da un po' di tempo. La novità è che i pulsanti sono più facili da trovare.

Figura 4. I nuovi pulsanti HAR.

Invia un feedback su questa modifica della UI al problema di Chromium n. 904585.

Memoria utilizzata totale in tempo reale

Il riquadro Memoria ora mostra l'utilizzo totale della memoria in tempo reale.

Figura 5. Nella parte inferiore del riquadro Memoria viene mostrato che la pagina utilizza 43,4 MB di memoria in totale. 209 KB/s indica che la memoria totale utilizzata sta aumentando di 209 KB al secondo.

Consulta anche Monitoraggio del rendimento per monitorare la memoria utilizzata in tempo reale.

Invia un feedback su questa nuova funzionalità al problema di Chromium n. 958177.

Numeri di porta per la registrazione dei service worker

Il riquadro Service worker ora include i numeri di porta nei titoli per semplificare il monitoraggio del service worker di cui stai eseguendo il debug.

Figura 6. Porte dei service worker.

Invia un feedback su questa modifica della UI al problema di Chromium n. 601286.

Ispeziona gli eventi di recupero in background e sincronizzazione in background

Utilizza la nuova sezione Servizi in background del riquadro Applicazione per monitorare gli eventi di recupero in background e sincronizzazione in background. Dato che gli eventi di recupero e sincronizzazione in background si verificano, appunto, in background, non sarebbe molto utile se DevTools registrasse questi eventi solo quando è aperto. Quindi, una volta avviata la registrazione, gli eventi di recupero in background e sincronizzazione in background continueranno a essere registrati, anche dopo aver chiuso la scheda e anche dopo aver chiuso Chrome.

Vai al riquadro Applicazione, apri la scheda Recupero in background o Sincronizzazione in background, quindi fai clic su Registra per iniziare a registrare gli eventi. Fai clic su un evento per visualizzare ulteriori informazioni.

Figura 7. Il riquadro Recupero in background. Demo di Maxim Salnikov.

Immagine 8. Il riquadro Sincronizzazione in background.

Invia un feedback su queste nuove funzionalità al problema di Chromium n. 927726.

Puppeteer per Firefox

Puppeteer per Firefox è un nuovo progetto sperimentale che ti consente di automatizzare Firefox con l'API Puppeteer. In altre parole, ora puoi automatizzare Firefox e Chromium con la stessa API Node, come mostrato nel video di seguito.

Dopo aver eseguito node example.js, Firefox si apre e il testo page viene inserito nella casella di ricerca del sito della documentazione di Puppeteer. Poi la stessa attività viene ripetuta in Chromium.

Per saperne di più su Puppeteer e Puppeteer per Firefox, guarda l'intervento su Puppeteer di Joel e Andrey alla conferenza Google I/O 2019. L'annuncio di Firefox avviene intorno al minuto 4:05.

Scarica i canali in 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 le API della piattaforma 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 di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema di DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet a @ChromeDevTools.
• Lascia commenti 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.