Novità di DevTools (Chrome 59)

Kayce Basques

Ti diamo il benvenuto in un'altra puntata 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

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 la quantità di codice utilizzata rispetto a quella caricata. Puoi ridurre le dimensioni delle pagine inviando solo il codice necessario.

Scheda Copertura

Se fai clic su un URL, il file viene visualizzato nel riquadro Risorse con una suddivisione delle righe di codice eseguite.

Una suddivisione della copertura del codice nel riquadro Origini

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 nello screenshot sopra, significa che è stato eseguito solo parte del codice in 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:

  1. Apri il menu dei comandi.
  2. 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 alla parte inferiore.

Bloccare le richieste

Vuoi vedere il comportamento della tua pagina quando un determinato script, foglio di stile o altra risorsa non è disponibile? Fai clic con il tasto destro del mouse sulla richiesta nel riquadro Rete e seleziona Blocca URL richiesta. Nel riquadro laterale viene visualizzata una nuova scheda Blocco richieste che ti consente di gestire le richieste bloccate.

Blocca URL richiesta

Esegui passaggio asincroni

Fino a oggi, provare a eseguire il codice come lo snippet riportato di seguito era un problema. Saresti nel mezzo di test(), passeresti una riga e poi l'esecuzione verrebbe interrotta dal codice setInterval(). Ora, quando esegui la procedura guidata per esaminare il 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 competenze di debug? Dai un'occhiata a questi documenti relativamente recenti:

Modifiche

Menu dei comandi unificati

Quando apri il menu di comando, noterai che al comando è anteposto un carattere maggiore (>). Questo perché il menu di comando è stato unito al menu Apri file, che si attiva con Comando+O (Mac) o Ctrl+O (Windows, Linux).

Scaricare i canali di anteprima

Valuta la possibilità di utilizzare Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano gli utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.

Novità di DevTools

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