Flutter: Como “inspecionar” seu aplicativo usando vscode
Uma dos recursos mais interessantes hoje em dia no desenvolvimento web é o Inspecionar que vem de padrão no Google Chrome e em quase todos os browsers também. O inspecionar ajuda a ver o comportamento da aplicação, árvore do DOM, debuggar javascript, acesso aos recursos baixados durante a execução da aplicação, verificar as requisições feitas, verificar cache, limpar cache, limpar cookies. Enfim, é um recurso completo para os desenvolvedores terem controle sobre a aplicação.
No Flutter também temos um recurso parecido com o inspecionar do Chrome, lá temos o "Dart DevTools" que ajuda a verificar a árvore de widgets, pesquisar de onde surgiu o widget, verificar uso de memória, tempo de renderização e alguns outros recursos.
Neste tutorial aprenderemos a como utilizar o Dart DevTools para facilitar o desenvolvimento de aplicativos utilizando o Visual Studio Code.
Configurando o ambiente
Para o tutorial precisaremos que o flutter já esteja no path do nosso OS para conseguirmos criar o aplicativo, se você ainda não possui o flutter basta seguir o tutorial disponível aqui.
Extensões necessárias no Visual Studio Code:
Criando o aplicativo
Depois de instalado o flutter e as extensões, abra o vscode abra o command pallete utilizando o atalho "command + shift + p" no macOS ou "cmd + shift + p" no windows digite
Após criado o aplicativo, inicie uma instância de simulador Android ou iOS e pressione F5.
Agora vamos inspecionar esse aplicativo, volte no vscode abra novamente o command pallete e digite
Ao selecionar a opção, uma nova instância do seu browser irá abrir e mostrará a seguinte página
Agora iremos verificar os recursos mais interessantes do Dart DevTools, vamos lá:
Select Widget Mode
Permite você selecionar um widget diretamente do aplicativo, ao selecionar o vscode irá te levar automaticamente onde o widget foi criado e no dart devtools vai te mostrar todas as propriedades daquele widget no momento que você selecionou.
Refresh Tree
Quando algum widget ter alteração no estado, é importante utilizar o recurso refresh tree para captar as alterações dentro do dart devtools.
Performance Overlay
Recurso para verificar a quantidade de frames que seu aplicativo está executando. Mostra o gráfico de uso da aplicação em tempo real.
Debug Paint
Recurso para que ajuda a verificar cada widget da sua árvore, ele exibe as linhas de dimensão de cada widget. Recurso muito bom e fica melhor ainda quando combinado com o Select Widget Mode, pois aumenta a precisão na hora de selecionar um widget específico.
Timeline
O timeline serve para ver o tempo gasto ao executar alguma ação no aplicativo em milessegundos, ele separa o tempo gasta com o processamento (GPU) e o tempo gasto na interface (UI).
Memory
Memory é um recurso essencial para evitar memory leak dentro do nosso aplicativo, ele permite monitorar o tanto de memória ram que nosso aplicativo está gastando.
Logging
No logging temos acesso a todas interações da nossa aplicação, o logging exibe mensagens de alerta, erros e também os prints, como se fosse o console do depurador web.
Debugger
O debugger como o próprio nome já diz, te permite debugar a aplicação, porém como estamos no vscode por padrão ao utilizar o F5 podemos debugar diretamente por lá.
Conclusão do autor
O pessoal da equipe do Flutter se preocupou bastante no dev experience e isso também deve ser levado em consideração na hora de escolher um framework para o desenvolvimento mobile.
Uma coisa que achei que poderia melhorar é o Inspector permitir alterar o valor das propriedades diretamente, como o navegador permite alterar qualquer elemento do DOM com o inspecionar.
O profiler é muito útil para medir a performance do aplicativo e se ele está usando muita memória.
Tem alguns pontos a melhorar, mas acredito que em breve teremos muitas novidades na ferramenta e no flutter também.
Sobre o autor da publicação
Sou Fabiano Santana, tenho 23 anos. Arquiteto de Sistemas com foco em .NET e Analista de Experiência do Usuário, conhecido como o famoso desenvolvedor Full Stack (prefiro chamar de fullydev) e UI Design. Amo de coração criação de UI e como ela aproxima as pessoas.
Seguem meus contatos caso queiram tirar alguma dúvida ou fazer sugestões para melhoria.
