Novità di DevTools (Chrome 59)

Kayce Basques
Kayce Basques
X GitHub

Ti diamo il benvenuto a un altro aggiornamento delle note di rilascio di DevTools. Guarda il video qui sotto 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 di cui hai bisogno.

Scheda Copertura

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

Una suddivisione della copertura del codice nel riquadro Origini

Ogni riga di codice è codificata per colore:

  • Il verde fisso indica che la riga di codice è stata eseguita.
  • Il colore rosso fisso indica che non è stato eseguito.
  • Una riga di codice sia rossa che verde, come la riga 3 nello screenshot precedente, indica che è stato eseguito solo parte del codice su quella riga. Ad esempio, un'espressione ternaria come var b = (a > 0) ? a : 0 è colorata sia di rosso che di 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 in fondo.

Bloccare le richieste

Vuoi vedere come si comporta la tua pagina quando una determinata risorsa, come 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 si apre una nuova scheda Blocco richieste, che ti consente di gestire le richieste bloccate.

Blocca URL richiesta

Esegui istruzione/routine asincrona

Fino ad ora, il tentativo di eseguire il debug del codice come lo snippet riportato di seguito era un mal di testa. Ti troveresti nel bel mezzo di test(), supereresti una riga e poi verresti interrotto dal codice setInterval(). Ora, quando esegui il debug del 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 recenti:

Modifiche

Menu dei comandi unificato

Quando apri il menu dei comandi, nota che il comando è preceduto dal carattere maggiore di (>). Questo perché il menu dei comandi è stato unificato con il menu Apri file, che è Comando+O (Mac) o Controllo+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 funzionalità più recenti di DevTools, testare le API della piattaforma web all'avanguardia e trovare problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

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

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.