DevTools Digest, outubro de 2016

Kayce Basques
Kayce Basques

Olá, sou Kayce, de volta com outro resumo para atualizar você sobre as novidades do DevTools desde o mês passado.

Novos recursos no console

No Chrome 56, que está atualmente no Canary, o console do DevTools é fornecido pelo CodeMirror. Isso ativa vários recursos novos, como:

Destaque de sintaxe enquanto você digita. Antes, o DevTools só podia destacar a sintaxe depois que um bloco de código era avaliado.

Destaque de parênteses / colchetes / chaves correspondentes. Se você tiver parênteses, colchetes ou chaves extras, o DevTools vai destacar em vermelho.

parênteses incompatíveis

Parênteses, colchetes ou chaves correspondentes são destacados em cinza quando o cursor está ao lado de um deles.

parênteses correspondentes

Retorno inteligente. Quando você digita um bloco de código de várias linhas, o DevTools agora sabe se deve criar uma nova linha ou executar o código sempre que você pressiona Enter. Por exemplo, suponha que você queira avaliar o seguinte loop for no console:

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

No passado, pressionar Enter depois de digitar a primeira linha faria com que o DevTools avaliasse a linha, causando um erro. Para continuar o bloco de código em uma nova linha, você precisa pressionar Shift antes de pressionar Enter. Por outro lado, agora as Ferramentas do desenvolvedor continuam automaticamente o bloco de código em uma nova linha depois que você pressiona Enter, como esperado.

Vários cursores. Mantenha pressionada a tecla Command (Mac) ou Control+Alt (Windows, Linux) e clique.

vários cursores

O Canary agora destaca os contextos não principais em vermelho

Se você trabalhou no console recentemente, talvez tenha encontrado um bug que estava definindo o seletor de contexto de execução para valores diferentes de top.

Esse bug foi corrigido na versão estável, mas, por segurança, as DevTools no Canary (Chrome 56) agora avisam que você não está no contexto top realçando o seletor em vermelho.

contexto não principal destacado em vermelho

Novo user agent: UC Browser

Agora é possível selecionar o UC Browser para iOS, Android ou Windows Phone na guia gaveta Condições de rede.

User agent do UC Browser

Compartilhar é cuidar

Como sempre, adoraríamos saber sua opinião ou ideias sobre qualquer coisa relacionada às Ferramentas do desenvolvedor.

  • Entre em contato com a gente no Twitter em ChromeDevTools para perguntas breves ou feedback ou para compartilhar novas ideias.
  • Para discussões mais longas, a lista de e-mails ou o Stack Overflow são as melhores opções.
  • Para qualquer coisa relacionada a documentos, abra um problema no repositório de documentos.
  • Você pode entrar em contato diretamente com a equipe para informar um bug ou solicitar um recurso no Crbug.

Até o próximo mês,

Kayce