Novità di DevTools (Chrome 65)

Kayce Basques

Le nuove funzionalità in arrivo in DevTools in Chrome 65 includono:

• Override locali
• Nuovi strumenti di accessibilità
• Scheda Modifiche
• Nuovi controlli SEO e delle prestazioni
• Più registrazioni nel riquadro Rendimento
• Esecuzione passo passo affidabile del codice con i worker e il codice asincrono

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

Override locali

Gli override locali ti consentono di apportare modifiche in DevTools e di mantenerle durante i caricamenti di pagina. In precedenza, tutte le modifiche apportate in DevTools andavano perse al ricaricamento della pagina. Gli override locali funzionano per la maggior parte dei tipi di file, con alcune eccezioni. Vedi Limitazioni.

Figura 1. Mantenere una modifica CSS tra i caricamenti di pagina con Override locali

Come funziona:

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

Per configurare gli override locali:

1. Apri il riquadro Origini.

2. Apri la scheda Override.

   

   Figura 2. La scheda Override

3. Fai clic su Override configurazione.

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

5. Nella parte superiore della finestra, 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 all'albero DOM del riquadro Elementi. Modifica il codice HTML nel riquadro Origini.
• Se modifichi il CSS nel riquadro Stili e l'origine del CSS è un file HTML, DevTools non salverà la modifica. Modifica il file HTML nel riquadro Origini.

Funzionalità correlate

• Workspaces. DevTools mappa automaticamente le risorse di rete a un repository locale. Ogni volta che apporti una modifica in DevTools, questa viene salvata anche nel repository locale.

Scheda Modifiche

Tieni traccia delle modifiche apportate localmente in DevTools tramite la nuova scheda Modifiche.

Figura 3. Scheda Modifiche

Nuovi strumenti di accessibilità

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

Pannello Accessibilità

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

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

Guarda l'A11ycast di Rob Dodson sull'etichettatura qui sotto per vedere il riquadro Accessibilità in azione.

Rapporto di 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 problemi di vista o discromatopsia. Consulta la sezione Colore e contrasto per scoprire di più su come il rapporto di contrasto influisce sull'accessibilità.

Migliorare il contrasto dei colori degli elementi di testo rende il tuo sito più utilizzabile per tutti gli utenti. In altre parole, se il testo è grigio su sfondo bianco, è difficile da leggere per chiunque.

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

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

Fai clic su 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 in Figura 6 soddisfa i consigli, significa che anche tutti i colori sotto la linea bianca soddisfano i consigli.

Figura 6. La sezione espansa Rapporto di contrasto

Funzionalità correlate

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

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

Nuovi controlli

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

Nuovi controlli SEO

Assicurarsi che le tue pagine superino ciascuno dei controlli nella nuova categoria SEO può contribuire a migliorare il ranking nei motori di ricerca.

Figura 7. La nuova categoria di controlli SEO

Nuovi audit sul rendimento

Chrome 65 include anche molti nuovi controlli delle prestazioni:

• Il tempo di avvio di JavaScript è elevato
• Vengono usate policy della cache inefficienti per le risorse statiche
• Evita i reindirizzamenti delle pagine
• Il documento utilizza plug-in
• Minimizza CSS
• Minimizza JavaScript

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

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

Altri aggiornamenti

• Nuovi controlli di accessibilità manuali
• Aggiornamenti al controllo WebP per renderlo più inclusivo di altri formati di immagine di nuova generazione
• Rinnovamento del punteggio di accessibilità
• Se un controllo dell'accessibilità non è applicabile a una pagina, non viene più conteggiato ai fini del punteggio di accessibilità
• Il rendimento è ora la sezione principale dei report

Esecuzione passo passo affidabile del codice con i worker e il codice asincrono

Chrome 65 introduce aggiornamenti al pulsante Step Into quando si esegue il debug passo passo del codice che passa messaggi tra thread e del codice asincrono. Se vuoi il comportamento di avanzamento precedente, puoi utilizzare il nuovo pulsante Passo .

Passare al codice che trasferisce i messaggi tra i thread

Quando esegui il debug del codice che passa messaggi tra i thread, DevTools ora mostra cosa succede in ogni thread.

Ad esempio, l'app nella Figura 8 passa un messaggio tra il thread principale e il thread worker. Dopo essere entrato nella chiamata postMessage() sul thread principale, DevTools si mette in pausa nel gestore onmessage nel thread del worker. Il gestore onmessage pubblica un messaggio nel thread principale. L'esecuzione del codice nella chiamata mette in pausa DevTools nel thread principale.

Figura 8. Passaggio al codice di passaggio dei messaggi in Chrome 65

Quando esegui il debug di un codice come questo nelle versioni precedenti di Chrome, Chrome mostrava solo il lato del codice del thread principale, come puoi vedere nella Figura 9.

Figura 9. Passaggio al codice di passaggio dei messaggi in Chrome 63

Eseguire il debug passo passo del codice asincrono

Quando esegui l'istruzione passo-passo nel codice asincrono, DevTools ora presuppone che tu voglia mettere in pausa il codice asincrono che verrà eseguito.

Ad esempio, nella Figura 10, dopo aver eseguito il passo successivo in setTimeout(), DevTools esegue tutto il codice fino a quel punto in background, quindi si interrompe nella funzione passata a setTimeout().

Figura 10. Esecuzione passo passo del codice asincrono in Chrome 65

Quando entravi in un codice come questo in Chrome 63, DevTools si metteva in pausa nel codice mentre veniva eseguito in ordine cronologico, come puoi vedere nella Figura 11.

Figura 11. Eseguire il debug del codice asincrono in Chrome 63

Più registrazioni nel riquadro Prestazioni

Il riquadro Rendimento ora ti consente di salvare temporaneamente fino a 5 registrazioni. Le registrazioni vengono eliminate quando chiudi la finestra DevTools. Consulta Iniziare ad analizzare le prestazioni di runtime per acquisire familiarità con il riquadro Rendimento.

Figura 12. Selezione tra più registrazioni nel riquadro Rendimento

Bonus: automatizza le azioni di DevTools con Puppeteer 1.0

È ora disponibile la versione 1.0 di Puppeteer, uno strumento di automazione del browser gestito dal team di Chrome DevTools. Puoi utilizzare Puppeteer per automatizzare molte attività che in precedenza erano disponibili solo tramite DevTools, come 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 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.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema di DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet a @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti di DevTools.

Novità di DevTools

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