Inspecione componentes e serviços Blazor de dentro do Chrome DevTools
Blazor Dev Tools, criado por Alex Howard, é uma extensão do Chrome que ajuda os desenvolvedores a depurar aplicações ASP.NET Core Blazor durante o desenvolvimento. Ele adiciona um painel de inspeção às DevTools do navegador para exibir relacionamentos de componentes e informações de tempo de execução sem depender do registro no console. A extensão detecta hosts Server e WebAssembly e requer uma pequena integração de tempo de execução via um pacote NuGet. Seu público-alvo são desenvolvedores Blazor que preferem depuração visual e ciente do tempo de execução enquanto codificam localmente.
Como a ferramenta expõe os internos do componente em tempo real
A extensão fornece um fluxo de inspeção visual que move a depuração dos logs do console para um painel dedicado do DevTools. Dentro desse painel, você pode visualizar uma árvore de componentes em tempo real e inspecionar valores de parâmetros, parâmetros em cascata, tipos declarados e estado interno para nós selecionados. Um seletor de elementos vincula elementos DOM às suas entradas de componente, ajudando você a rastrear caminhos de renderização e mudanças de estado enquanto interage com a página.
O que você deve instalar e onde aparece
A instalação tem duas partes: adicione a extensão do Chrome e inclua o pacote NuGet no projeto Blazor, em seguida, registre seu serviço em Program.cs. Após a configuração, o inspetor aparece como uma aba 'Blazor' no DevTools (abra com F12 ou Inspecionar). A ferramenta autodetecta a hospedagem Server ou WebAssembly, então o mesmo fluxo de inspetor funciona para ambos os modelos de hospedagem.
Como trata produção e segurança
A segurança está embutida na limitação de tempo de execução. A ferramenta se desabilita fora do modo de Desenvolvimento, evitando a exposição de metadados de componentes em sites de produção. Essa limitação automática significa que os projetos não servem os ganchos de tempo de execução necessários para inspeção após a implantação, mantendo parâmetros de componentes e arranjos de serviços fora de builds públicas, enquanto preserva diagnósticos locais e de staging.
Quem se beneficia e como molda fluxos de trabalho de depuração
Ela se adapta a desenvolvedores que estão migrando de ferramentas de desenvolvimento JavaScript para .NET. O painel oferece um fluxo de inspeção semelhante ao React que reduz a necessidade de mapear manualmente HTML para arquivos .razor. O visualizador DI revela quais serviços um componente resolve, o que ajuda ao solucionar comportamentos dependentes de serviços em bases de código de médio a grande porte. Equipes que preferem rastros visuais em vez de logs ad-hoc ganham o maior aumento de produtividade.
Mais adequado para fluxos de trabalho de desenvolvimento que aceitam uma pequena alteração no projeto
A ferramenta é uma escolha prática para desenvolvedores Blazor que precisam de visibilidade direta em tempo de execução durante o desenvolvimento. A compensação requer a adição de um pequeno gancho em tempo de execução aos projetos e aceita que o inspetor não esteja disponível após a implantação. Portanto, é adequada para equipes que priorizam um diagnóstico visual mais rápido de problemas de componentes enquanto codificam localmente, em vez de inspeção remota após a implantação.
