Novidades Visual Studio 2008 Parte 2 - Debug de JavaScript
E ai pessoal, tudo bem?
Continuando com a série de artigos com as novidades do Visual Studio 2008 hoje vou mostrar um dos recursos que deixa qualquer desenvolvedor “babando”.
Bom, uma das minhas grandes reclamações ao utilizar JavaScript consistia em não conseguir debugar o código JavaScript como nós conseguimos fazer com códigos em C#, VB.NET nas aplicações ASP.NET e Windows por exemplo.
Acho que a maioria dos desenvolvedores quando queriam debugar um código JavaScript recorriam ao velho amigo alert, mas convenhamos é muito trabalhoso isso. Com a evolução dos navegadores alguns disponibilizam agora o que chamam de Developer Tools que já facilita e até suporta em alguns casos debug de JavaScript, mas não seria bem melhor se a ferramenta de desenvolvimento suportasse esse recurso nativamente?
Para demonstrar esse recurso é necessário o Visual Studio 2008 instalado, não necessita do SP1 para debugar JavaScript, o recurso é nativo da versão 2008 do Visual Studio.
Crie um novo WebSite, por padrão já será criado um arquivo chamado Default.aspx, clique duas vezes sobre o arquivo Default.aspx, caso o seu Visual Studio abra o arquivo no modo design, clique na opção Source como pode ser visto na figura 01 para visualizar o HTML do arquivo.
Figura 01. Clique em Source para visualizar o HTML do arquivo.
Agora vamos criar um código JavaScript simples que mostra um alert de um determinado texto, vamos criar uma função chamada MessageBox que recebe como parâmetro o texto que será mostrado. O código pode ser visualizado na figura 02.
Figura 02. Código JavaScript com o método MessageBox
Muito bem, agora vamos arrastar o controle Button para página e definir na propriedade OnClientClick a função que será executada quando o botão for pressionado pelo cliente, repare que já vamos chamar a função passando o valor que será mostrado no alert, no caso será mostrado SharpCode. O código com o Button chamando o JavaScript pode ser visualizado na figura 03.
Figura 03. Código do Button chamando a função MessageBox.
Agora podemos compilar nosso projeto pressionado a tecla F5. Caso a janela mostrada na
figura 04 aparecer, marque o primeiro
RadioButton e clique em OK para habilitar Debug no seu projeto. Outro detalhe importante, é necessário habilitar uma opção no IE para conseguir debugar o JavaScript, siga os seguintes passos para fazer a modificação no IE:
Menu Ferramentas > Opções da Internet > Aba Avançadas > Navegação > Desabilitar Depuração de Script (Internet Explorer) / Desabilitar Depuração de Script (Outros).
Figura 04. Habilitar debug no projeto.
Com o projeto compilado e aberto no IE, clique no botão para testarmos o código, se tudo der certo será mostrada uma janela com o texto SharpCode como na figura 05.
Figura 05. Janela mostrando o texto SharpCode quando o botão é pressionado.
Agora com o projeto ainda compilado, volte para o Visual Studio e coloque um breakpoint na linha do alert do código JavaScript da forma como está na figura 06.
Figura 06. Breakpoint no código JavaScript.
Volte para o IE e pressione o botão novamente e pronto, a execução vai parar na linha com o breakpoint como estamos acostumados a fazer em C# ou VB.NET, para mostrar o poder que temos em mãos, vou alterar em tempo de execução o valor que será mostrado na janela de alerta como pode ser visualizado na figura 07.
Figura 07. Modificando valor da variável em tempo de execução.
Agora podemos pressionar F10 para o código pular para a próxima linha e veremos a janela mostrando o novo texto. Veja a figura 08.
Figura 08. Janela de alerta mostrando o novo texto modificado em tempo de execução.
Nesse pequeno exemplo procurei mostrar como é possível debugar códigos JavaScript utilizando o Visual Studio 2008, esse com certeza é um recurso que deixa todos que o conhecem impressionados.
Qualquer dúvida, sugestão, critica ou mais informações sobre debug de JavaScript por favor envie um e-mail para marcio@sharpcode.com.br.
Até o próximo artigo onde veremos Intellisense para JavaScript.
Abraços.