O Google I/O 2016 acabou. As DevTools tiveram uma forte presença no I/O, incluindo uma palestra de Paul Bakaus, Paul Irish e Seth Thompson sobre o futuro das DevTools. Confira o vídeo abaixo ou continue lendo para saber mais sobre a direção que o DevTools vai tomar em 2016 e além.
Criação
O objetivo das DevTools é facilitar cada etapa do ciclo de vida do desenvolvimento da Web. Você provavelmente sabe que o DevTools pode ajudar a depurar ou criar o perfil de um site, mas talvez não saiba como usá-lo para criar um site. "Criação" significa o ato de criar um site. Uma das metas para o futuro é facilitar a iteração, a experimentação e a emulação do seu site em vários dispositivos.
Modo do dispositivo
A equipe do DevTools continua iterando na experiência do Modo dispositivo, que recebeu a primeira grande atualização no Chrome 49. Confira a postagem de março (Um novo modo de dispositivo para um mundo que prioriza dispositivos móveis) para ter uma visão geral das atualizações. O objetivo principal é oferecer um fluxo de trabalho perfeito para visualizar e emular seu site em todos os formatos.
Confira um resumo rápido de algumas atualizações do modo dispositivo que foram lançadas no Canary desde que publicamos o artigo em março.
Ao visualizar uma página como um dispositivo específico, você pode se aprofundar mais na experiência mostrando o hardware do dispositivo ao redor da página.
O menu de orientação do dispositivo permite que você visualize sua página quando diferentes elementos da interface do sistema, como a barra de navegação e o teclado, estão ativos.
A história dos computadores também melhorou. Graças ao recurso de zoom do modo de dispositivo, é possível emular telas de computador maiores do que a tela em que você está trabalhando, como uma tela 4K (3840px x 2160px).
É possível limitar a rede diretamente na interface do modo de dispositivo, sem precisar mudar para o painel de rede.
Diferenças de origem
Ao iterar o estilo de um site, é fácil perder o controle das mudanças. Para corrigir isso, o DevTools vai usar dicas visuais no gutter do número da linha do painel "Origens" para ajudar a acompanhar suas mudanças. As linhas excluídas são indicadas com uma linha vermelha, as linhas modificadas são destacadas em roxo e as novas linhas são destacadas em verde.
Também será possível acompanhar suas mudanças na nova guia "Fonte rápida":
Pela primeira vez, a guia "Origem rápida" permite que você se concentre no código-fonte HTML ou JavaScript ao mesmo tempo que suas regras CSS. Além disso, quando você clica em uma propriedade CSS no painel "Styles", a guia "Quick Source" salta automaticamente para a definição na origem e a destaca.
Ative o experimento sources diff no Chrome Canary para testar hoje mesmo.
Edição do Sass em tempo real
Confira uma prévia de algumas das principais melhorias no fluxo de trabalho de edição do Sass. Esses recursos estão na fase inicial de testes. Vamos fazer um acompanhamento em uma postagem futura quando eles estiverem prontos para você testar.
Basicamente, o DevTools vai permitir que você visualize e edite variáveis Sass como sempre quis. Clique em um valor compilado de uma variável Sass, e a nova guia "Fontes rápidas" vai pular para a definição da variável.
Ao editar um valor compilado de uma variável Sass, a edição atualiza a variável Sass, não apenas a propriedade individual selecionada.
Apps Web Progressivos
Na lista de palestras sobre a Web e o Chrome no Google I/O 2016, você vai encontrar um tema muito importante que está surgindo no mundo do desenvolvimento da Web: os Progressive Web Apps.
Com o surgimento do modelo de app da Web progressivo, o DevTools está iterando rapidamente para fornecer as ferramentas necessárias para criar ótimos apps da Web progressivos. Percebemos que a criação e a depuração desses aplicativos modernos geralmente têm requisitos exclusivos. Por isso, o DevTools dedicou um painel inteiro ao desenvolvimento de aplicativos da Web progressivos. Abra o Chrome Canary e você vai notar que o painel "Resources" foi substituído pelo painel "Application". Todas as funcionalidades anteriores do painel "Recursos" ainda estão disponíveis. Há apenas alguns painéis novos criados especificamente para o desenvolvimento de Progressive Web Apps:
O painel "Manifest" mostra uma representação visual do arquivo de manifesto do app. Aqui, você pode acionar manualmente o fluxo de trabalho "Adicionar à tela inicial".
O painel "Service Workers" permite inspecionar e interagir com o service worker registrado para a página atual.
O painel "Limpar armazenamento" permite apagar todos os tipos de dados para que você possa acessar uma página em branco.
JavaScript
Atravessar a fronteira entre front-end e back-end é uma parte difícil do desenvolvimento full-stack da Web. Se você descobrir que o back-end está retornando um código de status 500 durante a depuração de um app da Web, significa que você alcançou o limite de utilidade das Ferramentas do desenvolvedor. Será necessário mudar os contextos e ativar o ambiente de desenvolvimento de back-end para depurar o problema.
No entanto, com os back-ends escritos em Node.js, os limites entre front-end e back-end estão começando a ficar confusos. Como o Node.js é executado no mecanismo JavaScript V8 (o mesmo mecanismo que alimenta o Google Chrome), queríamos permitir a depuração do Node.js nas Ferramentas do desenvolvedor. Graças ao V8, ao DevTools e à Plataforma Google Cloud para equipes do Node.js, agora é possível usar todos os recursos de depuração poderosos do DevTools para inspecionar um app Node.js. A funcionalidade já chegou aos builds noturnos do Node.js, embora a integração do DevTools ainda esteja sendo aprimorada antes de ser incluída em uma versão principal. A depuração do seu app Node.js no DevTools será tão simples quanto transmitir node --inspect app.js e se conectar a partir do DevTools em qualquer janela do Chrome.
Embora ferramentas atuais, como o Node Inspector, ofereçam experiências de depuração baseadas em GUI, a nova integração das Ferramentas do desenvolvedor do Node.js vai continuar atualizada com os recursos de depuração mais recentes das Ferramentas do desenvolvedor, como depuração de pilha assíncrona, caixa preta e suporte ao ES6.