Novità di DevTools (Chrome 63)

Kayce Basques

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

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

Supporto del debug remoto multi-cliente

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 rovina la sessione di debug. Questo problema ha reso inoltre impossibile utilizzare DevTools per eseguire il debug dei test WebDriver.

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

Il debug remoto multi-client è stato il primo problema di DevTools più popolare su crbug.com e il terzo nell'intero progetto Chromium. Il supporto multicliente 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, nonché i client WebSocket come Puppeteer, ora possono essere eseguiti contemporaneamente a DevTools.
  • Ora due client di protocollo WebSocket separati, come Puppeteer o chrome-remote-interface, 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 contemporaneamente l'API chrome.debugger nella stessa scheda.

Workspaces 2.0

Gli spazi di lavoro sono disponibili in DevTools da un po' di tempo. Questa funzionalità ti consente di utilizzare DevTools come IDE. Apporta alcune modifiche al codice sorgente in DevTools e le modifiche vengono mantenute nella versione locale del progetto sul file system.

Workspaces 2.0 si basa su 1.0, aggiungendo un'esperienza utente più utile e una mappatura automatica migliorata del codice transpiled. Inizialmente, questa funzionalità doveva essere rilasciata poco dopo il Chrome Developer Summit (CDS) 2016, ma il team ha deciso di posticiparne il lancio per risolvere alcuni problemi.

Dai un'occhiata alla parte "Creazione" (intorno alle 14:28) del talk di DevTools del CDS 2016 per vedere Workspaces 2.0 in azione.

Quattro nuovi controlli

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

  • Pubblica le immagini come WebP.
  • Utilizza immagini con proporzioni adeguate.
  • Evita librerie JavaScript front-end 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 la qualità delle tue pagine.

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

Simulare notifiche push con dati personalizzati

La simulazione delle notifiche push è disponibile da tempo in DevTools, con un limite: non potevano essere inviati dati personalizzati. Ora puoi, grazie alla nuova casella di testo Push che verrà inserita nel riquadro Service Worker in Chrome 63. Prova subito:

  1. Vai a Demo di push semplici.
  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 gli eventi di sincronizzazione in background con i tag personalizzati

L'attivazione degli eventi di sincronizzazione in background è disponibile anche nel riquadro Service Workers 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.

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 personalizzatoupdate-content al service worker

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