Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di DevTools (Chrome 59)

Kayce Basques

Ti diamo il benvenuto in un'altra parte delle note di rilascio di DevTools. Guarda il video di seguito o continua a leggere per scoprire le novità di Chrome DevTools in Chrome 59.

In evidenza

Copertura del codice CSS e JS. Trova i CSS e i file JS inutilizzati con la nuova scheda Copertura.
Screenshot a pagina intera. Acquisisci uno screenshot dell'intera pagina, dalla parte superiore dell'area visibile verso il basso.
Richieste di blocco. Disattiva manualmente le singole richieste nel riquadro Rete.
Passa al passaggio asincrono in attesa. Segui le funzioni asincrone in modo prevedibile.
Menu Comando unificato. Esegui comandi e apri i file dal menu Comando appena unificato.

Nuove funzionalità

Copertura del codice CSS e JS

Trova il codice CSS e JS inutilizzato con la nuova scheda Copertura. Quando carichi o esegui una pagina, la scheda indica quanto codice è stato utilizzato e quanto è stato caricato. Puoi ridurre le dimensioni delle pagine inviando solo il codice necessario.

La scheda Copertura

Se fai clic su un URL, il file viene visualizzato nel riquadro Origini con un'analisi delle righe di codice eseguite.

Un'analisi della copertura del codice nel riquadro Sorgenti

Ogni riga di codice è codificata per colore:

La spia verde fissa indica la riga di codice eseguita.
La spia rossa fissa indica che l'esecuzione non è stata eseguita.
Una riga di codice rossa e verde, come la riga 3 dello screenshot riportato sopra, significa che è stato eseguito solo una parte del codice su quella riga. Ad esempio, un'espressione ternaria come var b = (a > 0) ? a : 0 è colorata sia in rosso che in verde.

Per aprire la scheda Copertura:

Apri il menu dei comandi.
Inizia a digitare Coverage e seleziona Mostra copertura.

Screenshot a pagina intera

Guarda il video qui sotto per scoprire come acquisire uno screenshot dalla parte superiore della pagina fino in fondo.

Blocca richieste

Vuoi vedere come si comporta la tua pagina quando uno script, un foglio di stile o un'altra risorsa non è disponibile? Fai clic con il tasto destro del mouse sulla richiesta nel riquadro Rete e seleziona Blocca URL richiesta. Viene visualizzata la nuova scheda Blocco delle richieste nel riquadro a scomparsa, che ti consente di gestire le richieste bloccate.

Blocca URL richiesta

Esegui passaggio asincroni

Finora, ho provato a eseguire vari passaggi di codice come quello nello snippet seguente è stato un mal di testa. Saresti nel bel mezzo di test(), oltrepassando una riga e potresti essere interrotto dal codice setInterval(). Ora, quando esegui un codice asincrono come test(), DevTools passa dalla prima all'ultima riga in modo coerente.

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInterval(() => 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

P.S. vuoi migliorare le tue capacità di debug? Consulta questi nuovi documenti:

Modifiche

Quando apri il menu Comandi ora, nota che il comando è preceduto da un carattere maggiore di (>). Questo perché il menu Comando è stato unificato con il menu Apri file, che è Comando+O (Mac) o Ctrl+O (Windows, Linux).

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.