Novità di DevTools (Chrome 60)

Ti diamo il benvenuto. Le nuove funzionalità e i principali cambiamenti che verranno introdotti in DevTools in Chrome 60 includono:

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

Nuove funzionalità

Nuovo pannello Controlli, basato su Lighthouse

Il riquadro Controlli ora si basa su Lighthouse. Lighthouse offre una serie completa di test per la misurazione della qualità delle pagine web.

I punteggi in alto per App web progressive, Prestazioni, Accessibilità e Best practice sono i punteggi aggregati per ciascuna di queste categorie. Il resto del report contiene un'analisi dettagliata di ogni test che ha determinato i tuoi punteggi. Migliora la qualità della tua pagina web correggendo i test non riusciti.

Un report Lighthouse

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 gli strumenti DevTools per emulare un dispositivo mobile, esegue una serie di test sulla pagina, quindi mostra i risultati nel riquadro Controlli.

Lighthouse alla conferenza Google I/O '17

Dai un'occhiata alla presentazione di DevTools all'evento 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 scoprire di più su come funziona e su come contribuire, dai un'occhiata alla conferenza su Lighthouse di Google I/O '17.

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.

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

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

Passa il mouse sopra un badge di terze parti nella console

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

Per attivare i badge di terze parti:

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

Utilizza l'opzione Raggruppa per prodotto nelle schede Struttura ad albero delle chiamate e Bottom-up per raggruppare le attività di registrazione del rendimento in base alle entità di terze parti che hanno generato le attività. Consulta la guida introduttiva all'analisi delle prestazioni del runtime per scoprire come analizzare le prestazioni con DevTools.

Raggruppamento per prodotto nella scheda Dal basso verso l'alto

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

Un nuovo gesto per Vai qui

Supponiamo che tu stia mettendo in pausa la riga 25 di uno script e voglia passare alla riga 50. In passato, potevi impostare un punto di interruzione alla riga 50 oppure fare clic con il tasto destro del mouse sulla riga e selezionare Continua fino a qui. Ma ora c'è un gesto più rapido per gestire questo flusso di lavoro.

Durante la visualizzazione del codice, tieni premuto Comando (Mac) o Ctrl (Windows, Linux), quindi fai clic per proseguire con la riga di codice corrispondente. DevTools mette in evidenza le destinazioni saltabili in blu.

Continua su qui

Figura 5. Continua fino a qui

Consulta la guida introduttiva al debug di JavaScript per apprendere le nozioni di base sul debug in DevTools.

Entra in modalità asincrona

Uno degli argomenti principali per il team DevTools nel prossimo futuro sarà rendere prevedibile il debug del codice asincrono e fornirti una cronologia completa dell'esecuzione asincrona.

Il nuovo gesto per andare qui funziona anche con il codice asincrono. Quando tieni premuto Command (Mac) o Control (Windows, Linux), DevTools evidenzia le destinazioni asincrone saltabili in verde.

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

Modifiche

Anteprime di oggetti più informative nella console

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

In che modo la console è stata utilizzata per visualizzare l'anteprima degli oggetti

Figura 6. In che modo la console è stata utilizzata per visualizzare l'anteprima degli oggetti

In che modo la console ora visualizza 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 Selezione contestuale 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'elemento.
  • Passa il mouse sopra un contesto iframe per evidenziarlo nell'area visibile.

Il nuovo menu Selezione contestuale

Figura 8. Se passi il mouse sopra un iframe nel nuovo menu Selezione contestuale, lo evidenzia nell'area visibile

Aggiornamenti in tempo reale nella scheda Copertura

Durante la registrazione della copertura del codice in Chrome 59, nella scheda Copertura veniva visualizzato solo il messaggio "Registrazione...", senza visibilità sul codice utilizzato. Ora la scheda Copertura mostra in tempo reale il codice utilizzato.

Caricamento e interazione con una pagina tramite la precedente scheda Copertura

Figura 9. Caricamento e interazione con una pagina tramite la precedente scheda Copertura

Caricamento e interazione con una pagina tramite la nuova scheda Copertura

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

Opzioni di limitazione della rete più semplici

I menu relativi alla limitazione della rete nei riquadri Rete e Prestazioni sono stati semplificati per includere solo tre opzioni: Offline, 3G lento, un'interazione comune in India, e 3G veloce, diffusa in paesi come gli Stati Uniti.

Le nuove opzioni di limitazione della rete

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 più le metriche di latenza, download e caricamento accanto a ciascuna opzione, poiché questi valori erano fuorvianti. L'obiettivo è garantire la reale esperienza di ciascuna opzione.

Stack asincroni attivi per impostazione predefinita

La casella di controllo Async è stata rimossa dal riquadro Origini. Le analisi dello stack asincrone sono ora attive per impostazione predefinita. In passato, questa opzione era attiva a causa del sovraccarico del rendimento. L'overhead è ora sufficientemente minimo da abilitare la funzionalità per impostazione predefinita. Se preferisci che le analisi dello stack asincrone siano disabilitate, puoi disattivarle nelle Impostazioni o eseguendo il comando Do not capture async stack traces nel menu Comando.

DevTools alla conferenza Google I/O '17

Dai un'occhiata al discorso del mitico Paul irlandese qui sotto per saperne di più su cosa ha lavorato il team DevTools nell'ultimo anno e sui grandi temi che dovrà affrontare nel prossimo futuro.

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   Altre   > 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.

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.

Chrome 123

Chrome 122

Guida introduttiva di Chrome

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Versione 115 di Chrome

Chrome 114

Chrome 113

Chrome 112

Guida introduttiva di Chrome

Versione 110 di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome versione 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

Chrome versione 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome versione 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59