Novità di DevTools (Chrome 59)

Kayce Basques
Kayce Basques

Ti diamo il benvenuto in un'altra parte delle note di rilascio di DevTools. Guarda il video 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 di cui hai bisogno.

La 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:

  • 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 sia rossa che verde, come la riga 3 nello screenshot sopra. significa che solo una parte del codice su quella riga è stata eseguita. Ad esempio, un modello come var b = (a > 0) ? a : 0 è di colore sia rosso che verde.
di Gemini Advanced.

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 pulsante destro del mouse sulla richiesta nella sezione Rete. e seleziona Blocca URL richiesta. Una nuova scheda Richiedi blocco viene visualizzata nel riquadro a scomparsa, che ti consente di gestire le richieste bloccate.

Blocca URL richiesta

Esegui passaggio asincroni

Finora, provare a eseguire passaggi di codice come lo snippet seguente era mal di testa. Saresti nel mezzo di test(), oltrepassando una linea e poi verrebbe interrotto dal codice setInterval(). Ora, quando passi un codice asincrono come test(), DevTools i passaggi dalla prima all'ultima riga 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 capacità di debug? Consulta questi nuovi documenti:

Modifiche

Menu Comando unificato

Quando apri il menu Comandi ora, nota che i comandi è preceduto dal carattere "maggiore di" (>). Questo perch�� il comando Il menu è 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 in 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.

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema di DevTools utilizzando Altre opzioni   Altro > 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.

Novità di DevTools

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