Novità di DevTools (Chrome 65)

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.

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. Locale L'override funziona per la maggior parte dei tipi di file, con un paio di eccezioni. Vedi Limitazioni.

Figura 1. persistere una modifica CSS nei caricamenti pagina con 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 locale modificato, anziché la rete. risorsa.

Per configurare gli override locali:

1. Apri il riquadro Origini.

2. Apri la scheda Override.

   

   Figura 2. La scheda Override

3. Fai clic su Configura override.

4. Seleziona la directory in cui salvare le modifiche.

5. Nella parte superiore dell'area visibile, fai clic su Consenti per concedere a DevTools l'accesso in lettura e scrittura al .

6. Apporta le modifiche.

Limitazioni

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

Funzionalità correlate

• Aree di lavoro. DevTools mappa automaticamente le risorse di rete a un repository locale. Ogni volta che una modifica in DevTools, quest'ultima viene salvata anche nel tuo repository locale.

La scheda Modifiche

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

Figura 3. La scheda Modifiche

Nuovi strumenti di accessibilità

Utilizza il nuovo riquadro Accessibilità per esaminare le proprietà di accessibilità di un elemento e Controlla il rapporto di contrasto degli elementi di testo nel selettore colori per assicurarti che siano accessibili a utenti con disabilità visiva o discromatopsia.

Riquadro 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 il attualmente selezionato nell'albero DOM del riquadro Elementi, così come il relativo 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. Aumentare il contrasto rapporto degli elementi di testo rende il sito più accessibile agli utenti con disabilità visiva o di visione artificiale. Per ulteriori informazioni sul rapporto di contrasto, consulta la sezione Colore e contrasto. influisce sull'accessibilità.

Se aumenti il contrasto di colore degli elementi del testo, il tuo sito può essere utilizzato da tutti gli utenti. Nella altre parole, se il testo è grigio con sfondo bianco, risulta 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 le rapporto di contrasto consigliato (AAA). Se avesse un solo segno di spunta, significa che soddisfa il Rapporto di contrasto minimo (AA) consigliato.

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

Figura 6. La sezione Rapporto di contrasto espansa

Funzionalità correlate

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

Consulta Eseguire Lighthouse in Chrome DevTools o guarda l'A11ycast di seguito per scoprire come utilizzare lo strumento Riquadro dei 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

Se assicurati che le tue pagine superino tutti i controlli nella nuova categoria SEO, puoi migliorare il tuo ranking nei motori di ricerca.

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 dedicato il 43% in più di tempo alla sito, visualizzato il 34% in più di pagine, la frequenza di rimbalzo è diminuita del 24% e le entrate sono aumentate del 25% per articolo visualizzazione di pagina. Scopri di più.

Suggerimento Se vuoi migliorare il rendimento di caricamento delle tue pagine, ma non sai da dove iniziare, prova il riquadro Controlli. Gli assegni un URL per ottenere un report dettagliato su molti 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 calcolo punteggio di accessibilità
• Il rendimento è ora la sezione principale nei report

Passaggi del codice affidabili con worker e codice asincrono

Chrome 65 introduce aggiornamenti per Step In Pulsante quando entri in codice che passa i messaggi tra i thread e codice asincrono. Se vuoi il passaggio precedente comportamento predefinito, puoi utilizzare il nuovo 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 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 nella chiamata onmessage nel thread di lavoro. Lo stesso gestore onmessage pubblica un messaggio nella pagina principale . L'accesso a quel chiamata mette in pausa DevTools nel thread principale.

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 ti mostrava solo del codice, come mostrato nella Figura 9.

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

Passaggio al codice asincrono

Quando passi al codice asincrono, ora DevTools 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 punto dietro le quinte, per poi fare una pausa nella funzione passata setTimeout().

Figura 10. Passaggio al codice asincrono in Chrome 65

Quando entravi in un codice come questo in Chrome 63, DevTools si metteva in pausa nel codice in ordine cronologico. come mostrato nella Figura 11.

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 sono viene eliminata alla chiusura della finestra DevTools. Consulta la guida introduttiva all'analisi del runtime Prestazioni per acquisire dimestichezza con il 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 fuori. Puoi usare Puppeteer per automatizzare molte attività che in precedenza erano disponibili solo tramite DevTools. ad esempio acquisire 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 esservi esplicitamente apertura di 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 in anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e 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 utilizzando 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.

Novità di DevTools

Un elenco di tutto ciò che è stato trattato nella serie Novità di DevTools.