Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di DevTools (Chrome 76)

Kayce Basques

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

Completamento automatico con valori CSS

Quando si aggiungono 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 il grassetto per un nodo <p>, 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 i valori CSS. Se ricordi il valore della parola chiave desiderato, ma non ricordi il nome della proprietà, prova a digitare il valore e il completamento automatico dovrebbe aiutarti a trovare il nome che cerchi.

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

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 Network aveva un problema di usabilità per cui opzioni come il menu di limitazione non erano raggiungibili quando la finestra di DevTools era ridotta. Per risolvere il problema e riordinare il riquadro Rete, alcune opzioni meno utilizzate sono state spostate dietro il nuovo riquadro 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 grandi, Raggruppa per frame, Mostra panoramica, Acquisisci screenshot. La Figura 3 mappa le località precedenti a quelle nuove.

Mappatura della località precedente a quella nuova.

Figura 3. Mappatura della località precedente a quella nuova.

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 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 in HAR

Condividi più facilmente i log di rete con i colleghi con i nuovi pulsanti Esporta tutto come HAR con contenuti e Importa file HAR . L'importazione e l'esportazione in formato HAR sono disponibili in DevTools 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 al problema di Chromium n. 904585.

Memoria totale utilizzata in tempo reale

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

Memoria totale utilizzata in tempo reale.

Figura 5. La parte inferiore del riquadro Memoria mostra che la pagina utilizza 43,4 MB di memoria in totale. 209 kB/s indica che l'utilizzo totale della memoria è in aumento di 209 kB al secondo.

Vedi 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 facilitare il monitoraggio del service worker di cui stai eseguendo il debug.

Porte del service worker.

Immagine 6. Porte del service worker.

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

Ispezione degli 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. Dato che gli eventi di recupero in background e di sincronizzazione in background si verificano in background, non sarebbe molto utile se DevTools registrasse solo eventi di recupero in background e di sincronizzazione in background mentre DevTools era aperto. Una volta avviata la registrazione, gli eventi 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 al 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 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 l'API Puppeteer. In altre parole, ora puoi automatizzare Firefox e Chromium con la stessa API Node, come mostrato nel video in basso.

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. Quindi la stessa attività viene ripetuta in Chromium.

Dai un'occhiata al discorso di Joel e Andrey su Puppeteer in Google I/O 2019 per scoprire di più su Puppeteer e Puppeteer per Firefox. L'annuncio di Firefox avviene intorno alle 4:05.

Scarica i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o beta come browser di sviluppo predefinito. Questi canali in anteprima ti consentono di accedere alle funzionalità di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.

Inviaci un suggerimento o un feedback tramite crbug.com.
Segnala un problema DevTools utilizzando Altre opzioni > Guida > Segnala i problemi di DevTools in DevTools.
Tweet all'indirizzo @ChromeDevTools.
Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.