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

Nuove funzionalità

Copertura del codice CSS e JS

Trova il codice CSS e JS inutilizzato con la nuova scheda Copertura. Quando carichi o una pagina, la scheda indica quanto codice è stato utilizzato e qual è caricato. 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 Origini con una suddivisione di quali righe di codice eseguite.

Un'analisi della copertura del codice nel riquadro Sorgenti

Ogni riga di codice è codificata per colore:

  • Il verde fisso indica che la riga di codice è stata eseguita.
  • Rosso fisso indica che 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 in fondo.

Blocca richieste

Vuoi vedere come si comporta la tua pagina quando un determinato script, foglio di stile o non è disponibile un'altra risorsa? 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 capacità di debug? Consulta questi nuovi documenti:

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 in 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, 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.

Novità di DevTools

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