Novità di DevTools (Chrome 60)

Ti diamo il benvenuto. Le nuove funzionalità e le modifiche principali che verranno introdotte 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, generano log nella Console e eseguono JavaScript.
• Continua qui. Un nuovo gesto che può velocizzare il flusso di lavoro di debug di 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.
• Le analisi dello stack asincrone sono attive per impostazione predefinita.

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

Nuove funzionalità

Nuovo riquadro 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 in alto per App web progressiva, Rendimento, Accessibilità e Best practice sono i punteggi aggregati per ciascuna di queste categorie. Il resto del report è un'analisi dettagliata di ciascun test che ha determinato i tuoi punteggi. Migliora la qualità della tua pagina web correggendo i test non riusciti.

Figura 1. Un report Lighthouse

Per eseguire il controllo di una pagina:

1. Fai clic sulla scheda Controlli.
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 Controlli.

Lighthouse alla conferenza Google I/O '17

Guarda la presentazione di DevTools del Google I/O 2017 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 su come contribuire, guarda il talk su Lighthouse del Google I/O '17 di seguito.

Hai un'idea per un controllo 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, registrano nella Console ed eseguono JavaScript.

Figura 2. Passa il mouse sopra un badge di terze parti nel riquadro Rete

Figura 3. Passare 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 Struttura ad albero delle chiamate e Dal basso verso l'alto per raggruppare l'attività di registrazione del rendimento in base alle entità di terze parti che hanno causato le attività. Consulta Iniziare a analizzare il rendimento del runtime per scoprire come analizzare il rendimento con DevTools.

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

Un nuovo gesto per andare a qui

Supponiamo che tu abbia messo in pausa il programma sulla riga 25 di uno script e che tu voglia passare alla riga 50. In passato, potevi impostare un punto di interruzione sulla riga 50 o fare clic con il tasto destro del mouse sulla riga e selezionare Continua qui. Ora, però, esiste un gesto più rapido per gestire questo flusso di lavoro.

Quando esegui la procedura passo passo del codice, tieni premuto Comando (Mac) o Control (Windows, Linux) e poi fai clic per continuare con quella riga di codice. DevTools evidenzia in blu le destinazioni a cui è possibile passare.

Figura 5. Continua qui

Consulta Iniziare a eseguire il debug di JavaScript per conoscere le nozioni di base del debug in DevTools.

Esegui istruzione in un blocco asincrono

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 Vai qui funziona anche con il codice asincrono. Quando tieni premuto Comando (Mac) o Control (Windows, Linux), DevTools evidenzia in verde le destinazioni asincrone a cui è possibile saltare.

Per un esempio, guarda la demo di seguito tratta dal talk di DevTools alla conferenza I/O.

Modifiche

Anteprime degli oggetti più informative nella console

In precedenza, quando registravi o valutavi un oggetto nella console, veniva visualizzato soloObject, un'informazione non particolarmente utile. Ora la console fornisce maggiori informazioni sui contenuti dell'oggetto.

Figura 6. In che modo la console utilizzava l'anteprima degli oggetti

Figura 7. In che modo la console ora mostra l'anteprima degli oggetti

Menu di selezione del contesto più informativo nella Console

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

• Il titolo descrive ciascun 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 di selezione del contesto, questo viene evidenziato nel visualizzatore

Aggiornamenti in tempo reale nella scheda Copertura

Quando si registrava la copertura del codice in Chrome 59, la scheda Copertura mostrava solo "Registrazione…", senza alcuna visibilità sul codice in uso. 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 riquadri Rete e Prestazioni sono stati semplificati per includere solo tre opzioni: Offline, 3G lento, che è comune in località come l'India, e 3G veloce, che è comune in località come gli Stati Uniti.

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

Le opzioni di throttling sono state modificate in modo da corrispondere ad altri strumenti di throttling a livello di kernel. DevTools non mostra più le metriche relative a latenza, download e caricamento accanto a ogni opzione, perché questi valori erano fuorvianti. L'obiettivo è 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 sono ora attive per impostazione predefinita. In passato, questa opzione era attivabile a causa del sovraccarico delle prestazioni. Ora l'overhead è sufficientemente minimo da attivare la funzionalità per impostazione predefinita. Se preferisci disattivare le tracce dello stack asincrone, puoi farlo in Impostazioni o eseguendo il comando Do not capture async stack traces nel menu dei comandi.

DevTools alla conferenza Google I/O '17

Guarda la presentazione del mitico Paul Irish di seguito per scoprire di più su ciò su cui ha lavorato il team di DevTools nell'ultimo anno e sui grandi temi che affronterà nel prossimo futuro.

Scaricare i canali di anteprima

Valuta la possibilità di utilizzare Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.

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

Novità di DevTools

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