Novità di DevTools (Chrome 68)

Kayce Basques

Novità di DevTools in Chrome 68:

• Valutazione eager. Mentre digiti le espressioni, la console mostra un'anteprima del risultato.
• Suggerimenti per gli argomenti. Mentre digiti le funzioni, la console mostra gli argomenti previsti per quella funzione.
• Completamento automatico delle funzioni. Dopo aver digitato una chiamata di funzione come document.querySelector('p'), la console mostra le funzioni e le proprietà supportate dal valore restituito.
• Parole chiave ES2017 nella console. Parole chiave come await sono ora disponibili nell'interfaccia utente del completamento automatico della console.
• Lighthouse 3.0 nel riquadro Controlli. Controlli più rapidi e coerenti, una nuova UI e nuovi controlli.
• L'assistenza BigInt. Prova il nuovo numero intero a precisione arbitraria di JavaScript nella console.
• Aggiunta di percorsi proprietà al riquadro Monitora. Aggiungi le proprietà dal riquadro Ambito al riquadro Monitora.
• L'opzione "Mostra i timestamp" è stata spostata in Impostazioni.

Continua a leggere o guarda la versione video delle note di rilascio di seguito.

Console di assistenza

Chrome 68 include alcune nuove funzionalità di Console relative al completamento automatico e all'anteprima.

Valutazione eager

Quando digiti un'espressione nella console, ora la console può mostrare un'anteprima del risultato di quell'espressione sotto il cursore.

Figura 1. La console stampa il risultato dell'operazione sort() prima che sia stata eseguita esplicitamente

Per attivare la valutazione eager:

1. Apri la console.
2. Apri Impostazioni console .
3. Attiva la casella di controllo Valutazione anticipata.

DevTools non esegue una valutazione anticipata se l'espressione causa effetti collaterali.

Suggerimenti per gli argomenti

Mentre digiti le funzioni, la console ora mostra gli argomenti previsti dalla funzione.

Figura 2. Vari esempi di suggerimenti per gli argomenti nella console

Note:

• Un punto interrogativo prima di un parametro, ad esempio ?options, indica un parametro facoltativo.
• I puntini di sospensione prima di un argomento, ad esempio ...items, rappresentano una distribuzione.
• Alcune funzioni, come CSS.supports(), accettano più firme di argomenti.

Autocompletamento dopo le esecuzioni delle funzioni

Dopo aver attivato la valutazione anticipata, la console ora mostra anche quali proprietà e funzioni sono disponibili dopo aver digitato una funzione.

Figura 3. Lo screenshot in alto mostra il vecchio comportamento, mentre quello in basso rappresenta il nuovo comportamento che supporta il completamento automatico delle funzioni.

Parole chiave ES2017 nel completamento automatico

Le parole chiave ES2017, come await, sono ora disponibili nell'interfaccia utente del completamento automatico della console.

Figura 4. La console ora suggerisce await nell'interfaccia utente del completamento automatico

Controlli più rapidi e affidabili, una nuova UI e nuovi controlli

Chrome 68 viene fornito con Lighthouse 3.0. Le sezioni seguenti illustrano alcune delle modifiche più importanti. Per scoprire di più, consulta l'articolo Annuncio di Lighthouse 3.0.

Revisioni più rapide e affidabili

Lighthouse 3.0 dispone di un nuovo motore di controllo interno, con nome in codice Lantern, che completa i controlli più rapidamente e con meno varianza tra le esecuzioni.

Nuova UI

Lighthouse 3.0 offre anche una nuova UI, grazie alla collaborazione tra i team di Lighthouse e Chrome UX (ricerca e progettazione).

Figura 5. La nuova UI dei report in Lighthouse 3.0

Nuovi controlli

Lighthouse 3.0 include anche quattro nuovi controlli:

• First Contentful Paint
• Il file robots.txt non è valido
• Usa formati video per i contenuti animati
• Evitare più viaggi di andata e ritorno costosi verso qualsiasi origine

Supporto di BigInt

Chrome 68 supporta un nuovo tipo primitivo numerico chiamato BigInt. BigInt consente di rappresentare interi con precisione arbitraria. Provalo nella console:

Figura 6. Un esempio di BigInt nella console

Aggiungi il percorso della proprietà da controllare

Quando la sessione è in pausa in un punto di interruzione, fai clic con il tasto destro del mouse su una proprietà nel riquadro Ambito e seleziona Aggiungi il percorso della proprietà da controllare per aggiungerla al riquadro Monitora.

Figura 7. Un esempio di Aggiungi il percorso della proprietà da controllare

L'opzione "Mostra i timestamp" è stata spostata nelle impostazioni

La casella di controllo Mostra timestamp, precedentemente in Impostazioni della console , è stata spostata in Impostazioni.

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.