Digest DevTools, ottobre 2016

Ciao Kayce, ecco un altro riepilogo delle novità di DevTools dal mese scorso.

Nuove funzionalità nella console

In Chrome 56, attualmente nella versione canary, la console DevTools si basa su CodeMirror. Questo consente una serie di nuove funzionalità, come:

Evidenziazione della sintassi durante la digitazione. In precedenza, DevTools poteva evidenziare la sintassi solo dopo aver valutato un blocco di codice.

Evidenziazione di parentesi / parentesi graffe / parentesi corrispondenti. Se c'è una parentesi, una parentesi graffa o una parentesi graffa in più, DevTools la mette in evidenza in rosso.

parentesi non corrispondente

Le parentesi tonde, parentesi graffe o parentesi graffe vengono evidenziate in grigio quando il cursore si trova accanto a uno di questi.

parentesi corrispondenti

Reso intelligente. Quando digiti un blocco di codice su più righe, DevTools ora sa se creare una nuova riga o eseguire il codice ogni volta che premi Invio. Ad esempio, supponi di voler valutare il seguente loop for nella console:

for (var i = 0; i < 5; i++) {
  console.log(i);
}

In passato, premendo Invio dopo aver digitato la prima riga, DevTools avrebbe dovuto valutare la riga, causando un errore. Per continuare il blocco di codice su una nuova riga, devi tenere premuto Maiusc prima di premere Invio. Al contrario, ora DevTools continua automaticamente il blocco di codice su una nuova riga dopo aver premuto Invio, come previsto.

Più cursori. Tieni premuto Comando (Mac) o Ctrl+Alt (Windows, Linux), quindi fai clic.

più cursori

La versione canary ora mette in evidenza in rosso i contesti non principali

Se di recente hai lavorato nella console, potresti aver avuto un piccolo bug che impostava il selettore di contesto di esecuzione su valori diversi da top.

Il bug dovrebbe essere stato corretto nella versione stabile. Tuttavia, per sicurezza, DevTools in Canary (Chrome 56) ora ti avvisa che non ti trovi nel contesto top evidenziando in rosso il selettore.

contesto non in alto evidenziato in rosso

Nuovo user agent: UC Browser

Ora puoi selezionare UC Browser per iOS, Android o Windows Phone dalla scheda del riquadro a scomparsa Condizioni di rete.

User agent UC Browser

Condividere è curare

Come sempre, ci piacerebbe ricevere il tuo feedback o le tue idee su qualsiasi argomento relativo a DevTools.

  • Invia un ping a ChromeDevTools su Twitter per brevi domande o feedback o per condividere nuove idee.
  • Per discussioni più lunghe, la mailing list o Stack Overflow sono le soluzioni migliori.
  • Per qualsiasi cosa relativa ai documenti, apri un problema nel nostro repository di documenti.
  • Puoi sempre rivolgerti direttamente al team per segnalare un bug o richiedere una funzionalità su Crbug.

Fino al prossimo mese,

Chiara