Novità di DevTools (Chrome 65)

Kayce Basques

Le nuove funzionalità di DevTools in Chrome 65 includono:

Continua a leggere o guarda la versione video di queste note di rilascio di seguito.

Sostituzioni locali

Le sostituzione locali ti consentono di apportare modifiche in DevTools e mantenerle durante i caricamenti della pagina. In precedenza, tutte le modifiche apportate in DevTools andavano perse quando si ricaricava la pagina. Le sostituzione locali funzionano per la maggior parte dei tipi di file, con un paio di eccezioni. Consulta la sezione Limitazioni.

Mantenimento di una modifica CSS nei caricamenti di pagina con le sostituzioni locali.

Figura 1. Mantenimento di una modifica CSS nei caricamenti di pagina con le sostituzione locali

Come funziona:

  • Specifica una directory in cui DevTools deve salvare le modifiche.
  • Quando apporti modifiche in DevTools, DevTools salva una copia del file modificato nella tua directory.
  • Quando ricarichi la pagina, DevTools serve il file locale modificato anziché la risorsa di rete.

Per configurare gli override locali:

  1. Apri il riquadro Origini.

  2. Apri la scheda Sostituzioni.

    La scheda Override

    Figura 2. La scheda Sostituzioni

  3. Fai clic su Sostituzione configurazione.

  4. Seleziona la directory in cui vuoi salvare le modifiche.

  5. Nella parte superiore del viewport, fai clic su Consenti per concedere a DevTools l'accesso in lettura e scrittura alla directory.

  6. Apporta le modifiche.

Limitazioni

  • DevTools non salva le modifiche apportate alla struttura DOM del riquadro Elementi. Modifica l'HTML nel riquadro Origini.
  • Se modifichi il codice CSS nel riquadro Stili e la relativa origine è un file HTML, DevTools non salverà la modifica. Modifica il file HTML nel riquadro Origini.
  • Spazi di lavoro. DevTools mappa automaticamente le risorse di rete a un repository locale. Ogni volta che apporti una modifica in DevTools, questa viene salvata anche nel tuo repository locale.

La scheda Modifiche

Monitora le modifiche apportate localmente in DevTools tramite la nuova scheda Modifiche.

La scheda Modifiche

Figura 3. Scheda Modifiche

Nuovi strumenti di accessibilità

Utilizza il nuovo riquadro Accessibilità per ispezionare le proprietà di accessibilità di un elemento e il rapporto di contrasto degli elementi di testo nel Selettore di colori per assicurarti che siano accessibili agli utenti con disabilità visive o discromatopsie.

Pannello Accessibilità

Utilizza il riquadro Accessibilità nel riquadro Elementi per esaminare le proprietà di accessibilità dell'elemento attualmente selezionato.

Pannello Accessibilità

Figura 4. Il riquadro Accessibilità mostra gli attributi ARIA e le proprietà calcolate per l'elemento attualmente selezionato nella struttura DOM nel riquadro Elementi, nonché la sua posizione nella struttura di accessibilità

Dai un'occhiata a A11ycast di Rob Dodson sulle etichette qui sotto per vedere il riquadro Accessibilità in azione.

Rapporto del contrasto nel selettore colori

Il selettore colori ora mostra il rapporto di contrasto degli elementi di testo. Aumentare il rapporto di contrasto degli elementi di testo rende il tuo sito più accessibile agli utenti con disturbi visivi o con discromatopsie. Consulta la sezione Colore e contrasto per scoprire di più su come il rapporto di contrasto influisce sull'accessibilità.

Se aumenti il contrasto di colore degli elementi del testo, il tuo sito può essere utilizzato da tutti gli utenti. In altre parole, se il testo è grigio con uno sfondo bianco, è difficile da leggere per chiunque.

Controllo del rapporto di contrasto dell'elemento H1 evidenziato.

Figura 5. Controllo del rapporto di contrasto dell'elemento h1 evidenziato

Nella Figura 5, le due caselle di controllo accanto a 4,61 indicano che questo elemento soddisfa il Rapporto di contrasto consigliato (AAA). Se è presente un solo segno di spunta, significa che è stato raggiunto il rapporto di contrasto minimo consigliato (AA).

Fai clic su Mostra altro Mostra altro per espandere la sezione Rapporto di contrasto. La linea bianca nella casella Spettro di colori rappresenta il confine tra i colori che soddisfano il rapporto di contrasto consigliato e quelli che non lo soddisfano. Ad esempio, poiché il colore grigio nella Figura 6 soddisfa i consigli, significa che anche tutti i colori al di sotto della linea bianca soddisfano i consigli.

La sezione espansa Rapporto di contrasto.

Figura 6. La sezione Rapporto di contrasto espansa

Il riquadro Controlli contiene un controllo di accessibilità automatico per garantire che ogni elemento di testo di una pagina abbia un rapporto di contrasto sufficiente.

Consulta l'articolo Eseguire Lighthouse in Chrome DevTools o guarda l'A11ycast di seguito per scoprire come utilizzare il riquadro Controlli per testare l'accessibilità.

Nuovi controlli

Chrome 65 include una nuova categoria di controlli SEO e molti nuovi controlli delle prestazioni.

