Quando você visualiza uma página em seu navegador, na verdade, está visualizando a interpretação que o navegador faz do código HTML/JavaScript/CSS/etc, escrito pelo desenvolvedor da página.

Porém, nem sempre o que você está visualizando no navegador reflete a realidade do código. Para esses casos, temos uma ferramenta presente no Internet Explorer que nos auxilia na depuração do código e a encontrar os possíveis erros que essa página contenha. Essa ferramenta se chama “F12”, já que para ser exibida basta pressionar a tecla F12 do teclado enquanto estiver com o navegador aberto. O resultado que surgirá na barra inferior de seu navegador, será:

Essa ferramenta nos mostra o código por trás da página visualizada de uma forma que podemos enxergar onde os problemas estão, ou qual linha temos que alterar para uma determinada parte da página ser modificada. Isso se torna bastante interessante quando pegamos um código escrito por outra pessoa, mas precisamos alterar alguns campos.

Menu localiza

Um dos elementos mais utilizados dessa ferramenta é a busca de elementos da página, já interpretados pelo navagedor, para encontrar estes elementos no código e editá-los. Podemos pegar uma parte da página selecionando com o mouse, ou buscando na forma de texto.

Via texto, aparece no canto superior direito da ferramenta F12:

Ou por mouse apertando CTRL + B, ou, ainda, indo na aba ‘Localizar -> Selecionar elemento por clique’ e ao passar o mouse, o item ficará com uma borda, e ao clicar, você será direcionado para a parte do código que corresponde a este elemento, como na imagem:

Isso é bastante útil ao herdarmos um código já escrito e termos que modificar alguns de seus elementos, mas não temos a visibilidade do código inteiro, o que levaria tempo para termos.

Menu ferramentas

Dentro do menu ferramentas nós temos um recurso de redimensionamento da página, para que possamos visualizar a página em diferentes resoluções. Essa opção está no menu Ferramentas -> Redimensionar:

Outro recurso do menu ferramentas que auxilia o desenvolvedor é o “selecionador de cores”, onde podemos capturar os valores da cor de algum ponto da página e armazenar este valor.

Podemos também, simular um outro navegador para saber qual o resultado esperado na página, mudando a ‘user agent string’, essa muito famosa hoje, para dizer se o seu navegador, por exemplo, é mobile ou desktop. Um recurso poderoso e particularmente importante, visto a variedade de navegadores presentes nos usuários. Para realizar a tarefa basta ir em:

Menu validar

Um recurso bastante importante e relevante da ferramenta F12, é a possibilidade de validar o seu código, de acordo com os padrões da W3C. Isso vale para HTML, CSS, entre outros, como podemos ver na imagem:

Trabalhando com depuração de JavaScript

Depurar seus scripts com a ferramenta F12 é uma forma rápida de conseguir achar os bugs de seu script, deixá-lo formatado e testar a execução do script linha-a-linha. Para ter acesso aos seus scripts, basta ir na Aba “Script” da ferramenta F12.

Se você possui um código JavaScript sem formatação, basta clicar em “Formatar JavaScript”, como na imagem:

E se voce tem um código assim :

Ele ficará assim:

Para trabalharmos com a depuração, basta incluirmos os ‘breakpoints’ nas linhas em que gostaríamos de analisar e clicar em “Iniciar Depuração”. Podemos pausá-la e trabalhar da maneira que atenda às suas necessidades. Para passar entre as etapas do nosso código, basta pressionar F5.

Para gerenciar os ‘breakpoints’ também é bem simples. Basta clicar no menu “Breakpoints”, localizado do lado direito da ferramenta F12, como a imagem a seguir:

Ainda falando de ‘breakpoints’, podemos colocar interrupções condicionais a cada um dos ‘breakpoints’. Clicando com o botão direito em cima de algum ‘breakpoints’ dentro do menu de breakpoints, temos a opção “Condição”. Essa caixa aceita expressões JavaScript que serão testadas, e em caso positivo (Verdadeiro), a execução será interrompida nesse ponto. Ilustrando:

Para inspecionar variáveis, basta ir na aba “Inspecionar” ou “Watch”, onde serão exibidas as variáveis com detalhes naquele trecho de código selecionado.

Trabalhando com CSS

Na aba “CSS” podemos basicamente:

• Baixar o CSS da página;
• Visualizar/Editar os atributos de CSS da página em tempo real.

Para baixarmos o CSS de uma página basta selecionar o CSS desejado e clicar no disquete ao lado, como na imagem:

A edição e visualização do CSS funciona de maneira bastante semelhante ao modo HTML, portanto, uma vez a ferramenta F12 com HTML, já sabemos como utilizá-la com CSS também.

Utilizando a ferramenta em sua plenitude

Para utilizar todos os recursos disponíveis nesse artigo com a ferramenta F12, bem como ter um navegador atual, recomendamos a instalação do Internet Explorer 9. Ele entrega essa ferramenta sem a necessidade de plug-ins adicionais, vindo direto ao desenvolvedor após a instalação do browser. Para fazer o download, acesse http://www.internetexplorer9.com.br/

Veja ótimas referências sobre compatibilidade e padrões web no HTML5 &Javascript Developer Center

***

Autores

Murilo Maciel Curti (@shinjiR) é membro do time de especialistas em desenvolvimento da Microsoft Brasil com foco em desenvolvimento para Windows, HTML5, Windows Phone e jogos.

Diego Blanco (@diblanco_) é bacharel em Sistemas da Informação, sempre trabalhou com Web e é apaixonado por isso. Tem basicamente dois hobbies, tocar guitarra e estar antenado com as últimas dos Games. Atualmente faz parte da equipe de Audiências Técnicas da Microsoft. www.diblanco.net