Questa pagina è stata tradotta dall'API Cloud Translation.

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:

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

Figura 1. Aggiunta di un punto di log
Seleziona Aggiungi punto di log. Viene visualizzato l'editor dei punti di interruzione.

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

Figura 3. Digita 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à dell'oggetto.
Premi Invio o fai clic all'esterno dell'editor dei punti di interruzione per salvare. Il badge arancione nella parte superiore della riga rappresenta il punto di log.

Figura 4. Un badge del punto di log 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 del punto di log nella console

Consulta il problema di Chromium n. 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:

Fai clic su Ispeziona .

Suggerimento Passa il mouse sopra Ispeziona per visualizzare la relativa scorciatoia da tastiera.
Nell'area visibile, passa il mouse sopra il nodo.

Esporta i dati sulla copertura del codice

Ora i dati di 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 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 usati il primo e l'ultimo set di regole, mentre quello centrale no.

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

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

Figura 7. Menu dei comandi
Inizia a digitare coverage, seleziona Mostra copertura e premi Invio.

Figura 8. Mostra copertura

Si apre la scheda Copertura.

Figura 9. La scheda Copertura
Fai clic su Ricarica . DevTools ricarica la pagina e registra la quantità di codice utilizzata rispetto a quanto viene spedito.
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 DevTools. Consulta la sezione Copertura.

Consulta il problema di Chromium n. 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.

La pressione di Maiusc + Tab attiva l'ultimo messaggio (o il risultato di un'espressione valutata). Se il messaggio contiene link, l'ultimo link viene evidenziato per primo. Se premi Invio, il link viene aperto 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. Imposta lo stato attivo su un link

Premendo il tasto freccia Su viene attivato il link successivo.

Imposta lo stato attivo su un altro link

Figura 12. Imposta lo stato attivo su un altro link

Premendo di nuovo il tasto Freccia su su viene attivato l'intero messaggio.

Concentrare un intero messaggio

Figura 13. Concentrare un intero messaggio

Se premi il tasto Freccia destra, si espande un'analisi dello stack compressa (oppure un oggetto, un array e così via).

Espansione di un'analisi dello stack compressa

Figura 14. Espansione di un'analisi dello stack compressa

Se premi il tasto freccia Sinistra, si comprime un messaggio o un risultato espanso.

Consulta il problema di Chromium n. 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 linea AA esiste da Chrome 65.

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

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

I colori tra le due linee rappresentano i colori che soddisfano i consigli di AA, ma non quelli di 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 compare al di sotto della riga inferiore è AAA, mentre qualsiasi elemento al di sopra della riga superiore non soddisfa neanche il suggerimento di AA.

Suggerimento In generale, puoi migliorare la leggibilità delle pagine aumentando la quantità di testo che soddisfa i suggerimenti della AAA. Se per qualche motivo non è possibile soddisfare il suggerimento della AAA, prova a rispettare almeno il suggerimento dell'AA.

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

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

Salva sostituzioni di geolocalizzazione personalizzate

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

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

Figura 16. Menu dei comandi
Digita sensors, seleziona Mostra sensori e premi Invio. Si apre la scheda Sensori.

Figura 17. La scheda Sensori
Nella sezione Geolocalizzazione, fai clic su Gestisci. Viene visualizzata la schermata Impostazioni > Geolocalizzazioni.

Figura 18. Scheda Geolocalizzazioni in Impostazioni
Fai clic su Aggiungi località.
Inserisci il nome della posizione, la latitudine e la longitudine, poi fai clic su Aggiungi.

Figura 19. Aggiunta di una geolocalizzazione personalizzata

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

Piegatura del codice

I riquadri Origini e Rete ora supportano il code folding.

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:

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

Per piegare un blocco di codice:

Passa il mouse sopra il numero della riga in cui inizia il blocco.
Fai clic su 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 di Chromium n. 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 ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità e modifiche nel post o di qualsiasi altra informazione relativa a DevTools.

Inviaci un suggerimento o un feedback tramite crbug.com.
Segnala un problema di DevTools usando Altre opzioni > Guida > Segnala un problema di DevTools in DevTools.
Invia un tweet all'indirizzo @ChromeDevTools.
Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.