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 CSS e 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.
Blocca le richieste: Disattiva manualmente le singole richieste nel riquadro Rete.
Esegui il passaggio asincrono in attesa. Analizza le funzioni asincrone in modo prevedibile.
Menu Comando unificato: Esegui comandi e apri file con il nuovo Menu dei comandi 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 spedendo solo il codice necessario.

La scheda Copertura

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

Un'analisi della copertura del codice nel riquadro Origini

Ogni riga di codice è codificata per colore:

Verde fissa indica che la riga di codice è stata eseguita.
Rosso fisso indica che non è stato eseguito.
Una riga di codice rossa e verde, ad esempio la riga 3 nello screenshot precedente, significa che è stato eseguito solo alcuni codici su quella riga. Ad esempio, un'espressione ternaria come var b = (a > 0) ? a : 0 è di colore rosso e verde.

Per aprire la scheda Copertura:

Apri il menu Comando.
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 al fondo.

Richieste di blocco

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. Nel riquadro a scomparsa viene visualizzata la nuova scheda Blocco delle richieste, che consente di gestire le richieste bloccate.

Blocca URL richiesta

Aspetta in attesa di Step over asincrono

Finora, provare a esaminare un codice come quello dello snippet seguente era un mal di testa. Saresti a metà di test(), cammini su una linea e poi verresti interrotto dal codice setInterval(). Ora, quando esamini il codice asincrono come test(), DevTools passa dalla prima all'ultima riga con coerenza.

  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 competenze di debug? Dai un'occhiata a questi nuovi documenti:

Modifiche

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

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.