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 del nome della dichiarazione. Ad esempio, quando un nodo <p> è in grassetto, il valore bold potrebbe essere più facile da ricordare rispetto al nome font-weight. L'interfaccia utente di completamento automatico del riquadro Stile ora supporta CSS e i relativi valori. Se ricordi il valore della parola chiave che vuoi, ma non riesci a ricordare il nome della proprietà, prova digitare il valore e il completamento automatico dovrebbe aiutarti a trovare il nome che stai cercando.

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

Figura 1. Dopo aver digitato bold, il riquadro degli 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 di rete

In precedenza, il riquadro Rete presentava un problema di usabilità per cui opzioni come il menu di limitazione non raggiungibile se la finestra DevTools era stretta. Per risolvere il problema e riordinare il riquadro Rete, alcune opzioni meno utilizzate sono state spostate rispetto alle nuove Impostazioni di rete Pulsante Impostazioni di rete riquadro.

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 località ai nuovi quelli.

Mappare le località vecchie a quelle nuove.

Figura 3. Mappare le località vecchie a quelle nuove.

Invia un feedback su questa modifica dell'interfaccia utente relativa 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 tuo file HAR ora include i messaggi WebSocket. La proprietà _webSocketMessages inizia con un il 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 in HAR

Condividi più facilmente i log di rete con i colleghi grazie al nuovo strumento Esporta tutti come HAR con contenuti. Esporta e importa file HAR Importa. Importazione ed esportazione dei file HAR che esistono in DevTools. Più pulsanti 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 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. La parte inferiore del riquadro Memoria mostra che la pagina utilizza 43,4 MB di memoria in totali. 209 kB/s indica che l'utilizzo totale della memoria aumenta di 209 kB al secondo.

Consulta anche Performance Monitor per monitorare l'utilizzo della memoria in tempo reale.

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

Numeri di porta di registrazione dei service worker

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

Porte del Service worker.

Immagine 6. Porte del Service worker.

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

Ispezionare gli eventi di recupero e sincronizzazione in background

Utilizza la nuova sezione Servizi in background del riquadro Applicazione per monitorare Eventi di recupero e sincronizzazione in background. Dati gli eventi di recupero e sincronizzazione in background che si verificano in... beh... in background, non sarebbe molto utile se DevTools registrasse solo lo sfondo Eventi di recupero e sincronizzazione in background mentre DevTools era aperto. Una volta avviata la registrazione, la modalità Gli eventi di recupero e sincronizzazione in background continueranno a essere registrati, anche dopo la chiusura della 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 Registra per avviare il logging eventi. Fai clic su un evento per visualizzare ulteriori informazioni a riguardo.

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

Puppeteer per Firefox

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

Una volta eseguito node example.js, si apre Firefox e nella casella di ricerca viene inserito il testo page sul sito della documentazione di Puppeteer. Quindi la stessa attività viene ripetuta in Chromium.

Guarda l'evento Puppeteer talk di Joel e Andrey al Google I/O 2019 per saperne di più su Puppeteer e Puppeteer per Firefox. L'annuncio di Firefox è previsto intorno alle 04:05.

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 delle piattaforme web all'avanguardia e 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 utilizzando Altre opzioni   Altro > 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.