Debugando seu código com Google Chrome

Fala galera, no artigo de hoje irei abordar um tema que vem sendo muito discutido e feito no desenvolvimento front-end hoje em dia.

Muita gente não sabe, mas os navegadores mais atuais possuem maravilhosas ferramentas de debug de código, o que torna muito mais fácil a vida dos desenvolvedores, pois é possível, diretamente pelo navegador, que seja detectado algum problema, resolvido e testado.

Hoje iremos falar do debug do Google Chrome, abaixo iremos ver o passo a passo para usá-lo e desfrutar da sua maravilhosa ferramenta.

Para acessar as ferramentas de desenvolvimento dos browsers basta apertar a tecla F12 (Pode variar de acordo com o browser e sua versão).

O padrão do chrome é esse:

Figura 1: Padrão do Chrome

Guia Elements

Na guia Elements você vai ter acesso ao DOM da página. Observem que a estrutura exibida não é o HTML original, mas sim o HTML atual, com as alterações feitas por arquivos JS (javascript) e alterações feitas dentro do próprio browser.

Essa guia é uma das ferramentas mais interessantes do Chrome. Nela você pode editar qualquer elemento do seu projeto (entenda por projeto o seu site, app ou o que seja que estiver renderizando no browser), além disso você pode verificar propriedades CSS que o elemento selecionado recebeu. Vamos verificar isso mais a fundo a seguir.

Editando elementos da página pela guia Elements das ferramentas de desenvolvedor.

Vou utilizar o próprio google Docs para exemplificar.

A minha interface esta diagramada conforme a imagem a seguir:

Figura 2: Interface diagramada

Uma maneira de acessar o conteúdo desejado seria navegando dentro da guia Elements até o elemento em questão, porém para facilitar podemos clicar com o botão direito no elemento na página e escolher a opção inspecionar elemento. Automaticamente o browser vai dar foco ao elemento selecionado.

Agora conforme a imagem a seguir, iremos alterar o texto do título do artigo pelo browser.

Figura 3: Alterando título pelo browser

Para isso basta clicar com o botão direito no elemento em foco e escolher a opção “Edit Text”, o browser vai abrir uma caixa de texto e você vai poder editar o texto.

No exemplo usado eu modifiquei para “Alterando o título do artigo no browser”.

Repararam que existe uma opção chamada “Edit as HTML”?

Aqui a mágica acontece. Você pode mudar o HTML do elemento em questão. Ele vai te dar liberdade de fazer qualquer coisa com o elemento, desde adicionar novas classes, alterar o ID, o SRC de alguma imagem, inserir novos elementos.

A partir daqui você tem liberdade para fazer qualquer alteração na página, inclusive, desenvolver uma nova página diretamente no Browser.

Essa ferramenta é simplesmente fantástica. Facilita muito o desenvolvimento de aplicações com muita manipulação do DOM via Javascript.

Outro caso interessante de uso é para criar novas páginas em projetos com um framework CSS/JS robusto.

Basta criar uma página em branco e ir desenhando no Browser sua aplicação. No fim faça um copy/paste do conteúdo e pronto, sua nova página está pronta.

Porém até agora vimos o poder da guia Elements voltado para manipulação do DOM. Não seria tão interessante quanto, poder manipular o CSS dos elementos? Então vamos a segunda parte dessa ferramenta. Na figura 1 é possível notar uma barra lateral nas guia Elements com um menu. Vamos explorar um pouco mais esse menu.

Manipulando o CSS dos elementos pela guia Elements.

Ao inspecionar um elemento qualquer como vimos na primeira parte, temos acesso a ele e podemos manipulá-lo, alterando classes, ids e estilos inline, o que já nos permite alterar o visual da página de certa forma.

Porém usando o menu “Styles” dentro da aba Elements, podemos visualizar propriedades CSS dos elementos, alterar essas propriedades e criar novas propriedades.

Veremos o caso do Globo.com, vamos analisar um elemento e logo após isso alterar suas propriedades.

