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 appesantire il codice con chiamate console.log().

Per aggiungere un punto di log:

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

    Aggiunta di un punto di log

    Figura 1. Aggiunta di un punto di log

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

    Editor dei punti di interruzione

    Figura 2. L'editor dei punti di interruzione

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

    Digita l'espressione del punto di log

    Figura 3. Digitare l'espressione del punto di log

    Suggerimento: Quando si disconnette una variabile (ad es. TodoApp), aggrega la variabile in un oggetto (ad es. {TodoApp}) per disconnetterne il nome e il valore nella console. Per saperne di più su questa sintassi, consulta Registra sempre gli oggetti e Abbreviazione dei valori delle proprietà degli oggetti.

  4. Premi Invio o fai clic all'esterno dell'editor dei breakpoint per salvare. Il badge arancione sopra il numero di riga rappresenta il punto di log.

    Un badge Logpoint arancione nella riga 174

    Figura 4. Un badge Logpoint arancione nella riga 174

Alla successiva esecuzione della riga, DevTools registra il risultato dell'espressione del punto di log nella console.

Il risultato dell'espressione del punto di log nella console

Figura 5. Il risultato dell'espressione Logpoint nella console

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

Descrizioni comando dettagliate in modalità di ispezione

Quando ispezioni un nodo, DevTools ora mostra una descrizione comando espansa contenente informazioni di solito importanti come dimensioni del carattere, colore del carattere, rapporto di contrasto e dimensioni del modello di casella.

Ispezione di un nodo

Figura 6. Ispezione di un nodo

Per ispezionare un nodo:

  1. Fai clic su Ispeziona Ispezione di un nodo.

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

  2. Nel viewport, passa il mouse sopra il nodo.

Esportare i dati sulla copertura del codice

Ora i dati di copertura del codice 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 di 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 insieme di regole, mentre quello intermedio no.

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

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

    Il menu dei comandi

    Figura 7. Il menu dei comandi

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

    Copertura del programma

    Figura 8. Copertura del programma

    Si apre la scheda Copertura.

    La scheda Copertura

    Figura 9. Scheda Copertura

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

  4. Fai clic su Esporta 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 Chromium 717195 per segnalare bug o suggerire miglioramenti.

Navigare nella console con la tastiera

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

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

Imposta lo stato attivo su un link

Figura 11. Messa a fuoco di un link

Premendo il tasto freccia Su viene attivato il link successivo.

Messa a fuoco di un altro link

Figura 12. Imposta lo stato attivo su un altro link

Se premi di nuovo il tasto Freccia Su, lo stato attivo viene spostato sull'intero messaggio.

Impostare lo stato attivo su un intero messaggio

Figura 13. Concentrare un intero messaggio

Premendo il tasto Freccia Destra viene espansa una traccia della pila compressa (o un oggetto, un array e così via).

Espandere un'analisi dello stack compressa

Figura 14. Espansione di un'analisi dello stack compressa

Premendo il tasto Freccia Sinistra, un messaggio o un risultato espanso viene compresso.

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

Linea del rapporto di contrasto AAA nel selettore di colori

Il selettore di colori ora mostra una seconda riga per indicare quali colori soddisfano il consiglio sul rapporto di contrasto AAA. La riga AA è presente da Chrome 65.

La linea AA (in alto) e la linea AAA (in basso)

Figura 15. La linea AA (in alto) e la linea 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 i colori sullo stesso lato del colore soddisfano il consiglio. Ad esempio, nella Figura 15, tutto ciò che si trova sotto la linea inferiore è AAA e 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 per qualche motivo non è possibile soddisfare il consiglio AAA, prova a soddisfare almeno quello AA.

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

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

Salvare le sostituzioni della geolocalizzazione personalizzata

La scheda Sensori ora ti consente di salvare le sostituzioni della geolocalizzazione personalizzate.

  1. Premi Control+Maiusc+P o Comando+Maiusc+P (Mac) per aprire il menu di comando.

    Menu dei comandi

    Figura 16. Il menu dei comandi

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

    La scheda Sensori

    Figura 17. La scheda Sensori

  3. Nella sezione Geolocalizzazione, fai clic su Gestisci. Viene visualizzata la schermata Impostazioni > Geolocalizzazioni.

    Scheda Geolocalizzazioni in Impostazioni

    Figura 18. Scheda Geolocalizzazioni in Impostazioni

  4. Fai clic su Aggiungi sede.

  5. Inserisci il nome, la latitudine e la longitudine di una località, quindi fai clic su Aggiungi.

    Aggiunta di una geolocalizzazione personalizzata

    Figura 19. Aggiunta di una geolocalizzazione personalizzata

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

Piegatura del codice

I riquadri Origini e Rete ora supportano l'organizzazione del codice.

Le righe da 54 a 65 sono state piegate

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

Per attivare il code folding:

  1. Premi F1 per aprire Impostazioni.
  2. In Impostazioni > Preferenze > Origini, attiva Compilazione 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 Fold Piega.

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

Scheda Messaggi

La scheda Frame è stata rinominata in Messaggi. Questa scheda è disponibile solo nel riquadro Rete quando viene esaminata una connessione web socket.

Scheda Messaggi

Figura 21. La scheda Messaggi

Consulta il problema Chromium 802182 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, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano gli utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità, degli aggiornamenti o di qualsiasi altra cosa relativa a DevTools.

Novità di DevTools

Un elenco di tutto ciò che è stato trattato nella serie Novità di DevTools.