O Google I/O 2016 chegou ao fim. O DevTools teve uma forte presença no I/O, incluindo uma palestra de Paul Bakaus, Paul Irlanda e Seth Thompson sobre o futuro dele. Confira o vídeo abaixo ou continue lendo para saber mais sobre o futuro do DevTools a partir de 2016.
Criação
O DevTools visa facilitar cada etapa do ciclo de vida do desenvolvimento da Web. Você provavelmente sabe que o DevTools pode ajudar a depurar ou criar um perfil de um site, mas talvez você não saiba como usá-lo para ajudar a criar um site. Por "criação" queremos dizer o ato de criar um site. Uma das metas no futuro próximo é facilitar a iteração, a experiência e a emulação do seu site em vários dispositivos.
Modo do dispositivo
A equipe do DevTools continua iterando na experiência do Device Mode, que recebeu o primeiro grande upgrade 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 geral é fornecer um fluxo de trabalho contínuo para visualizar e emular seu site em todos os formatos.
Confira um resumo rápido de algumas atualizações do Device Mode que estão chegando ao Canary desde que publicamos o artigo em março.
Ao visualizar uma página como um dispositivo específico, você pode mergulhar ainda mais na experiência mostrando o hardware do dispositivo ao redor da sua página.
O menu de orientação do dispositivo permite visualizar a 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 dispositivo, é possível emular telas de computador maiores do que a tela em que você está realmente trabalhando, como uma tela de 4K (3840 x 2160 pixels).
É possível limitar a rede diretamente na interface do Device Mode, em vez de precisar alternar para o painel Network.
Diferenças de origem
Ao iterar no estilo de um site, é fácil perder o controle das alterações. Para corrigir isso, o DevTools usará dicas visuais na calha de número de linha do painel Sources para ajudar você a acompanhar as 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 é possível acompanhar as mudanças na nova guia da gaveta do código-fonte rápido:
Pela primeira vez, a guia "Origem rápida" permite que você se concentre no código-fonte HTML ou JavaScript e também nas regras de CSS. Além disso, quando você clica em uma propriedade CSS no painel "Estilos", a guia "Fonte rápida" acessa automaticamente a definição na fonte e a destaca.
Ative o experimento de diferença entre origens no Chrome Canary para fazer um teste hoje mesmo.
Edição de Live Sass
Confira algumas das principais melhorias que vão acontecer no fluxo de trabalho de edição do Sass. Esses recursos ainda estão na fase experimental. Vamos avisar em uma postagem posterior quando eles estiverem prontos para você.
Basicamente, o DevTools permitirá visualizar e editar variáveis Sass como você sempre esperava. Clique em um valor que foi compilado usando uma variável Sass, e a nova guia "Fontes rápidas" abrirá para a definição da variável.
Ao editar um valor compilado usando uma variável Sass, sua edição atualiza a variável Sass, não apenas a propriedade individual selecionada.
Progressive Web Apps
Veja a lista de palestras sobre Web e Chrome na Google I/O 2016 e você verá um tema enorme no mundo do desenvolvimento da Web: Progressive Web Apps.
Com o surgimento do modelo de App Web Progressivo, o DevTools está iterando rapidamente para fornecer as ferramentas que os desenvolvedores precisam para criar ótimos Progressive Web Apps. Percebemos que a criação e a depuração desses aplicativos modernos muitas vezes têm requisitos exclusivos. Por isso, o DevTools dedicou um painel inteiro ao desenvolvimento de Progressive Web Application. Abra o Chrome Canary e você verá que o painel "Recursos" foi substituído pelo painel "Aplicativo". Todas as funcionalidades anteriores do painel "Recursos" continuam disponíveis. Há apenas alguns painéis novos projetados especificamente para o desenvolvimento de Progressive Web App:
O painel "Manifest" oferece uma representação visual do arquivo de manifesto do app. Aqui, é possível 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.
E o painel Limpar armazenamento permite apagar todos os tipos de dados para que você possa visualizar uma página limpa.
JavaScript
Ultrapassar a fronteira entre front-end e back-end é uma parte difícil do desenvolvimento da Web de pilha completa. Se você descobrir que seu back-end está retornando um código de status 500 durante a depuração de um app da Web, isso significa que você atingiu o limite de utilidade do DevTools, exigindo a mudança de contexto e a inicialização do ambiente de desenvolvimento de back-end para depurar o problema.
No entanto, com os back-ends escritos em Node.js, os limites entre o front-end e o back-end estão começando a diminuir. Como o Node.js é executado no mecanismo JavaScript V8 (o mesmo que alimenta o Google Chrome), queríamos possibilitar a depuração do Node.js no DevTools. Graças às equipes do V8, DevTools e Google Cloud Platform para Node.js, agora você pode usar todos os recursos avançados de depuração do DevTools para analisar um app Node.js. A funcionalidade já chegou aos builds noturnos do Node.js, embora a integração do DevTools ainda esteja sendo refinada antes de ser incluída em uma versão principal. Algum dia, a depuração do seu app Node.js no DevTools será tão simples quanto transmitir node --inspect app.js e se conectar pelo DevTools em qualquer janela do Chrome.
Embora as ferramentas existentes, como o Node Inspector, ofereçam experiências de depuração baseadas em GUI, a nova integração do Node.js DevTools vai continuar atualizada com os recursos mais recentes de depuração do DevTools, como depuração de pilha assíncrona, ocultação e suporte a ES6.