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 imposti in grassetto un nodo <p>, il valore bold potrebbe essere più facile da ricordare rispetto al nome font-weight. L'interfaccia utente del 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 la funzionalità di completamento automatico dovrebbe aiutarti a trovare il nome che stai cercando.

Dopo aver digitato &quot;bold&quot;, il riquadro Stili completa automaticamente &quot;font-weight: bold&quot;.

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

Invia un feedback su questa nuova funzionalità all'issue di Chromium 931145.

Una nuova interfaccia utente per le impostazioni di rete

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

Impostazioni di rete

Figura 2. Impostazioni di rete.

Le seguenti opzioni sono state spostate in Impostazioni di rete: Utilizza righe di richiesta di grandi dimensioni, Raggruppa per frame, Mostra panoramica, Acquisisci screenshot. La Figura 3 mappa le vecchie posizioni con quelle nuove.

Mappatura delle vecchie posizioni a quelle nuove.

Figura 3. Mappatura delle vecchie posizioni a quelle nuove.

Invia un feedback su questa modifica dell'interfaccia utente al problema di Chromium 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 underscore 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 più facilmente i log di rete con i colleghi con i nuovi pulsanti Esporta tutti come HAR con contenuti Esporta e Importa file HAR Importa. L'importazione e l'esportazione dei file HAR esiste in DevTools già da un po'. I pulsanti più rilevabili sono la nuova modifica.

I nuovi pulsanti HAR.

Figura 4. I nuovi pulsanti HAR.

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

Utilizzo totale della memoria in tempo reale

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

Utilizzo memoria totale in tempo reale.

Figura 5. Nella parte inferiore del riquadro Memoria viene indicato che la pagina utilizza 43,4 MB di memoria in totale. 209 kB/s indica che l'utilizzo totale della memoria aumenta di 209 kB al secondo.

Consulta anche Monitoraggio prestazioni per monitorare l'utilizzo della memoria in tempo reale.

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

Numeri di porta di registrazione dei service worker

Il riquadro Service worker ora include i numeri di porta nei titoli per consentirti di tenere traccia più facilmente del service worker che stai eseguendo il debug.

Porte dei service worker.

Immagine 6. Porte del Service worker.

Invia un feedback su questa modifica dell'interfaccia utente al problema Chromium 601286.

Ispezionare gli eventi di recupero e sincronizzazione in background

Utilizza la nuova sezione Servizi in background del riquadro Applicazione per monitorare gli eventi Recupero in background e Sincronizzazione in background. Poiché gli eventi Background Fetch e Background Sync si verificano in background, non sarebbe molto utile se DevTools registrasse solo gli eventi Background Fetch e Background Sync quando è aperto. Pertanto, una volta avviata la registrazione, gli eventi Background Fetch e Background Sync continueranno a essere registrati, anche dopo aver chiuso la scheda e persino dopo aver chiuso Chrome.

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

Il riquadro Recupero in background.

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

Il riquadro Sincronizzazione in background.

Immagine 8. Il riquadro Sincronizzazione in background.

Invia un feedback su queste nuove funzionalità al problema di Chromium 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 dimostrato nel video di seguito.

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

Guarda il talk di Puppeteer di Joel e Andrey di Google I/O 2019 per scoprire di più su Puppeteer e Puppeteer per Firefox. L'annuncio di Firefox viene mostrato intorno alle 4:05.

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

Novità di DevTools

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