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 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
In Editor punti di interruzione, inserisci l'espressione che vuoi registrare nella console.

Figura 3. Digitazione dell'espressione del punto di log

Suggerimento: Quando esegui il disconnessione di una variabile (ad es. TodoApp), aggregala in un oggetto (ad es. {TodoApp}) per disconnetterne il nome e il valore nella console. Per scoprire di più su questa sintassi, consulta Registra sempre gli oggetti e Sintesi dei valori delle proprietà degli oggetti.
Per salvare, premi Invio o fai clic all'esterno dell'editor dei punti di interruzione. Il badge arancione nella parte superiore della riga rappresenta il punto di log.

Figura 4. Un badge arancione del punto di log alla riga 174

La prossima volta che la riga viene eseguita, 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à di ispezione

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

Ispezione di un nodo

Figura 6. Ispezione di un nodo

Per esaminare un nodo:

Fai clic su Ispeziona .

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

Esporta dati di copertura del codice

I dati di copertura del codice ora 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 porzioni di codice utilizzate. start è l'offset iniziale di un intervallo che è stato 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 state utilizzate la prima e l'ultima serie di regole, mentre quella centrale no.

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

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

Figura 7. Il 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 quella spedita.
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. Vedi Copertura.

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

Premi Maiusc + Tab per impostare lo stato attivo sull'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 si apre in una nuova scheda. Se premi il tasto Freccia 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

Se premi il tasto Freccia su, il link successivo si attiva.

Imposta lo stato attivo su un altro link

Figura 12. Imposta lo stato attivo su un altro link

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

Imposta lo stato attivo su un intero messaggio

Figura 13. Imposta lo stato attivo su un intero messaggio

Se premi il tasto Freccia destra, si espande un'analisi dello stack compressa (oppure oggetto, 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, un messaggio o un risultato espanso vengono compressi.

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

Linea del rapporto di contrasto AAA nel selettore colori

Il Selettore colori ora mostra una seconda riga per indicare quali colori soddisfano i consigli sul rapporto di contrasto AAA. La linea AA esiste da Chrome 65.

Riga AA (in alto) e riga AAA (in basso)

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

I colori tra le 2 righe rappresentano colori che soddisfano i consigli dell'AA, ma non quelli della AAA. Quando un colore soddisfa il consiglio della AAA, anche tutti gli elementi sullo stesso lato di quel colore sono conformi al consiglio. Ad esempio, nella Figura 15 tutti gli elementi al di sotto della riga inferiore sono AAA, mentre quelli al di sopra della riga superiore non soddisfano nemmeno il suggerimento dell'AA.

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

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

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

Salva le sostituzioni della geolocalizzazione personalizzata

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

Figura 16. Il menu dei comandi
Digita sensors, seleziona Mostra sensori e premi Invio. Viene visualizzata la scheda Sensori.

Figura 17. La scheda Sensori
Nella sezione Geolocalizzazione, fai clic su Gestisci. Si apre Impostazioni > Geolocalizzazione.

Figura 18. La scheda Geolocalizzazioni in Impostazioni
Fai clic su Aggiungi località.
Inserisci il nome, la latitudine e la longitudine della posizione e 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 pieghevole del codice.

Le righe da 54 a 65 sono state piegate

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

Per abilitare il code folding:

Premi F1 per aprire le Impostazioni.
In Impostazioni > Preferenze > Origini attiva Ripiegamento del codice.

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 Messaggi. Questa scheda è disponibile solo nel riquadro Rete quando si esamina una connessione Web Socket.

La scheda Messaggi

Figura 21. La scheda Messaggi

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

Scarica i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o beta come browser di sviluppo predefinito. Questi canali in anteprima ti consentono di accedere alle funzionalità di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

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

Inviaci un suggerimento o un feedback tramite crbug.com.
Segnala un problema DevTools utilizzando Altre opzioni > Guida > Segnala i problemi di DevTools in DevTools.
Tweet all'indirizzo @ChromeDevTools.
Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.