Novità di DevTools (Chrome 66)

Kayce Basques

Le nuove funzionalità e i cambiamenti principali in arrivo per DevTools in Chrome 66 includono:

• Ignora lo script nel riquadro Rete
• Regolazione automatica dello zoom in Modalità dispositivo
• Prudenza nelle schede Anteprima e Risposta
• Visualizzare l'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 qui sotto.

Ignora lo script nel riquadro Rete

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

In precedenza, se il framework aggregava le richieste di rete in un wrapper, la colonna Initiator non sarebbe così utile. Tutte le richieste di rete puntavano alla stessa riga del codice wrapper.

In questo scenario, quello che davvero ti interessa è vedere il codice dell'applicazione che genera la richiesta. vale a dire ora possibile:

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

Figura 1. Operazione per ignorare requests.js in corso...

Gestisci gli script ignorati dalla scheda Elenco ignorati in Impostazioni.

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

Formattare il codice nelle schede Anteprima e Risposta

La scheda Anteprima nel riquadro Rete ora stampa in modo ottimale le risorse per impostazione predefinita quando rileva che queste risorse siano state minimizzate.

Figura 2. La scheda Anteprima mostra in modo semplice i contenuti di analytics.js per impostazione predefinita

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

Figura 3. Stampare manualmente i contenuti di analytics.js tramite il pulsante Formato

Visualizzazione dell'anteprima dei contenuti HTML nella scheda Anteprima

In precedenza, la scheda Anteprima del riquadro Rete mostrava il codice di una risorsa HTML in determinate situazioni, mentre esegui il rendering di un'anteprima del codice HTML in altre. Ora la scheda Anteprima esegue un rendering di base del codice HTML. Non è progettato per essere un browser completo, quindi potrebbe non essere visualizzato HTML esattamente come previsto. 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 del codice HTML nella scheda Anteprima

Regola automaticamente lo zoom in Modalità dispositivo

In Modalità dispositivo, apri il menu a discesa Zoom e seleziona Regola automaticamente zoom per ridimensiona 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 gli Override locali in Chrome 65, uno dei limiti era che non ha potuto tenere traccia delle modifiche apportate agli stili definiti nel codice HTML. Ad esempio, nella Figura 7 è presente uno 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 hai modificato la dichiarazione font-weight tramite il riquadro Stile di DevTools, Locale Gli override non tengono traccia della modifica. In altre parole, al successivo ricaricamento, lo stile veniva ripristinato. torna a font-weight: bold. In Chrome 66, però, modifiche come questa ora vengono mantenute durante il caricamento delle pagine.

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

Quando ho creato il video Inizia a eseguire il debug di JavaScript, alcuni spettatori hanno commentato i punti di interruzione del listener di eventi non sono utili per le app basate su framework, poiché l'evento i listener sono spesso aggregati nel codice del framework. Ad esempio, nella Figura 8 ho impostato una click in DevTools. Quando faccio clic sul pulsante nella demo, DevTools mette automaticamente in pausa nella prima riga del codice listener. In questo caso, viene messa in pausa nel codice wrapper di Vue.js alla riga 1802, che non è molto utile.

Figura 6. Il punto di interruzione click viene messo in pausa in Vue.js codice wrapper

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

Figura 7. Lo script Vue.js viene ignorato dal riquadro Stack di chiamate.

La volta successiva che faccio clic sul pulsante e attivo il punto di interruzione click, il codice Vue.js viene eseguito senza mettere in pausa, per poi fare una pausa sulla prima riga di codice nel listener dell'app, che in cui ho voluto assolutamente fermarmi.

Figura 8. Il punto di interruzione click ora viene messo in pausa nel codice 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 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.