Como fazer debug dos Web Resources no browser

by Pedro Azevedo 17. October 2014 01:47

Boas pessoal,

Neste post vou continuar o assunto de realizar debug sobre as nossas soluções de CRM. No post anterior aprendemos a realizar debug sobre um plugin no CRM Online. Hoje vamos falar como realizar debug sobre o Javascript, como vamos utilizar as ferramentas de programador e vou tentar mostrar dos vários browsers, vamos dar um olhinho como é que obtemos os ids dos elementos que queremos trabalhar e aplicar um Javascript não customizado em cima.

Então como referi vamos usar essencialmente as ferramentas de programador de cada um dos browsers.

O firefox tem uma extensão muito conhecida chamada FireBug, por isso o primeiro passo é instalar esta extensão:

 Depois de instalar basta pressionar F12 ou utilizar um dos botões de atalho que vão aparecer no browser:

Este é o aspeto da nossa ferramenta que neste momento está presa no fundo da página mas podemos correr esta aplicação numa janela a parte. Na “Consola do Terminal” vamos ver todo o feedback sobre esta página, se por exemplo tivermos um console.log é nesta tab que vamos ver esse resultado, bem como se houver algum erro é aqui que vemos. Nesta tab ainda podermos executar código Javascript.

A tab do HTML permite-nos visualizar o DOM desta página e localizar elementos através do botão do retângulo com um cursor ao lado do símbolo do firebug, esta é uma das funcionalidades que mais uso pois permite-nos saber por exemplo o ID dos elementos HTML que usamos depois para aplicar um Javascript não customizado:

Como podemos comprovar eu carregando no icon para pesquisa de elementos, e selecionar um elemento posso ver todas as propriedades\eventos e com isso “sacar” o id desse elemento, que neste caso é o “form_pic_image”.

Na tab CSS posso visualizar todos os estilos que foram carregados nessa página.

No âmbito do assunto mais importante para este post temos a tab do Script que permite-nos ver todos os scripts que estão a ser carregados na página e mais importante permite-nos realizar debug sobre esses mesmos scripts:

Nesta tab temos a possibilidade de ver o código Javascript e conseguimos colocar variáveis de “Vigia” para podermos consultar o estado atual dessas mesmas variáveis. Ao selecionarmos na caixa de seleção podemos visualizar outros ficheiros de Javascript:

Aqui podemos visualizar os ficheiros dos nossos Recursos Web, sejam eles do tipo Javascript ou HTML, já que os ficheiros HTML podem também ter código Javascript. Escolhendo por exemplo o Recurso Web “new_putgridreadonly”:

Sobre este ficheiro podemos colocar breakpoints, basta para isso carregar no espaço em branco do lado direito no número da linha. Outra alternativa para o código Javascript parar é colocarmos a palavra reservada, no código Javascript:

debugger;

Se atualizarmos a página onde estamos vamos parar naquele sítio:

Como podemos comprovar pela seta amarela estou em debug e agora posso usar os icons de andar para a frente ou utilizar os mesmos shortcuts que usamos no Visual Studio F10 para continuar e F11 para entrar dentro da função, cuidado que o F5 aqui vai refrescar a página, neste caso é o F8. Como ainda podemos ver se eu colocar o cursor sobre a variável consigo ver o seu valor e posso ainda adicionar as variáveis de Vigia e ver mais pormenores.

Há mais uma tab que eu gostava de realçar que é a tab de Rede, uma das que mais utilizo e permite vermos o que está a ser carregado na página e por exemplo quanto tempo demorou a carregar, por exemplo para verificar o que uma chamada ODATA ou SOAP está a retornar é excelente:

Como podem ver na segunda imagem tenho uma chamada aos WebServices do CRM e onde posso ver o que foi enviado e a reposta que recebemos é muito útil.

Uma última coisa que não podemos esquecer que é a pesquisa que facilita muito as coisas, pois se tivermos a visualizar elementos pode-se colocar logo um id específico por exemplo e no Javascript pode-se pesquisar pelo nome de uma função.

Nos restantes browsers é tudo muito parecido, por exemplo no Chrome e no Opera as ferramentas de programador são muito parecidas e já vêm embutidas no browser, bastando no caso do chrome premir a tecla F12, no caso do Opera é diferente pois primeiro temos que ativar estas ferramentas e só depois é que as podemos invocar com Ctrl+Shift+I:

Os conceitos são exatamente iguais só que em tabs diferentes. Vamos ver especificamente o debug do Javascript:

As coisas só estão dispostas de maneira diferente mas o resultado vai ser igual, o breakpoint é sinalizado pelo bookmark azul. Quando atualizamos a página temos este ambiente:

No IE temos atualmente duas versões das ferramentas para o programador, uma antes do IE11 e com o IE11, estas ferramentas já vêm por defeito bastando premir o F12, mais uma vez as coisas são muito parecidas com os restantes browsers:

Uma coisa que acontece nesta ferramenta e que já não acontece com o IE11 (prometo brevemente colocar aqui imagens do IE11) é que nós temos que dizer que queremos começar a fazer debug ou nas capturas de rede que queremos começar a capturar, ou seja, ele por defeito não vai fazer nenhuma destas coisas, saltando diretamente para a tab “Script”:

Ao fazermos atualizarmos a página podermos realizar o debug ao Javascript, de referir que aqui o F5 já funciona. Como eu referi anteriormente é possível acrescentarmos um breakpoint escrevendo no código a palavra reservada debugger, mas para ele parar teremos primeiro que averiguar duas configurações em: Ferramentas -> Opções de Internet -> Avançadas e retirar o pisco desta duas configurações:

Como podem ver não é nada específico do Dynamics CRM vocês podem aplicar isto a qualquer aplicação Web. Em relação ao meu preferido não tenho, vario muitas vezes e quando não estou a conseguir ver num salta para outro que me dá outro tipo de feedback. Havia muito para falar mas foi uma breve introdução.

 

Até a próxima.

Tags: , , , ,

Comments (1) -

Penelope Gonnerman
Penelope Gonnerman United States
1/29/2015 10:10:31 PM #

Howdy. Very nice blog!! Guy .. Beautiful .. Amazing .. I'll bookmark your web site and take the feeds additionally...I am happy to locate a lot of useful information right here in the post. Thank you for sharing. http://www.bararabere.com

Reply

Pingbacks and trackbacks (1)+

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

About

Muito bem casado, Pai babado e um gosto muito grande pela tecnologia.

Tenho um lema "Sharing is Learning"

Mais aqui -> http://www.psazevedo.com

Month List