Questa pagina è stata tradotta dall'API Cloud Translation.

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 del rendimento
Più registrazioni nel riquadro Rendimento
Passaggio di codice affidabile con worker e codice asincrono

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

Nota: controlla quale versione di Chrome è in uso su chrome://version. Se stai eseguendo una versione precedente, queste funzionalità non esisteranno. Se esegui una versione successiva, queste funzionalità potrebbero essere cambiate. Chrome si aggiorna automaticamente a una nuova versione principale ogni sei settimane circa.

Override locali

Gli override locali ti consentono di apportare modifiche in DevTools e di conservarle durante il caricamento delle pagine. In precedenza, tutte le modifiche apportate in DevTools andavano perse quando ricaricavi la pagina. Gli override locali funzionano per la maggior parte dei tipi di file, con un paio di eccezioni. Vedi Limitazioni.

Permanenza di una modifica CSS nei caricamenti pagina con override locali.

Figura 1. Permanere una modifica CSS nei caricamenti pagina con gli override locali

Come funziona:

Devi specificare 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 pubblica il file modificato locale anziché la risorsa di rete.

Per configurare gli override locali:

Apri il riquadro Origini.
Apri la scheda Override.

Figura 2. La scheda Override
Fai clic su Configura override.
Seleziona la directory in cui salvare le modifiche.
Nella parte superiore dell'area visibile, fai clic su Consenti per concedere a DevTools l'accesso in lettura e scrittura alla directory.
Apporta le modifiche.

Limitazioni

DevTools non salva le modifiche apportate nell'albero DOM del riquadro Elementi. Modifica l'HTML nel riquadro Origini.
Se modifichi il codice CSS nel riquadro Stili e la sua origine è un file HTML, DevTools non salverà la modifica. Modifica il file HTML nel riquadro Origini.

Aree di lavoro. DevTools mappa automaticamente le risorse di rete a un repository locale. Ogni volta che apporti una modifica in DevTools, 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. La scheda Modifiche

Utilizza il nuovo riquadro Accessibilità per controllare le proprietà di accessibilità di un elemento e controllare il rapporto di contrasto degli elementi di testo nel Selettore colori per assicurarti che siano accessibili da parte di utenti con disabilità visiva o problemi di visione dei colori.

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

Riquadro 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 nell'albero dell'accessibilità

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

Rapporto di contrasto nel selettore di colori

Il Selettore colori ora mostra il rapporto di contrasto degli elementi di testo. L'aumento del rapporto di contrasto degli elementi di testo rende il tuo sito più accessibile agli utenti con disabilità visiva o carenze di visione dei colori. Consulta Colore e contrasto per ulteriori informazioni 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, i due segni di spunta accanto a 4.61 indicano che questo elemento soddisfa il rapporto di contrasto consigliato (AAA) migliorato. Se fosse presente un solo segno di spunta, significa che ha soddisfatto il rapporto di contrasto (AA) minimo consigliato.

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 rispettano. Ad esempio, poiché il colore grigio nella Figura 6 soddisfa i consigli, significa che anche tutti i colori sotto la linea bianca soddisfano i consigli.

La sezione espansa Rapporto di contrasto.

Figura 6. La sezione Rapporto di contrasto espansa

Il riquadro Controlli prevede un controllo automatico dell'accessibilità per garantire che ogni elemento di testo su 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 riquadro Controlli per testare l'accessibilità.

Nuovi controlli

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

Nuovi controlli SEO

Assicurati che le tue pagine superino tutti i controlli nella nuova categoria SEO può contribuire a migliorare il tuo 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 viene fornito anche con molti nuovi controlli delle prestazioni:

Il tempo di avvio di JavaScript è elevato
Utilizza criteri della cache inefficienti su asset statici
Evita i reindirizzamenti alle pagine
Il documento utilizza plug-in
Minimizza CSS
Minimizza JavaScript

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

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

Altri aggiornamenti

Nuovi controlli manuali dell'accessibilità
Aggiornamenti al controllo WebP per renderlo più inclusivo rispetto ad altri formati delle immagini di nuova generazione
Una rivisitazione 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 nei report

Passaggi del codice affidabili con worker e codice asincrono

In Chrome 65 vengono introdotti aggiornamenti del pulsante Accedi durante l'accesso al codice che trasmette i messaggi tra i thread e al codice asincrono. Se vuoi il comportamento di passaggio precedente, puoi utilizzare il nuovo pulsante Passaggio .

Inserimento di 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 essere entrato nella chiamata postMessage() nel thread principale, DevTools mette in pausa nel gestore onmessage del thread worker. Lo stesso gestore onmessage pubblica un messaggio nel thread principale. L'accesso a quel chiamata mette in pausa DevTools nel thread principale.

Passaggio al codice per la trasmissione dei messaggi in Chrome 65.

Figura 8. Passaggio al codice per la trasmissione dei messaggi in Chrome 65

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

Passaggio al codice per la trasmissione dei messaggi in Chrome 63.

Figura 9. Passaggio al codice per la trasmissione dei messaggi in Chrome 63

Passaggio al codice asincrono

Quando passi al codice asincrono, DevTools ora presuppone che tu voglia mettere in pausa il codice asincrono che viene eseguito.

Ad esempio, nella Figura 10 dopo l'accesso a setTimeout(), DevTools esegue tutto il codice fino a quel momento in background, quindi mette in pausa la funzione passata a setTimeout().

Passaggio al codice asincrono in Chrome 65.

Figura 10. Passaggio al codice asincrono in Chrome 65

Quando hai eseguito l'accesso a un codice come questo in Chrome 63, DevTools ha messo in pausa il codice mentre veniva eseguito cronologicamente, come puoi vedere nella Figura 11.

Passaggio al codice asincrono in Chrome 63.

Figura 11. Come eseguire il 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 alla chiusura della finestra di DevTools. Consulta Guida introduttiva all'analisi delle prestazioni del runtime per acquisire dimestichezza con il riquadro Prestazioni.

Scegliere tra più registrazioni nel riquadro Rendimento.

Figura 12. Scegliere 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 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 scoprire di più, consulta la Guida rapida.

Puoi anche usare 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 ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di 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 usando 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.