Ferramentas de Inspeção de Código

Com a evolução de softwares desenvolvidos para web, cresceu também o uso das ferramentas de inspeção de páginas que auxiliam o desenvolvimento na depuração do código HTML, Javascript, CSS e validação de acessibilidade da página.

Os navegadores mais utilizados, como Firefox, Chrome, Internet Explorer e Opera já possuem  estas ferramentas.  Pode-se citar  como exemplo o Firebug, Chrome Developer Tools, Opera Dragonfly e Developer Toolbar.

Em alguns navegadores elas já vem por padrão, entretanto às vezes é necessário instalar via plugin. Para utilizar, basta acessar o menu do navegador e procurar pela ferramenta, ou utilizar a tecla de atalho F12.

Abaixo segue uma descrição de algumas funcionalidades de diagnóstico oferecidas:


HTML

Além de conseguir mostrar o código HTML gerado por uma página, os inspetores permitem editar este código e quase instantaneamente ver  o resultado. Isto porque a ferramenta exibe o código de forma hierárquica,  o que possibilita visualizar a estrutura da página codificada, facilitando a realização de modificações. Um exemplo seria verificar como ficaria o layout de uma página após a adição de um novo componente, e isto poderia ser feito para vários navegadores.


CSS

Com relação ao CSS, os inspetores proporcionam para o desenvolvedor uma gama de recursos para inserção e edição.

Por exemplo, ao  clicar em um componente da página, o inspetor lista quais são os CSS aplicados naquele componente e permite que o desenvolvedor desabilite um atributo, altere ou insira um novo. As modificações são refletidas no mesmo instante, ajudando o desenvolvedor a definir o layout da página de forma visual. Desta forma se reduz o tempo de desenvolvimento, por evitar recompilar  todo o projeto antes de ter certeza da alteração.


Javascript

A maioria das ferramentas disponibilizam um recurso que é a depuração de código Javascript. Este recurso serve para acompanhar uma função, verificar se a sintaxe dos comandos está conforme o padrão especificado e se a ação desejada é executada no momento correto.

A análise das funções e comandos são feitas por meio de interrupções, que param a execução do código e deste ponto em diante é possível acompanhar passo a passo a chamada.

Validação de página

No caso da ferramenta Firebug, há um recurso que faz a validação da acessibilidade de uma página HTML. O objetivo é verificar se a estrutura da página está conforme as normas da W3C. É exibido ao usuário a quantidade de erros existentes, apontando o que está fora das normas. A fim de que a página fique mais acessível, também é demostrada a forma correta de utilizar os componentes e seus atributos.


As ferramentas de diagnósticos só devem ser utilizadas com o intuito de tornar mais ágil o desenvolvimento, poupando tempo de compilação, apenas para testar um novo layout ou uma função. Porém, se após as mudanças, o desenvolvedor constatar que as novas alterações são necessárias, ele deve realizá-las no código fonte da aplicação, pois toda vez que uma página é atualizada as mudanças feitas através do inspetor são desfeitas, voltando ao estado original.


Referências:

http://tableless.com.br/ferramentas-de-diagnostico/

http://www.matera.com/br/2012/07/o-que-e-css-e-qual-sua-importancia/

http://www.w3schools.com/js/default.asp

http://www.w3.org/

Por MONISE COSTA

Formada em Sistemas de Informação pela PUC Campinas, MATERANA desde 2011. Apaixonada pela área de TI, Analista de Requisitos na maior parte do tempo e desenvolvedora Java/Android por lazer.

Postado em: 30 de outubro de 2012

Confira outros artigos do nosso blog

REST não é JSON

21 de agosto de 2017

Bruno Sofiato

[Webinar] Profile de aplicações Java com Oracle Mission Control e Flight Recorder

24 de julho de 2017

Danival Calegari

Criando Mocks de serviços REST com SoapUI

27 de junho de 2017

Monise Costa

JavaScript 6: diferença entre var, let e const

09 de maio de 2017

Otávio Felipe do Prado

Deixe seu comentário