Novità di DevTools (Chrome 63)

Kayce Basques
Kayce Basques
X GitHub

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

Continua a leggere o guarda il video qui sotto per saperne di più.

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 hai scoperto che l'apertura di DevTools interrompe la sessione di debug. Questo problema ha reso anche impossibile utilizzare DevTools per eseguire il debug dei test WebDriver.

A partire da Chrome 63, DevTools supporta più client di debug remoto per impostazione predefinita, senza richiedere alcuna configurazione.

Il debug remoto multiclient è stato il problema più popolare di DevTools su crbug.com e il terzo più popolare dell'intero progetto Chromium. Il supporto multiclient offre anche diverse opportunità interessanti per integrare altri strumenti con DevTools o per utilizzarli in nuovi modi. Ad esempio:

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

Workspace 2.0

I workspace sono disponibili in DevTools da un po' di tempo. Questa funzionalità ti consente di utilizzare DevTools come IDE. Apporti alcune modifiche al codice sorgente in DevTools e le modifiche vengono mantenute nella versione locale del progetto nel file system.

Workspace 2.0 si basa sulla versione 1.0, aggiungendo una UX più utile e una mappatura automatica migliorata del codice transpilato. L'uscita di questa funzionalità era originariamente prevista poco dopo il Chrome Developer Summit (CDS) 2016, ma il team l'ha posticipata per risolvere alcuni problemi.

Guarda la parte "Authoring" (intorno al minuto 14:28) del talk di DevTools del CDS 2016 per vedere gli spazi di lavoro 2.0 in azione.

Quattro nuovi audit

In Chrome 63 il riquadro Controlli include 4 nuovi controlli:

  • Pubblica le immagini come WebP.
  • Utilizza immagini con proporzioni appropriate.
  • Evita librerie JavaScript front-end con vulnerabilità di sicurezza note.
  • Gli errori del browser sono stati registrati nella console.

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

Consulta Lighthouse per scoprire di più sul progetto che alimenta il riquadro Controlli.

Simulare le notifiche push con dati personalizzati

La simulazione delle notifiche push è disponibile da tempo in DevTools, con una limitazione: non era possibile inviare dati personalizzati. Ma con la nuova casella di testo Push in arrivo nel riquadro Service Worker di Chrome 63, ora puoi farlo. Prova subito:

  1. Vai a Simple Push Demo.
  2. Fai clic su Attiva 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.

    Simulazione di una notifica push con dati personalizzati.

    Figura 1. Simulazione di una notifica push con dati personalizzati tramite la casella di testo Push nel riquadro Service Worker

  7. Fai clic su Push per inviare la notifica.

    La notifica push simulata

    Figura 2. La notifica push simulata

Attivare eventi di sincronizzazione in background con tag personalizzati

L'attivazione degli eventi di sincronizzazione in background è presente da tempo nel riquadro Service Worker, 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.

Attivazione di un evento di sincronizzazione in background personalizzato

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 di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API della piattaforma web all'avanguardia e trovare problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità, degli aggiornamenti o di qualsiasi altro argomento relativo a DevTools.

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.