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 le 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 dei punti di interruzione.

    L'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.

    Digitare l'espressione del punto di log

    Figura 3. Digitare l'espressione del punto di log

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

  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

La volta successiva che la riga viene eseguita, DevTools registra il risultato dell'espressione Logpoint nella Console.

Il risultato dell'espressione Logpoint 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à Ispeziona

Durante l'ispezione di un nodo, DevTools ora mostra una descrizione comando espansa contenente informazioni comunemente importanti, come le dimensioni del carattere, il colore del carattere, il rapporto di contrasto e le dimensioni del modello a riquadro.

Ispezione di un nodo

Figura 6. Ispezione di un nodo

Per ispezionare un nodo:

  1. Fai clic su Esamina 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 sulla copertura del codice possono essere esportati come file JSON. Il codice 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 di un intervallo utilizzato. end è l'offset di fine. 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 usati il primo e l'ultimo set di regole, mentre quello centrale 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. 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 usare 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).

Messa a fuoco di un link

Figura 11. Imposta lo stato attivo su un link

Premendo il tasto Freccia Su viene visualizzato il link successivo.

Imposta lo stato attivo su un altro link

Figura 12. Messa a fuoco di un altro link

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

Concentrare un intero messaggio

Figura 13. Impostare lo stato attivo su 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. Espandere 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 colori ora mostra una seconda riga per indicare i colori che soddisfano il consiglio per il 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 suggerimento AAA, anche qualsiasi elemento sullo stesso lato di quel colore soddisfa 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.

Per informazioni su come accedere a questa funzionalità, consulta la sezione Rapporto di contrasto nel selettore di colori.

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.

    Il 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.

    La scheda Posizioni geografiche in Impostazioni

    Figura 18. La scheda Posizioni geografiche 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 posizione geografica personalizzata

    Figura 19. Aggiunta di una posizione geografica personalizzata

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

Code folding

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

Le linee da 54 a 65 sono state piegate

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

Per attivare il code folding:

  1. Premi F1 per aprire Impostazioni.
  2. In Impostazioni > Preferenze > Origini attiva Code folding.

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 di Chromium n. 328431 per segnalare bug o suggerire miglioramenti.

Scheda Messaggi

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

La scheda Messaggi

Figura 21. La scheda Messaggi

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

Scaricare i canali in 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 gli utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.

Novità di DevTools

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