Google reconstrói Dart DevTools do zero no Flutter

Flutter é um estrutura de programação multiplataforma, com o objetivo de resolver os problemas do desenvolvimento de aplicativos multiplataforma sem a confusão do código não nativo. Com conhecimento da linguagem de programação Dart, um desenvolvedor pode criar aplicativos para Android, iOS, web e desktop com uma interface de usuário unificada. Flutuação 1.9 trouxe suporte para macOS e Catalina em estado alfa enquanto o A versão v1.12 amadureceu seu suporte além do estado pré-alfa e a v1.17 do Flutter e v2.8 do Dart marcou seus primeiros lançamentos estáveis ​​em 2020. Hoje, o Google está lançando uma nova versão do DevTools para código Dart e Flutter, que foi reconstruída do zero no Flutter e vem com diversas melhorias.

No anúncio anterior, o Google mencionou sua intenção de trocar a versão atual do Dart DevTools por uma nova versão do Flutter. Isso aconteceu agora que o novo DevTools foi reconstruído do zero no Flutter. Esta nova versão do DevTools adiciona melhorias como alterações nas páginas de desempenho e memória, além de uma página de rede completamente nova.

Mas por que reconstruir algo quando ainda funciona? A equipe por trás do Flutter afirma que os benefícios de produtividade são importantes na construção de alto desempenho UIs, e a melhor maneira de demonstrar confiança nessas afirmações é adotar as mesmas ferramentas para eles mesmos. A reconstrução no Flutter também permite que os desenvolvedores selecionem um modelo de distribuição após escrever o código, o que é um desvio do atual fluxograma de tomada de decisão em que o modelo de distribuição ditaria o código.

O DevTools é fornecido como um aplicativo da web que facilita a integração da ferramenta à experiência de ferramentas existente em todos os plataformas de destino e IDEs. DevTools é um conjunto independente de ferramentas executado no navegador e funciona para aplicativos móveis, aplicativos de desktop e web aplicativos.

DevTools incorpora os seguintes recursos:

• Inspetor de vibração: uma ferramenta para visualizar e explorar árvores de widgets. Você pode selecionar widgets em seu aplicativo em execução, desacelerar todas as animações, ver linhas de base de texto e muito mais.
  • Um dos novos recursos é o Layout Explorer, que você pode encontrar na guia Flutter Inspector ao lado da árvore de detalhes. O Layout Explorer permite inspecionar o modelo de layout flexível do Flutter. A equipe dá um exemplo de como essa ferramenta pode ajudar a depurar por que uma linha de widgets não tem a aparência que o desenvolvedor esperava, por exemplo.

• Visualização da linha do tempo: mostra os tempos de construção para cada quadro e um gráfico em chamas. Isso facilita a identificação de frames problemáticos no contexto.
  • Este painel agora incorpora o novo botão Track Widget Builds que adiciona tempos de construção de todos os widgets em seu aplicativo na linha do tempo (às custas do desempenho da construção do seu perfil - para que não seja ativado por padrão). Isso é útil quando você está tentando descobrir quais widgets, exatamente, estão por trás de um quadro lento.

• Visualização de memória: mostra como seu aplicativo está usando a memória em um determinado momento.
  • Esta visualização agora mostra um mapa de calor da memória alocada e também permite rastrear a memória da plataforma.

• Visualização de desempenho: Este é um criador de perfil de CPU tradicional. Ele permite gravar uma sessão do seu aplicativo e ver em quais funções a CPU passou a maior parte do tempo. Você pode usar isso para decidir onde gastar seu tempo otimizando.
• DevTools inclui até mesmo seu próprio Depurador. Isso pode ser útil se você não estiver usando um IDE, mas ainda quiser a opção de adicionar pontos de interrupção, percorrer o código, espiar valores de variáveis ​​e assim por diante.

• Visualização de rede: isso é completamente novo.
  • Como o próprio nome indica, permite inspecionar o tráfego de rede. Você pode ver todo o histórico de solicitações que seu app fez desde que foi iniciado e obter informações detalhadas sobre cada uma delas. Isso evita que você tenha que registrar esses eventos sozinho ao tentar depurar um problema de rede.
  • A guia Rede atualmente mostra o tráfego HTTP; melhorias futuras incluem mostrar tráfego geral de E/S de soquete.
  • As solicitações de rede também são mostradas na visualização Linha do tempo para que você possa vê-las no contexto.
• Visualização de registro: mostra eventos do seu aplicativo e da estrutura. Com ele, você pode filtrar mensagens facilmente (por exemplo, você pode especificar "-gc" para filtrar eventos do Garbage Collector ou "flutter.frame" para mostrar apenas eventos de quadro). No Dart, registrando mensagens pode ser estruturado, e a visualização Logging faz uso disso.

Para fazer uso completo do DevTools, você pode ler o documentação. Se você encontrar algum bug ou quiser votar em novos recursos, poderá fazê-lo em GitHub.