Novità di DevTools (Chrome 63)

Kayce Basques

Siamo felici di rivederti. Le nuove funzionalità in arrivo in DevTools in Chrome 63 includono:

• Supporto del debug remoto multi-client.
• Workspace 2.0.
• Quattro nuovi controlli.
• Simulare notifiche push con dati personalizzati.
• Attivare gli eventi di sincronizzazione in background con i tag personalizzati.

Per ulteriori informazioni, continua a leggere o guarda il video.

Supporto del debug remoto multi-client

Se hai mai provato a eseguire il debug di un'app da un IDE come VS Code o WebStorm, probabilmente scoperto che l'apertura di DevTools complica la sessione di debug. Questo problema ha inoltre impedito usare DevTools per eseguire il debug dei test WebDriver.

A partire da Chrome 63, DevTools supporta per impostazione predefinita più client di debug remoto, no configurazione necessaria.

Il debug remoto multi-client è stato il problema più diffuso in DevTools su crbug.com. numero 3 nell'intero progetto Chromium. Anche il supporto multi-cliente offre interessanti opportunità per integrare altri strumenti con DevTools o utilizzarli in nuove in molti modi diversi. Ad esempio:

• Client di protocollo come ChromeDriver o le estensioni di debug di Chrome per VS Code e Webstorm e i client WebSocket, come Puppeteer, possono ora essere eseguiti contemporaneamente a DevTools.
• Due client di protocollo WebSocket separati, ad esempio Puppeteer o chrome-remote-interface, possono ora connettersi contemporaneamente alla stessa scheda.
• Ora le estensioni di Chrome che utilizzano l'API chrome.debugger possono essere eseguite contemporaneamente a DevTools.
• Ora più estensioni di Chrome diverse possono utilizzare l'API chrome.debugger nella stessa scheda contemporaneamente.

Aree di lavoro 2.0

Le aree di lavoro sono in circolazione in DevTools. Questa funzionalità consente di usare DevTools nel tuo IDE. Apporta alcune modifiche al codice sorgente in DevTools e le modifiche vengono mantenute nel locale del progetto sul tuo file system.

Workspaces 2.0 si basa sulla versione 1.0, aggiungendo una UX più utile e una migliore mappatura automatica dei le API nel tuo codice. Questa funzionalità era stata inizialmente programmata per essere rilasciata poco dopo il Chrome Developer Summit (CDS) 2016, ma il team lo ha posticipato per risolvere alcuni problemi.

Consulta la sezione (all'incirca alle 14:28) della presentazione di DevTools del CDS 2016 per vedere le aree di lavoro 2.0 in azione.

Quattro nuovi controlli

In Chrome 63, il riquadro Controlli prevede quattro nuovi controlli:

• Pubblica immagini come WebP.
• Utilizza immagini con proporzioni appropriate.
• Evita le librerie JavaScript di frontend con vulnerabilità di sicurezza note.
• Errori del browser registrati nella console.

Consulta Eseguire Lighthouse in Chrome DevTools per scoprire come utilizzare il riquadro Controlli per migliorare il la qualità delle tue pagine.

Consulta Lighthouse per scoprire di più sul progetto alla base del pannello Controlli.

Simulare notifiche push con dati personalizzati

La simulazione delle notifiche push è in uso da un po' di tempo in DevTools, con un limite: impossibile inviare dati personalizzati. Con la nuova casella di testo Push nel riquadro Service worker in Chrome 63, ora puoi farlo. Prova subito:

1. Vai a Demo push semplice.
2. Fai clic su Abilita notifiche push.
3. Fai clic su Consenti quando Chrome ti chiede di consentire le notifiche.
4. Apri DevTools.
5. Vai al riquadro Service worker.

6. Scrivi qualcosa nella casella di testo Push.

   

   Figura 1. Simulazione di una notifica push con dati personalizzati tramite la casella di testo Push nella Riquadro Service worker

7. Fai clic su Push per inviare la notifica.

   

   Figura 2. La notifica push simulata

Attivare gli eventi di sincronizzazione in background con i tag personalizzati

Anche l'attivazione degli eventi di sincronizzazione in background è visualizzata nel riquadro Service worker da un po' di tempo, ma Ora puoi inviare tag personalizzati:

1. Apri DevTools.
2. Vai al riquadro Service worker.
3. Inserisci del testo nella casella di testo Sincronizza.
4. Fai clic su Sincronizza.

Figura 3. Dopo aver fatto clic su Sincronizza, DevTools invia un evento di sincronizzazione in background con il tag personalizzato. update-content al service worker

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