Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di DevTools (Chrome 65)

Kayce Basques

Le nuove funzionalità che saranno disponibili in DevTools in Chrome 65 includono:

Override locali
Nuovi strumenti di accessibilità
Scheda Modifiche
Nuovi controlli della SEO e del rendimento
Più registrazioni nel riquadro Rendimento
Passaggio del codice affidabile con worker e codice asincrono

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

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

Override locali

Gli override locali ti consentono di apportare modifiche in DevTools e di mantenerle durante i caricamenti delle pagine. In precedenza, qualsiasi modifica apportata in DevTools andava persa quando ricarichi la pagina. Gli override locali funzionano per la maggior parte dei tipi di file, con un paio di eccezioni. Consulta le Limitazioni.

Permanere una modifica CSS tra i caricamenti delle pagine con gli override locali.

Figura 1. Permettere una modifica CSS nei caricamenti delle pagine con override 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 pubblica il file locale modificato anziché la risorsa di rete.

Per configurare le sostituzioni locali:

Apri il riquadro Origini.
Apri la scheda Sostituzioni.

Figura 2. La scheda Sostituzioni
Fai clic su Configura override.
Seleziona la directory in cui vuoi 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 il codice HTML nel riquadro Origini.
Se modifichi il CSS nel riquadro Stili e l'origine di questo CSS è 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, questa viene salvata anche nel tuo repository locale.

La scheda Modifiche

Tieni traccia delle modifiche apportate a livello locale in DevTools tramite la nuova scheda Modifiche.

La scheda Modifiche

Figura 3. La scheda Modifiche

Usa il nuovo riquadro Accessibilità per esaminare 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 a utenti con disabilità visiva o difetti di visione dei colori.

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

Il riquadro Accessibilità

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

Dai un'occhiata all'A11ycast di Rob Dodson sulle etichette 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 del testo. L'aumento del rapporto di contrasto degli elementi di testo rende il tuo sito più accessibile agli utenti ipovedenti o con problemi di visione dei colori. Consulta la sezione Colore e contrasto per scoprire di più su come il rapporto di contrasto influisce sull'accessibilità.

Migliorando il contrasto di colore degli elementi di testo, rende il tuo sito più utilizzabile per tutti gli utenti. In altre parole, se il testo è grigio con sfondo bianco, è difficile da leggere per tutti.

Ispezione del rapporto di contrasto dell'elemento H1 evidenziato.

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

Nella Figura 5, i due segni di spunta accanto a 4.61 indicano che l'elemento soddisfa il rapporto di contrasto consigliato (AAA). Se avesse un solo segno di spunta, significa che soddisfa 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 cromatico 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, ciò significa che anche tutti i colori sotto la linea bianca soddisfano i consigli.

La sezione espansa Rapporto di contrasto.

Figura 6. Sezione Rapporto di contrasto espansa

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

Consulta l'articolo Eseguire Lighthouse in Chrome DevTools o guarda la sezione 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

Assicurarti che le tue pagine superino tutti i controlli nella nuova categoria SEO può contribuire a migliorare i ranking del tuo motore di ricerca.

La nuova categoria di controlli SEO.

Figura 7. La nuova categoria di controlli SEO

Nuovi controlli del rendimento

Chrome 65 è inoltre dotato di molti nuovi controlli delle prestazioni:

Il tempo di avvio di JavaScript è elevato
Utilizza criteri relativi alla cache inefficienti per gli asset statici
Evita i reindirizzamenti di pagine
Il documento utilizza plug-in
Minimizza CSS
Minimizza JavaScript

La performance conta. Dopo che Mynet ha quadruplicato 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 la visualizzazione di pagina di ogni articolo. Scopri di più.

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

Altri aggiornamenti

Nuovi controlli di accessibilità manuali
Aggiornamenti al controllo WebP per renderlo più inclusivo rispetto ad altri formati delle immagini di nuova generazione
Un riesame del punteggio di accessibilità
Se un controllo di accessibilità non è applicabile a una pagina, non viene più conteggiato ai fini del punteggio di accessibilità.
Ora il rendimento è la sezione in alto nei report

Passaggi di codice affidabili con worker e codice asincrono

Chrome 65 introduce aggiornamenti anche per il pulsante Step Into quando si entra nel codice che trasmette i messaggi tra i thread e il codice asincrono. Se vuoi il comportamento dei passaggi precedente, puoi utilizzare invece il nuovo pulsante Passaggio .

Inserimento del codice che consente il passaggio dei messaggi tra i thread

Quando entri nel codice che passa i messaggi da un thread all'altro, 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 di lavoro. Dopo aver eseguito l'accesso alla chiamata postMessage() sul thread principale, DevTools si mette in pausa nel gestore onmessage nel thread di lavoro. Il gestore onmessage pubblica un messaggio nel thread principale. L'intervento in questa chiamata mette in pausa DevTools nel thread principale.

Entrare nel codice per la trasmissione dei messaggi in Chrome 65.

Figura 8. Eseguire l'accesso al codice per la trasmissione dei messaggi in Chrome 65

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

Entrare nel codice per la trasmissione dei messaggi in Chrome 63.

Figura 9. Eseguire l'accesso al codice per la trasmissione dei messaggi in Chrome 63

Entrare nel codice asincrono

Quando entri 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 l'accesso a setTimeout(), DevTools esegue tutto il codice da quel momento dietro le quinte e poi si ferma nella funzione passata a setTimeout().

Analisi del codice asincrono in Chrome 65.

Figura 10. Entrare nel codice asincrono in Chrome 65

Quando hai inserito un codice come questo in Chrome 63, DevTools si è messo in pausa nel codice durante l'esecuzione cronologica, come puoi vedere nella Figura 11.

Analisi del codice asincrono in Chrome 63.

Figura 11. Entrare nel codice asincrono in Chrome 63

Più registrazioni nel riquadro Rendimento

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

Scegli tra più registrazioni nel riquadro Prestazioni.

Figura 12. Scegliere tra più registrazioni nel riquadro Rendimento.

Bonus: automatizza le azioni DevTools con Puppeteer 1.0

È ora disponibile la versione 1.0 di Puppeteer, uno strumento di automazione del browser gestito dal team Chrome DevTools. Puoi usare 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 ulteriori informazioni, 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 Utilizzo delle funzionalità di DevTools senza aprire DevTools.

Scarica i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o beta come browser di sviluppo predefinito. Questi canali in anteprima ti consentono di accedere alle funzionalità di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.

Inviaci un suggerimento o un feedback tramite crbug.com.
Segnala un problema DevTools utilizzando Altre opzioni > Guida > Segnala i problemi di DevTools in DevTools.
Tweet all'indirizzo @ChromeDevTools.
Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.