Novità di DevTools (Chrome 60)

Ti diamo il benvenuto. Le nuove funzionalità e i cambiamenti principali in arrivo per DevTools in Chrome 60 includono:

• Un nuovo riquadro Controlli che include test per app web progressive, rendimento, accessibilità e best practice.
• Badge di terze parti. Scopri quali terze parti effettuano richieste di rete, accedendo al Console ed esecuzione di JavaScript.
• Continua fino a qui. Un nuovo gesto che può velocizzare il flusso di lavoro di debug di JavaScript.
• Debug prevedibile per il codice 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 rete più semplici.
• Le analisi dello stack asincrone sono attive per impostazione predefinita.

di Gemini Advanced.

Dai un'occhiata alla versione video delle note di rilascio qui sotto oppure continua a leggere per ulteriori informazioni.

Nuove funzionalità

Nuovo riquadro Audit, basato su Lighthouse

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

I punteggi in alto per App web progressiva, Rendimento, Accessibilità e Best practice sono i punteggi aggregati per ciascuno di questi categorie. Il resto del report è un'analisi dettagliata di ciascuno dei 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 controllare 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 esegue i test sulla pagina, quindi visualizza i risultati nel riquadro Controlli.

Lighthouse alla conferenza Google I/O '17

Dai un'occhiata alla discussione su DevTools durante Google I/O '17 di seguito per scoprire di più sull'integrazione di Lighthouse in DevTools.

Dai il tuo contributo a Lighthouse

Lighthouse è un progetto open source. Per saperne di più su come funziona e su come contribuire guarda la presentazione su Lighthouse di Google I/O '17 di seguito.

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 un accedendo alla console ed eseguendo JavaScript.

Figura 2. Passare 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 In basso per raggruppare il rendimento Registrazione dell'attività da parte di entità di terze parti che le hanno generate. Consulta la Guida introduttiva a Analisi delle prestazioni di runtime per scoprire come analizzare le prestazioni con DevTools.

Figura 4. Raggruppamento per prodotto nella scheda Bottom-Up

Un nuovo gesto per Vai a qui

Supponiamo che tu sia in pausa alla riga 25 di uno script e voglia passare alla riga 50. In passato, potevi imposta un punto di interruzione sulla riga 50 oppure fai clic con il tasto destro del mouse sulla linea e seleziona Continua fino a qui. Ma ora è disponibile un gesto più rapido per gestire questo flusso di lavoro.

Durante la lettura del codice, tieni premuto Command (Mac) o Ctrl (Windows, Linux) e quindi fai clic per passare alla riga di codice corrispondente. DevTools evidenzia in blu le destinazioni saltabili.

Figura 5. Continua fino a qui

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

Esegui il passaggio all'asinc

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

Il nuovo gesto per Vai a qui funziona anche con il codice asincrono. Quando tieni premuto Command (Mac) o Ctrl (Windows, Linux), DevTools mette in evidenza i collegamenti saltabili le destinazioni asincrone in verde.

Dai un'occhiata alla demo di seguito dal discorso di DevTools alla conferenza I/O per avere un esempio.

Modifiche

Anteprime con informazioni più dettagliate degli oggetti nella console

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

Figura 6. Utilizzo della console per visualizzare l'anteprima degli oggetti

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

Menu di selezione contestuale più informativo nella console

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

• Il titolo descrive di cosa si tratta.
• Il sottotitolo sotto il titolo descrive il dominio da cui proviene l'articolo.
• Passa il mouse sopra un contesto iframe per evidenziarlo nell'area visibile.

Figura 8. Se passi il mouse su un iframe nel nuovo menu di selezione del contesto, questo viene evidenziato nella area visibile

Aggiornamenti in tempo reale nella scheda Copertura

Quando si registra la copertura del codice in Chrome 59, nella scheda Copertura viene visualizzato solo "Registrazione...", senza visibilità sul codice utilizzato. La scheda Copertura mostra ora i report in tempo reale quale codice viene usato.

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 rete più semplici

I menu per la limitazione della rete nei riquadri Rete e Prestazioni sono stati semplificati in includono solo tre opzioni: Offline, 3G lento, comune in alcune zone, come l'India, e 3G veloce, comune in luoghi come gli Stati Uniti.

Figura 11. Le nuove opzioni di limitazione della rete

Le opzioni di limitazione sono state modificate per corrispondere ad altri strumenti di limitazione a livello di kernel. DevTools non mostra le metriche di latenza, download e caricamento accanto a ciascuna opzione, perché questi valori sono fuorvianti. L'obiettivo è corrispondere all'esperienza reale di ciascuna opzione.

Gli stack asincroni sono attivi per impostazione predefinita

La casella di controllo Async è stata rimossa dal riquadro Async. Le analisi dello stack asincrone sono ora attive per predefinito. In passato, questa opzione era attivabile a causa dell'overhead del rendimento. L'overhead adesso è minimo sufficiente per abilitare la funzionalità per impostazione predefinita. Se preferisci che le analisi dello stack asincrone siano disabilitate, puoi disattivarle in Impostazioni o eseguendo il Do not capture async stack traces nel menu Comandi.

DevTools alla conferenza Google I/O '17

Dai un'occhiata al discorso del mitico Paul irlandese qui sotto per saperne di più sul team di DevTools a cui ha lavorato nell'ultimo anno e dei grandi temi che affronteranno 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 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.