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.

   

   Figura 1. Aggiunta di un punto di log

2. Seleziona Aggiungi punto di log. Viene visualizzato 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.

   

   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.

   

   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.

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

Figura 6. Ispezione di un nodo

Per ispezionare un nodo:

1. Fai clic su Esamina .

   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 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 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 Control+Maiusc+P o Comando+Maiusc+P (Mac) per aprire il menu di comando.

   

   Figura 7. Il menu dei comandi

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

   

   Figura 8. Copertura del programma

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

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

Figura 11. Messa a fuoco di un link

Se premi il tasto Freccia Su, lo stato attivo viene spostato sul 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

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

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

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.

   

   Figura 16. Il menu dei comandi

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

   

   Figura 17. La scheda Sensori

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

   

   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.

   

   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.

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

Per attivare il codice folding:

1. Premi F1 per aprire le 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 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 Network quando viene ispezionata una connessione web socket.

Figura 21. Scheda Messaggi

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

Scaricare i canali di 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 i tuoi utenti.

Contatta il team di Chrome DevTools

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

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema DevTools in DevTools.
• Invia un tweet all'account @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti per DevTools.

Novità di DevTools

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