Novità di DevTools (Chrome 66)

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

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

Ignora script nel riquadro Rete

La colonna Iniziatore nel riquadro Rete indica il motivo per cui è stata richiesta una risorsa. 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 includeva le richieste di rete in un wrapper, la colonna Iniziatore non era molto utile. Tutte le richieste di rete puntavano alla stessa riga di codice wrapper.

In questo scenario, devi vedere il codice dell'applicazione che genera la richiesta. Questo è 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 nei risultati di avvio.
  3. Seleziona Aggiungi script all'elenco di elementi da ignorare. La colonna Initiator ora nasconde tutte le chiamate dallo script che hai ignorato.

"requests.js" verrà ignorato.

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

Puoi gestire gli script ignorati dalla scheda Elenco di ignorare in Impostazioni.

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

Formattare la stampa nelle schede Anteprima e Risposta

Per impostazione predefinita, la scheda Anteprima nel riquadro Rete crea una bella stampa delle risorse quando rileva che queste sono state minimizzate.

Per impostazione predefinita, la scheda Anteprima mostra in anteprima i contenuti di analytics.js.

Figura 2. Per impostazione predefinita, la scheda Anteprima mostra in anteprima i contenuti di analytics.js

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

Copia manualmente i contenuti di analytics.js tramite il pulsante Formato.

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

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 altri mostravano un'anteprima dell'HTML. La scheda Anteprima ora esegue sempre un rendering di base del codice HTML. Non è progettato per essere un browser completo, pertanto potrebbe non visualizzare l'HTML 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.

Anteprima del codice HTML nella scheda Anteprima.

Figura 4. Anteprima dell'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 ridimensionare automaticamente l'area visibile ogni volta che modifichi l'orientamento del dispositivo.

Le sostituzioni locali ora funzionano con alcuni stili definiti in HTML

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

Un esempio di stili definiti all'interno del codice HTML

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

In Chrome 65, se modificavi la dichiarazione font-weight tramite il riquadro Stile di DevTools, gli override locali non monitoravano la modifica. In altre parole, al successivo ricaricamento, lo stile tornerà a essere font-weight: bold. Tuttavia, in Chrome 66, modifiche come questa ora vengono mantenute durante i caricamenti pagina.

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

Quando ho creato il video Inizia a utilizzare il debug di JavaScript, alcuni spettatori hanno commentato che i punti di interruzione del listener di eventi non sono utili per le app basate su framework, perché gli ascoltatori di eventi sono spesso aggregati 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 mette automaticamente in pausa nella prima riga del codice listener. In questo caso, viene messo in pausa nel codice wrapper di Vue.js alla riga 1802, il che non è molto utile.

Il punto di interruzione dei clic viene messo in pausa nel codice wrapper di Vue.js.

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

Ignorare lo script Vue.js dal riquadro Stack di chiamate.

Figura 7. Ignorare lo script Vue.js dal riquadro Stack di chiamate.

La prossima volta che faccio clic sul pulsante e attivo il punto di interruzione click, viene eseguito il codice Vue.js senza pausa pausa e poi si interrompe sulla prima riga di codice nel listener dell'app, dove volevo davvero mettere in pausa.

Il punto di interruzione dei clic viene ora messo in pausa sul codice listener dell'app.

Figura 8. Il punto di interruzione click viene ora messo in pausa sul codice listener dell'app

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