Novità di DevTools (Chrome 66)

Kayce Basques

Le nuove funzionalità e le modifiche principali che verranno introdotte in DevTools in Chrome 66 includono:

• Ignorare lo script nel riquadro Rete
• Regolare automaticamente lo zoom in Modalità Dispositivo
• Stampa in un formato più leggibile nelle schede Anteprima e Risposta
• Visualizzazione dell'anteprima dei contenuti HTML nella scheda Anteprima
• Sostituzioni locali con stili all'interno del codice HTML

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

Ignora script nel riquadro Rete

La colonna Initiator (Autore) nel riquadro Network (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 avvolgeva le richieste di rete in un wrapper, la colonna Initiator non era molto utile. Tutte le richieste di rete puntavano alla stessa riga di codice del wrapper.

In questo caso, ciò che ti interessa è vedere il codice dell'applicazione che genera la richiesta. Ora è possibile:

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

Figura 1. Ignorare requests.js

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

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

Stampa in un formato gradevole nelle schede Anteprima e Risposta

La scheda Anteprima nel riquadro Rete ora stampa in un formato leggibile le risorse per impostazione predefinita quando rileva che queste sono state minimizzate.

Figura 2. La scheda Anteprima stampa in un formato gradevole i contenuti di analytics.js per impostazione predefinita

Per visualizzare la versione non minimizzata di una risorsa, utilizza la scheda Risposta. Puoi anche visualizzare manualmente le risorse con la formattazione a puntini dalla scheda Risposta tramite il nuovo pulsante Formato.

Figura 3. Stampa in formato leggibile dei contenuti di analytics.js tramite il pulsante Formato

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 determinate situazioni, mentre in altre mostrava un'anteprima dell'HTML. La scheda Anteprima ora esegue sempre un rendering di base dell'HTML. Non è pensato per essere un browser completo, pertanto potrebbe non visualizzare il codice HTML esattamente come previsto. Se vuoi visualizzare il codice HTML, fai clic sulla scheda Risposta o fai clic con il tasto destro del mouse su una risorsa e seleziona Apri nel riquadro Origini.

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

Regolare automaticamente lo 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.

Le sostituzioni locali ora funzionano con alcuni stili definiti in HTML

Quando DevTools ha lanciato le sovrapposizioni locali in Chrome 65, un limite era che non poteva monitorare le modifiche agli stili definiti in 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 in HTML

In Chrome 65, se modificavi la dichiarazione font-weight tramite il riquadro Stile di DevTools, Sostituzioni locali non monitorava la modifica. In altre parole, al successivo ricaricamento, lo stile tornerà allo stato iniziale font-weight: bold. Tuttavia, in Chrome 66, modifiche come questa ora vengono mantenute durante i caricamenti delle pagine.

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

Quando ho creato il video Introduzione al debug di JavaScript, alcuni spettatori hanno commentato che i breakpoint degli ascoltatori di eventi non sono utili per le app basate su framework, perché spesso sono racchiusi nel codice del framework. Ad esempio, nella Figura 8 ho configurato un breakpoint click in DevTools. Quando faccio clic sul pulsante nella demo, DevTools si mette automaticamente in pausa nella prima riga del codice dell'ascoltatore. In questo caso, si interrompe nel codice del wrapper di Vue.js alla riga 1802, il che non è molto utile.

Figura 6. Il punto di interruzione click mette in pausa il codice wrapper di Vue.js

Poiché lo script Vue.js si trova in un file separato, posso ignorarlo dal 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 breakpoint click, il codice Vue.js viene eseguito senza mettere in pausa e poi si ferma sulla prima riga di codice nell'ascoltatore della mia app, dove volevo davvero mettere in pausa.

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

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.