Novità di DevTools (Chrome 73)

Kayce Basques

Ecco le novità di DevTools in Chrome 73.

Versione video di queste note di rilascio

Punti di log

Utilizza i punti di log per registrare i messaggi nella console senza ingombrare il codice con chiamate console.log().

Per aggiungere un punto di interruzione:

1. Fai clic con il tasto destro del mouse sul numero di riga in cui vuoi aggiungere il punto di log.

   

   Figura 1. Aggiunta di un punto di log

2. Seleziona Aggiungi punto di interruzione. Viene visualizzato l'editor dei punti di interruzione.

   

   Figura 2. Editor punti di interruzione

3. Nell'editor di punti di interruzione, inserisci l'espressione che vuoi registrare nella console.

   

   Figura 3. Digitazione dell'espressione del punto di log

   Suggerimento Quando esegui il logout di una variabile (ad es. TodoApp), racchiudila in un oggetto (ad es. {TodoApp}) per registrare il nome e il valore nella console. Per scoprire di più su questa sintassi, consulta Registra sempre gli oggetti e Abbreviazione del valore della proprietà dell'oggetto.

4. Premi Invio o fai clic fuori dall'editor dei punti di interruzione per salvare. Il badge arancione sopra il numero di riga rappresenta il punto di log.

   

   Figura 4. Un badge punto di log arancione sulla riga 174

La volta successiva che la riga viene eseguita, DevTools registra il risultato dell'espressione del punto di log nella console.

Figura 5. Il risultato dell'espressione del punto di interruzione nella console

Consulta il problema n. 700519 di Chromium per segnalare bug o suggerire miglioramenti.

Descrizioni comando dettagliate nella modalità Ispezione

Quando ispezioni un nodo, DevTools ora mostra un suggerimento espanso contenente informazioni importanti come dimensione del carattere, colore del carattere, rapporto di contrasto e dimensioni del modello a scatola.

Figura 6. Ispezione di un nodo

Per esaminare un nodo:

1. Fai clic su Esamina .

   Suggerimento Passa il mouse sopra Ispeziona per visualizzare la relativa scorciatoia da tastiera.

2. Nella finestra, passa il mouse sopra il nodo.

Esportare i dati sulla copertura del codice

I dati relativi alla copertura del codice ora possono essere esportati come file JSON. Il JSON ha il seguente aspetto:

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url è l'URL del file CSS o JavaScript analizzato da DevTools. ranges descrive le parti del codice utilizzate. start è l'offset iniziale per un intervallo utilizzato. end è l'offset finale. text è il testo completo del file.

Nell'esempio precedente, l'intervallo da 0 a 21 corrisponde a body { margin: 1em; } e l'intervallo da 45 a 67 corrisponde a h1 { color: #317EFB; }. In altre parole, sono stati utilizzati il primo e l'ultimo set di regole, mentre quello intermedio no.

Per analizzare la quantità di codice utilizzata durante il caricamento della pagina ed esportare i dati:

1. Premi Ctrl+Maiusc+P o Cmd+Maiusc+P (Mac) per aprire il menu dei comandi.

   

   Figura 7. Menu dei comandi

2. Inizia a digitare coverage, seleziona Mostra copertura e poi premi Invio.

   

   Figura 8. Mostra copertura

   Si apre la scheda Copertura.

   

   Figura 9. Scheda Copertura

3. Fai clic su Ricarica . DevTools ricarica la pagina e registra la quantità di codice utilizzata rispetto a quella distribuita.

4. Fai clic su Esporta per esportare i dati come file JSON.

La copertura del codice è disponibile anche in Puppeteer, uno strumento di automazione del browser gestito dal team di DevTools. Consulta Copertura.

Consulta il problema n. 717195 di Chromium per segnalare bug o suggerire miglioramenti.

Navigare nella console con la tastiera

Ora puoi utilizzare la tastiera per navigare nella console. Ecco un esempio.