Nuovi controlli SEO

Garantire che le tue pagine superino ogni controllo nella nuova categoria SEO può contribuire a migliorare il ranking nei motori di ricerca.

La nuova categoria di controlli SEO.

Figura 7. La nuova categoria di controlli SEO

Nuovi controlli delle prestazioni

Chrome 65 include anche molti nuovi controlli del rendimento:

  • Il tempo di avvio di JavaScript è elevato
  • Utilizza criteri della cache inefficaci per le risorse statiche
  • Evita i reindirizzamenti di pagina
  • Il documento utilizza plug-in
  • Minimizza CSS
  • Minimizza JavaScript

Le prestazioni sono importanti. Dopo che Mynet ha migliorato la velocità di caricamento delle pagine di 4 volte, gli utenti hanno trascorso il 43% in più di tempo sul sito, hanno visualizzato il 34% in più di pagine, le frequenze di rimbalzo sono diminuite del 24% e le entrate sono aumentate del 25% per visualizzazione di pagina dell'articolo. Scopri di più.

Suggerimento Se vuoi migliorare il rendimento in termini di caricamento delle tue pagine, ma non sai da dove iniziare, prova il riquadro Controlli. Fornisci un URL e ricevi un report dettagliato su molti modi diversi per migliorare la pagina. Per iniziare

Altri aggiornamenti

Passaggi di codice affidabili con worker e codice asincrono

Chrome 65 introduce aggiornamenti per il pulsante Accedi Esegui istruzione durante l'accesso al codice che trasferisce i messaggi tra i thread e il codice asincrono. Se vuoi il comportamento precedente, puoi utilizzare il nuovo pulsante Passaggio Passaggio.

Eseguire il passaggio al codice che passa i messaggi tra i thread

Quando entri nel codice che passa i messaggi tra i thread, DevTools ora ti mostra cosa succede in ogni thread.

Ad esempio, l'app nella Figura 8 trasmette un messaggio tra il thread principale e il thread di lavoro. Dopo aver eseguito il passaggio alla chiamata postMessage() nel thread principale, DevTools si ferma nell'handler onmessage nel thread di lavoro. Il gestore onmessage stesso pubblica un messaggio nel thread principale. Se esegui il passaggio alla chiamata, DevTools viene messo in pausa nel thread principale.

Interruzione del codice di trasmissione dei messaggi in Chrome 65.

Figura 8. Interrompere il codice di trasmissione dei messaggi in Chrome 65

Quando eseguivi il passaggio a un codice come questo nelle versioni precedenti di Chrome, Chrome mostrava solo il codice relativo al thread principale, come puoi vedere nella Figura 9.

Passaggio al codice di trasmissione dei messaggi in Chrome 63.

Figura 9. Eseguire il passaggio al codice di trasmissione dei messaggi in Chrome 63

Eseguire il passaggio al codice asincrono

Quando esegui il passaggio al codice asincrono, DevTools ora presume che tu voglia mettere in pausa il codice asincrono che viene eseguito.

Ad esempio, nella Figura 10, dopo aver eseguito il passaggio a setTimeout(), DevTools esegue tutto il codice precedente a quel punto dietro le quinte e poi si ferma nella funzione passata a setTimeout().

Esecuzione di un passaggio al codice asincrono in Chrome 65.

Figura 10. Eseguire il passaggio al codice asincrono in Chrome 65

Quando eseguivi il passaggio a un codice come questo in Chrome 63, DevTools si fermava nel codice man mano che veniva eseguito in ordine cronologico, come puoi vedere nella Figura 11.

Passaggio al codice asincrono in Chrome 63.

Figura 11. Eseguire il passaggio al codice asincrono in Chrome 63

Più registrazioni nel riquadro Rendimento

Il riquadro Rendimento ora ti consente di salvare temporaneamente fino a 5 registrazioni. Le registrazioni vengono eliminate quando chiudi la finestra di DevTools. Consulta Iniziare a utilizzare l'analisi delle prestazioni del runtime per acquisire dimestichezza con il riquadro Prestazioni.

Selezione tra più registrazioni nel riquadro Rendimento.

Figura 12. Selezione tra più registrazioni nel riquadro Rendimento

Bonus: automatizza le azioni di DevTools con Puppeteer 1.0

La versione 1.0 di Puppeteer, uno strumento di automazione del browser gestito dal team di Chrome DevTools, è ora disponibile. Puoi utilizzare Puppeteer per automatizzare molte attività che in precedenza erano disponibili solo tramite DevTools, ad esempio l'acquisizione di screenshot:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

Dispone inoltre di API per molte attività di automazione generalmente utili, come la generazione di PDF:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

Per saperne di più, consulta la guida rapida.

Puoi anche utilizzare Puppeteer per esporre le funzionalità di DevTools durante la navigazione senza mai aprire esplicitamente DevTools. Per un esempio, consulta Utilizzare le funzionalità di DevTools senza aprire DevTools.

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 danno accesso alle ultime funzionalità di DevTools, ti consentono di testare le API delle piattaforme web all'avanguardia e ti aiutano a individuare i problemi sul tuo sito prima che lo facciano gli 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.