Figura 4: Analisando elementos da página

Inspecionei o título da principal matéria do Globo.com e ele me trouxe todo o estilo usado nesse elemento.

Uma coisa bem interessante dessa ferramenta é que o browser separa as propriedades de acordo com o local onde foram definidas.

Caso tenha diferentes arquivos CSS sendo usados na página ele exibe exatamente o que cada um tem alterado no elemento. Isso vale também para estilos inline.

Além disso ele exibe quais regras foram sobrescritas o que ajuda em problemas de especificidade CSS e ajuda a planejar melhor sua estrutura CSS.

Fiz uma pequena alteração nos estilos da globo.com. Alterei a fonte padrão do seletor BODY para Comic Sans MS, tirando aquela Arial sem vida do site.

O resultado ficou muito bom como ilustrar a imagem a seguir:

Figura 5: Inserindo propriedades

Observação importante. Todas as alterações ficam presas ao carregamento atual da página.

Ao atualizar ou mudar de página as mudanças feitas na guia Elements assim como em todas as outras serão zeradas.

Guia Resources

Através da guia Resources você terá acesso aos cookies, html5 storage (local storage), App cache e etc.

É uma excelente ferramenta para debugar aplicações que utilizem recursos como cookies ou local storage para armazenar dados.

Figura 6: Guia resources

Uma funcionalidade que senti falta no Resources é a de alterar o valor de um determinado cookie.

Porém podemos excluir caso necessário. Basta clicar e apertar a tecla del.

Guia Network

A guia network é essencial no desenvolvimento de aplicações, principalmente as que fazem requisições AJAX.

Figura 7: Guia Network

Seguem alguns recursos que essa ferramenta oferece:

• Name : Nome do arquivo, assim como endereço, ou seja, o local onde ele se encontra no servidor.
• Method : Retorna o método da requisição (GET/POST).
• Status: Retorna o status da requisição ou se ela ainda se encontra pendente. Com ela você pode verificar quais arquivos retornaram erro (404, 403, 500...) e quais vieram com sucesso, auxiliando muito no debug da aplicação.
• Type : o tipo do arquivo na requisição (json, xml, html...).
• Initiator : Arquivo responsável pela inicialização da requisição (geralmente scripts ou a página ao ser carregada).
• Size : Tamanho do arquivo. Excelente ferramenta para verificar requisições pesadas que afetam a performance do site, assim como verificar se o arquivo está sendo comprimido ou está em cache.
• Time: Tempo que a requisição levou para ser concluída.
• Timeline : Linha do tempo de todas as requisições demonstrando como a página foi carregada. Mais uma ferramenta excelente para otimizações voltadas para performance.

Um recurso interessante na guia Network é que você pode filtrar o tipo de arquivo que quer exibir.

Na base da página tem uma lista de filtros que permite visualizar imagens, scripts, requisições ajax, css e etc. Em aplicações maiores e mais complexas esse tipo de filtro ajuda muito.

Outro recurso útil dessa guia é poder observar o retorno das requisições.

Basta clicar no arquivo desejado que você poderá checar a resposta do servidor caso exista, os headers da requisição, o preview da requisição feita além de cookies setados.

Para aplicações complexas com muitas requisições AJAX essa ferramenta se torna indispensável. É uma forma prática de verificar se a requisição está sendo efetuada da melhor forma possível e se o retorno é o esperado.

Figura 8: Retorno de requisições

Guia Sources

A guia sources permite que você debugue literalmente os seus arquivos javascript.

Nela você pode abrir um arquivo, inserir breakpoints, verificar valores de variáveis em tempo real, entre outros.

Figura 9: Guia Sources

Conclusão

Neste artigo vimos que é possível realizarmos diversos testes em nossos projetos diretamente no nosso navegador. Neste exemplo utilizamos o Google Chrome, que possui um sistema nativo de inspeção, mas caso você utiliza o Firefox, aconselho a utilização do plugin FireBug, é um excelente plugin de inspeção.

Espero que tenham gostado do artigo e até a próxima.