Se premi Maiusc+Tab, lo stato attivo viene spostato sull'ultimo messaggio (o sul risultato di un'espressione valutata). Se il messaggio contiene link, viene evidenziato per primo l'ultimo link. Se premi Invio, il link si apre in una nuova scheda. Se premi il tasto Freccia sinistra, viene evidenziato l'intero messaggio (vedi Figura 13).

Figura 11. Mettere a fuoco un link

Se premi il tasto Freccia su, viene selezionato il link successivo.

Figura 12. Messa a fuoco di un altro link

Se premi di nuovo il tasto Freccia su, viene selezionato l'intero messaggio.

Figura 13. Impostare lo stato attivo su un intero messaggio

Se premi il tasto Freccia destra, si espande una traccia dello stack compressa (o un oggetto, un array e così via).

Figura 14. Espansione di un'analisi dello stack compressa

Se premi il tasto Freccia sinistra, un messaggio o un risultato espanso viene compresso.

Consulta il problema n. 865674 di Chromium per segnalare bug o suggerire miglioramenti.

Linea del rapporto di contrasto AAA nel selettore colori

Il selettore colori ora mostra una seconda linea per indicare quali colori soddisfano il consiglio relativo al rapporto di contrasto AAA. La linea AA è presente a partire da Chrome 65.

Figura 15. La riga AA (in alto) e la riga AAA (in basso)

I colori tra le due linee rappresentano i colori che soddisfano il consiglio AA, ma non il consiglio AAA. Quando un colore soddisfa il consiglio AAA, anche tutti gli altri colori sullo stesso lato soddisfano il consiglio. Ad esempio, nella Figura 15 tutto ciò che si trova sotto la linea inferiore è AAA, mentre tutto ciò che si trova sopra la linea superiore non soddisfa nemmeno il consiglio AA.

Suggerimento In generale, puoi migliorare la leggibilità delle tue pagine aumentando la quantità di testo che soddisfa il consiglio AAA. Se non è possibile soddisfare il consiglio AAA per qualche motivo, prova almeno a soddisfare il consiglio AA.

Consulta Rapporto di contrasto nel selettore di colori per scoprire come accedere a questa funzionalità.

Consulta il problema n. 879856 di Chromium per segnalare bug o suggerire miglioramenti.

Salvare gli override di geolocalizzazione personalizzati

La scheda Sensori ora ti consente di salvare override della geolocalizzazione personalizzati.

1. Premi Ctrl+Maiusc+P o Cmd+Maiusc+P (Mac) per aprire il menu dei comandi.

   

   Figura 16. Menu dei comandi

2. Digita sensors, seleziona Mostra sensori e premi Invio. Si apre la scheda Sensori.

   

   Figura 17. Scheda Sensori

3. Nella sezione Geolocalizzazione, fai clic su Gestisci. Si aprono Impostazioni > Geolocalizzazione.

   

   Figura 18. La scheda Geolocalizzazioni in Impostazioni

4. Fai clic su Aggiungi sede.

5. Inserisci un nome della località, la latitudine e la longitudine, poi fai clic su Aggiungi.

   

   Figura 19. Aggiungere una geolocalizzazione personalizzata

Consulta il problema n. 649657 di Chromium per segnalare bug o suggerire miglioramenti.

Code folding

I riquadri Origini e Rete ora supportano il ripiegamento del codice.

Figura 20. Le righe da 54 a 65 sono state compresse

Per attivare code folding:

1. Premi F1 per aprire le Impostazioni.
2. In Impostazioni > Preferenze > Origini, attiva Raggruppamento del codice.

Per comprimere un blocco di codice:

1. Passa il mouse sopra il numero di riga in cui inizia il blocco.
2. Fai clic su Chiudi .

Consulta il problema n. 328431 di Chromium per segnalare bug o suggerire miglioramenti.

Scheda Messaggi

La scheda Frame è stata rinominata scheda Messaggi. Questa scheda è disponibile solo nel riquadro Network durante l'ispezione di una connessione WebSocket.

Figura 21. Scheda Messaggi

Consulta il problema n. 802182 di Chromium per segnalare bug o suggerire miglioramenti.

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.