Depurar script de cliente

  • 3 minutos

Quase todo navegador moderno tem uma extensão de depuração que dá suporte à captura de tráfego de rede, à análise de conteúdo de página e à depuração de scripts de cliente. Os seguintes conjuntos de ferramentas são úteis para executar operações de depuração:

  • Microsoft Edge (por meio das Ferramentas de Desenvolvimento F12). Para obter mais informações, consulte o guiaUsar as ferramentas de desenvolvimento F12.

  • Google Chrome (por meio das Ferramentas de Desenvolvimento F12)

  • Mozilla Firefox (usando o Firebug)

  • Apple Safari (usando o Web Inspector)

Exibir recursos de script

Quando a página do formulário do aplicativo baseado em modelo é carregada, todas as bibliotecas de scripts do cliente são carregadas junto com a página da Web como recursos de script individuais. Devido ao volume de recursos de script necessários para executar um aplicativo baseado em modelo, pode ser difícil localizar um arquivo que você queira depurar. Ao usar ferramentas de depuração como o Microsoft Edge, recomendamos que você anote o nome do arquivo e use os recursos de pesquisa da ferramenta para localizar os arquivos de script.

Gravar mensagens no console

O uso do método window.alert ao depurar problemas de JavaScript ou de uma instrução do depurador para interromper a execução ainda é comum para solucionar problemas de código no aplicativo. Porém, agora que todos os navegadores modernos fornecem acesso fácil a ferramentas de depuração, não é uma prática recomendada, pois outras pessoas podem estar usando o aplicativo que você está depurando no momento. Essas chamadas de depuração também costumam ser deixadas inadvertidamente no código, causando problemas para os usuários do aplicativo em produção.

Em vez disso, considere gravar suas mensagens no console. Aqui está uma pequena função que você pode adicionar a suas bibliotecas para ajudar a enviar quaisquer mensagens que deseja exibir para o console quando ele estiver aberto.

function writeToConsole(message)
{
 if (typeof console != 'undefined') {
  console.log(message);
 }
}

Diferentemente do método de alerta, se você esquecer de remover algum código que use essa função, as pessoas que usam o aplicativo não verão suas mensagens. Também é útil ao solucionar problemas de comportamento do aplicativo na produção sem causar interrupções para os usuários do aplicativo.

Usar o Auto-Responder do Fiddler para substituir o conteúdo de recursos da Web

Editar constantemente recursos da Web quando eles estão em desenvolvimento pode ser difícil e demorado. Você deve republicar os arquivos em uma solução a cada edição e limpar o cache do navegador da versão anterior dos recursos. Além disso, se vários desenvolvedores compartilharem o ambiente, isso poderá ser prejudicial para outros.

Para melhorar a eficiência, considere usar uma ferramenta (como Auto-Responder no Telerik Fiddler) para substituir o conteúdo de um recurso da Web pelo conteúdo de um arquivo local, em vez de carregá-lo e republicá-lo repetidamente. Várias outras ferramentas de terceiros que também permitem a edição dinâmica podem ser consideradas. Para obter mais informações sobre como instalar e configurar o Fiddler Auto-Responder, consulte Desenvolvimento de recursos da Web de script usando Auto-Responder do Fiddler.