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 console.log() chiamate.

Per aggiungere un punto di log:

  1. Fai clic con il pulsante 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.

    Editor dei punti di interruzione

    Figura 2. 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. Digita l'espressione del punto di log

    Suggerimento Quando esci da una variabile (ad es. TodoApp), aggrega la variabile in un oggetto (ad es. {TodoApp}) per disconnettere il relativo nome e valore nella console. Vedi Registra sempre gli oggetti e Descrizione in forma breve del valore della proprietà dell'oggetto per scoprire di più su questa sintassi.

  4. Premi Invio o fai clic all'esterno dell'editor dei punti di interruzione per salvare. Il badge arancione in cima alla riga il numero rappresenta il punto di log.

    Un badge del punto di log arancione nella riga 174

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

La volta successiva che la riga viene eseguita, DevTools registra il risultato dell'espressione del punto di log nel Google Cloud.

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 le informazioni informazioni come le dimensioni del carattere, il colore del carattere, il rapporto di contrasto e le dimensioni del modello dei riquadri.

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. 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 del codice che sono state 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 set di regole mentre quella centrale no.

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

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

    Menu dei comandi

    Figura 7. Menu dei comandi

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

    Mostra copertura

    Figura 8. Mostra copertura

    Si apre la scheda Copertura.

    La scheda Copertura

    Figura 9. La scheda Copertura

  3. Fai clic su Ricarica Ricarica. DevTools ricarica la pagina e registra la quantità di codice utilizzata rispetto alla quantità spedito.

  4. Fai clic su Esporta Esporta per esportare come file JSON.

La copertura del codice è disponibile anche in Puppeteer, uno strumento di automazione del browser gestito dai DevTools dell'IA. 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 una valutazione ). Se il messaggio contiene link, l'ultimo link viene evidenziato per primo. Pressa Invio apre il link in una nuova scheda. Se premi il tasto Freccia sinistra, viene evidenziata la l'intero messaggio (vedi la 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, l'analisi dello stack compressa (oppure un oggetto, un array e così via) attiva).

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 rapporto di contrasto AAA consigliato. 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 rispettano le raccomandazioni AA ma non quelle della batteria AAA. un consiglio per le nuove soluzioni. Quando un colore soddisfa il consiglio della AAA, qualsiasi cosa sullo stesso lato di quel colore che soddisfi i nostri consigli. Ad esempio, nella Figura 15, qualsiasi elemento al di sotto della riga inferiore è AAA, e 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 requisiti della AAA. Se non è possibile rispettare il consiglio della AAA per alcuni prova a rispettare almeno il consiglio di 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.

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

    Menu dei comandi

    Figura 16. 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. Impostazioni > Viene visualizzata la schermata Geolocalizzazioni.

    Scheda Geolocalizzazioni in Impostazioni

    Figura 18. Scheda Geolocalizzazioni in Impostazioni

  4. Fai clic su Aggiungi località.

  5. Inserisci il nome della posizione, la latitudine e la longitudine, poi fai clic su Aggiungi.

    Aggiunta di una geolocalizzazione personalizzata

    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:

  1. Premi F1 per aprire le Impostazioni.
  2. In Impostazioni > Preferenze > Le origini attivano il code folding.

Per piegare un blocco di codice:

  1. Passa il mouse sopra il numero della riga in cui inizia il blocco.
  2. Fai clic su Piega 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 in: Riquadro Network durante l'ispezione di una connessione a un 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 funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e 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 utilizzando Altre opzioni   Altro > 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.

Novità di DevTools

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