Novità di DevTools (Chrome 60)

Ti diamo il benvenuto. Le nuove funzionalità e le modifiche principali in arrivo in DevTools in Chrome 60 includono:

• Un nuovo riquadro Controlli, che include test per app web progressive, prestazioni, accessibilità e best practice.
• Badge di terze parti. Scopri quali terze parti effettuano richieste di rete, registrano i dati nella console ed eseguono JavaScript.
• Continua fino a qui. Un nuovo gesto che può accelerare il flusso di lavoro di debug JavaScript.
• Debug prevedibile per JavaScript asincrono.
• Anteprime degli oggetti nella console.
• Aggiornamenti in tempo reale nella scheda Copertura.
• Un nuovo menu per selezionare i contesti nella console.
• Opzioni di limitazione della larghezza di banda della rete più semplici.
• Analisi dello stack asincrone attive per impostazione predefinita.

Guarda la versione video di queste note di rilascio qui sotto o continua a leggere per saperne di più.

Nuove funzionalità

Nuovo pannello Controlli, basato su Lighthouse

Il riquadro Controlli ora è basato su Lighthouse. Lighthouse fornisce un insieme completo di test per misurare la qualità delle tue pagine web.

I punteggi nella parte superiore per app web progressiva, rendimento, accessibilità e best practice sono i punteggi aggregati per ciascuna di queste categorie. Il resto del report è una suddivisione di ciascuno dei test che hanno determinato i tuoi punteggi. Migliora la qualità della tua pagina web correggendo i test non superati.

Figura 1. Un report Lighthouse

Per controllare una pagina:

1. Fai clic sulla scheda Audit.
2. Fai clic su Esegui un controllo.
3. Fai clic su Esegui controllo. Lighthouse configura DevTools per emulare un dispositivo mobile, esegue una serie di test sulla pagina e poi mostra i risultati nel riquadro Audit.

Lighthouse alla conferenza Google I/O 2017

Guarda la presentazione di DevTools di Google I/O '17 riportata di seguito per scoprire di più sull'integrazione di Lighthouse in DevTools.

Contribuire a Lighthouse

Lighthouse è un progetto open source. Per scoprire di più su come funziona e come contribuire, guarda il talk su Lighthouse di Google I/O 2017 qui sotto.

Hai un'idea per un controllo di Lighthouse? Pubblicalo qui.

Badge di terze parti

Utilizza i badge di terze parti per ottenere maggiori informazioni sulle entità che effettuano richieste di rete su una pagina, accedono alla console ed eseguono JavaScript.

Figura 2. Passaggio del mouse sopra un badge di terze parti nel riquadro Rete

Figura 3. Passando il mouse sopra un badge di terze parti nella console

Per attivare i badge di terze parti:

1. Apri il menu dei comandi.
2. Esegui il comando Show third party badges.

Utilizza l'opzione Raggruppa per prodotto nelle schede Albero delle chiamate e Dal basso verso l'alto per raggruppare l'attività di registrazione delle prestazioni in base alle entità di terze parti che hanno causato le attività. Consulta Iniziare ad analizzare le prestazioni di runtime per scoprire come analizzare le prestazioni con DevTools.

Figura 4. Raggruppamento per prodotto nella scheda Dal basso verso l'alto

Un nuovo gesto per Continua da qui

Supponiamo che tu abbia messo in pausa la riproduzione alla riga 25 di un copione e che tu voglia passare alla riga 50. In passato, potevi impostare un punto di interruzione alla riga 50 o fare clic con il tasto destro del mouse sulla riga e selezionare Continua fino a qui. Ma ora esiste un gesto più rapido per gestire questo flusso di lavoro.

Quando esegui il codice passo passo, tieni premuto Command (Mac) o Control (Windows, Linux) e poi fai clic per continuare fino a quella riga di codice. DevTools evidenzia in blu le destinazioni raggiungibili.

Figura 5. Continua fino a qui

Consulta Inizia a eseguire il debug di JavaScript per scoprire le nozioni di base del debug in DevTools.

Passare ad async

Un tema importante per il team di DevTools nel prossimo futuro è rendere prevedibile il debug del codice asincrono e fornire una cronologia completa dell'esecuzione asincrona.

Il nuovo gesto per Continua qui funziona anche con il codice asincrono. Quando tieni premuto Command (Mac) o Control (Windows, Linux), DevTools evidenzia in verde le destinazioni asincrone a cui è possibile passare.

Per un esempio, guarda la demo riportata di seguito della presentazione di DevTools all'I/O.

Modifiche

Anteprime degli oggetti più informative nella console

In precedenza, quando registravi o valutavi un oggetto nella console, quest'ultima visualizzava solo Object, il che non è particolarmente utile. Ora la console fornisce maggiori informazioni sui contenuti dell'oggetto.

Figura 6. Come veniva utilizzata la console per visualizzare l'anteprima degli oggetti

Figura 7. Come vengono visualizzati in anteprima gli oggetti nella console

Menu di selezione del contesto più informativo nella console

Il menu di selezione del contesto della console ora fornisce maggiori informazioni sui contesti disponibili.

• Il titolo descrive ogni elemento.
• Il sottotitolo sotto il titolo descrive il dominio da cui proviene l'elemento.
• Passa il mouse sopra un contesto iframe per evidenziarlo nell'area visibile.

Figura 8. Se passi il mouse sopra un iframe nel nuovo menu Selezione contesto, questo viene evidenziato nella visualizzazione

Aggiornamenti in tempo reale nella scheda Copertura

Quando si registra la copertura del codice in Chrome 59, la scheda Copertura mostrava solo "Registrazione…", senza visibilità sul codice utilizzato. Ora, la scheda Copertura mostra in tempo reale il codice in uso.

Figura 9. Caricamento e interazione con una pagina utilizzando la vecchia scheda Copertura

Figura 10. Caricamento e interazione con una pagina utilizzando la nuova scheda Copertura

Opzioni di limitazione della larghezza di banda della rete più semplici

I menu di limitazione della rete nei pannelli Rete e Rendimento sono stati semplificati per includere solo tre opzioni: Offline, 3G lento, comune in paesi come l'India, e 3G veloce, comune in paesi come gli Stati Uniti.

Figura 11. Le nuove opzioni di limitazione della larghezza di banda della rete

Le opzioni di limitazione sono state modificate in modo che corrispondano ad altri strumenti di limitazione a livello di kernel. DevTools non mostra più le metriche di latenza, download e caricamento accanto a ogni opzione, perché questi valori erano fuorvianti. L'obiettivo è quello di abbinare l'esperienza reale di ogni opzione.

Stack asincroni attivi per impostazione predefinita

La casella di controllo Asincrono è stata rimossa dal riquadro Origini. Le analisi dello stack asincrone ora sono attive per impostazione predefinita. In passato, questa opzione era attivabile a causa del sovraccarico delle prestazioni. L'overhead è ora sufficientemente minimo da consentire l'attivazione della funzionalità per impostazione predefinita. Se preferisci disattivare le tracce dello stack asincrono, puoi farlo in Impostazioni o eseguendo il comando Do not capture async stack traces nel menu dei comandi.

DevTools a Google I/O 2017

Guarda il discorso del mitico Paul Irish qui sotto per scoprire di più su cosa ha fatto il team di DevTools nell'ultimo anno e sui grandi temi che affronterà nel prossimo futuro.

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.