Novità di DevTools (Chrome 66)

Kayce Basques

Le nuove funzionalità e le modifiche principali in arrivo in DevTools in Chrome 66 includono:

• Ignorare lo script nel riquadro Rete
• Regolazione automatica dello zoom in modalità Dispositivo
• Stampa in formato leggibile nelle schede Anteprima e Risposta
• Visualizzazione dell'anteprima dei contenuti HTML nella scheda Anteprima
• Override locali con stili all'interno del codice HTML

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

Ignora lo script nel riquadro Network

La colonna Attivatore nel riquadro Rete indica il motivo per cui è stata richiesta una risorsa. Ad esempio, se JavaScript causa il recupero di un'immagine, la colonna Iniziatore mostra la riga di codice JavaScript che ha causato la richiesta.

In precedenza, se il framework racchiudeva le richieste di rete in un wrapper, la colonna Initiator non era molto utile. Tutte le richieste di rete puntano alla stessa riga di codice wrapper.

In questo scenario, quello che vuoi davvero è vedere il codice dell'applicazione che causa la richiesta. Ora è possibile:

1. Passa il mouse sopra la colonna Iniziatore. Lo stack di chiamate che ha causato la richiesta viene visualizzato in un popup.
2. Fai clic con il tasto destro del mouse sulla chiamata che vuoi nascondere dai risultati dell'iniziatore.
3. Seleziona Aggiungi script all'elenco di elementi da ignorare. La colonna Iniziatore ora nasconde le chiamate dallo script che hai ignorato.

Figura 1. Ignorando requests.js

Gestisci gli script ignorati dalla scheda Elenco di elementi da ignorare in Impostazioni.

Per scoprire di più su come ignorare gli script, consulta Ignorare uno script o un pattern di script.

Stampa in formato leggibile nelle schede Anteprima e Risposta

La scheda Anteprima nel riquadro Rete ora stampa le risorse in modo leggibile per impostazione predefinita quando rileva che sono state compresse.

Figura 2. La scheda Anteprima che stampa in modo leggibile i contenuti di analytics.js per impostazione predefinita

Per visualizzare la versione non compressa di una risorsa, utilizza la scheda Risposta. Puoi anche formattare manualmente le risorse dalla scheda Risposta tramite il nuovo pulsante Formatta.

Figura 3. Formattazione manuale dei contenuti di analytics.js tramite il pulsante Formatta

Visualizzazione dell'anteprima dei contenuti HTML nella scheda Anteprima

In precedenza, la scheda Anteprima nel riquadro Rete mostrava il codice di una risorsa HTML in alcune situazioni, mentre in altre veniva visualizzata l'anteprima dell'HTML. La scheda Anteprima ora esegue sempre un rendering di base dell'HTML. Non è progettato per essere un browser completo, pertanto potrebbe non visualizzare l'HTML esattamente come ti aspetti. Se vuoi visualizzare il codice HTML, fai clic sulla scheda Risposta oppure fai clic con il tasto destro del mouse su una risorsa e seleziona Apri nel riquadro Origini.

Figura 4. Visualizzazione dell'anteprima dell'HTML nella scheda Anteprima

Regolazione automatica dello zoom in modalità Dispositivo

In Modalità dispositivo, apri il menu a discesa Zoom e seleziona Regola automaticamente lo zoom per ridimensionare automaticamente l'area visibile ogni volta che cambi l'orientamento del dispositivo.

Gli override locali ora funzionano con alcuni stili definiti in HTML

Quando DevTools ha lanciato Override locali in Chrome 65, una limitazione era che non poteva tenere traccia delle modifiche agli stili definiti all'interno dell'HTML. Ad esempio, nella Figura 7 è presente una regola di stile nel head del documento che dichiara font-weight: bold per gli elementi h1.

Figura 5. Un esempio di stili definiti all'interno dell'HTML

In Chrome 65, se hai modificato la dichiarazione font-weight tramite il riquadro Stile di DevTools, Override locali non avrebbe monitorato la modifica. In altre parole, al successivo ricaricamento, lo stile tornerà a font-weight: bold. Tuttavia, in Chrome 66, modifiche come questa vengono ora mantenute tra i caricamenti pagina.

Suggerimento bonus: ignora gli script del framework per rendere più utili i punti di interruzione listener di eventi

Quando ho creato il video Guida introduttiva al debug di JavaScript, alcuni spettatori hanno commentato che i punti di interruzione dei listener di eventi non sono utili per le app create su framework, perché i listener di eventi sono spesso inclusi nel codice del framework. Ad esempio, nella Figura 8 ho impostato un punto di interruzione click in DevTools. Quando faccio clic sul pulsante nella demo, DevTools si interrompe automaticamente nella prima riga di codice del listener. In questo caso, la pausa viene eseguita nel codice wrapper di Vue.js alla riga 1802, il che non è molto utile.

Figura 6. Il punto di interruzione click si interrompe nel codice wrapper di Vue.js

Poiché lo script Vue.js si trova in un file separato, posso ignorarlo nel riquadro Call Stack per rendere più utile questo punto di interruzione click.

Figura 7. Ignorare lo script Vue.js dal riquadro Call Stack

La volta successiva che faccio clic sul pulsante e attivo il punto di interruzione click, il codice Vue.js viene eseguito senza interruzioni e poi si interrompe alla prima riga di codice nel listener della mia app, che è dove volevo interrompere l'esecuzione fin dall'inizio.

Figura 8. Il punto di interruzione click ora si interrompe sul codice del listener dell'app

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.