Digest DevTools, ottobre 2016

Ciao, sono Kayce e sono qui per un altro riepilogo delle novità di DevTools dal mese scorso.

Nuove funzionalità nella console

In Chrome 56, attualmente in Canary, la console di DevTools è basata su CodeMirror. In questo modo, puoi usufruire di una serie di nuove funzionalità, ad esempio:

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

Evidenziazione delle parentesi tonde / tra parentesi / tra parentesi graffe corrispondenti. Se hai una parentesi, una parentesi graffe o una graffa aggiuntiva, DevTools la evidenzia in rosso.

parentesi non corrispondenti

Le parentesi tonde, le parentesi quadre o le parentesi graffe corrispondenti vengono evidenziate in grigio quando il cursore si trova accanto a una di queste.

parentesi con corrispondenza

Ritorno 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, supponiamo che tu voglia valutare il seguente ciclo for nella console:

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

In passato, premere Invio dopo aver digitato la prima riga avrebbe causato la valutazione della riga da parte di DevTools, generando un errore. Per continuare il blocco di codice in una nuova riga, devi aver tenuto premuto Maiusc prima di premere Invio. Al contrario, ora DevTools continua automaticamente il blocco di codice su una nuova riga dopo che hai premuto Invio, come previsto.

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

più cursori

Canary ora evidenzia in rosso i contesti non principali

Se di recente hai utilizzato la console, potresti aver riscontrato un piccolo bug che impostava il selettore del contesto di esecuzione su valori diversi da top.

Il bug dovrebbe essere stato corretto nella versione stabile, ma, per sicurezza, gli strumenti di Dev in Canary (Chrome 56) ora ti avvisano che non sei nel contesto top evidenziando il selettore in rosso.

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 Condizioni di rete.

User agent di UC Browser

Condividere è un atto di generosità

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

  • Contattaci all'indirizzo 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 opzioni migliori.
  • Per qualsiasi problema relativo ai documenti, apri un problema nel nostro repository dei documenti.
  • Puoi sempre rivolgerti direttamente al team per segnalare un bug o richiedere una funzionalità su Crbug.

A presto,

Kayce