Desenvolvimento: Firebug + JSON

AGRADEÇA AO AUTOR COMPARTILHE!

Como saber se os valores que a aplicação/página está enviando para o controler ou recebendo estão corretos?

firebugEssa semana fiquei quase um dia inteiro tentando corrigir um bug numa página e estava certa de que o problema estava no código da página, e não na lógica de negócio que havia implementado. Depois de um certo tempo, tive a idéia de verificar se os valores que a página estava recebendo eram os valores corretos (isso deveria ter sido a primeira coisa que deveria ter feito). Enfim, após verificar, vi que os valores estavam errados e finalmente pude corrigir o código.

A mágica que usei pra isso? Não, não foi debugando o código. É uma ferramenta mil e uma utilizades que todo desenvolvedor deveria ter instalado no Firefox: o famoso e tão querido Firebug!

Além das funcionalidades de inspecionar HTML, CSS, etc, também possui a funcionalidade do console, que mostra erros de javascript e ainda todo o conteúdo que é enviado e recebido por uma requisição.

Como ultimamente tenho trabalhado bastante com JSON, utilizo mais a ferramenta para verificar o JSON retornado e para debugar código javascript. A partir da versão 1.4 do Firebug, adicionaram uma nova aba ao console, que dá pra visualizar o objeto JSON como se fosse um objeto, mostrando sua estrutura, e assim ficou muito mais simples.

O exemplo que vou utilizar neste post, é o projeto ‘Como construir um grid dinâmico utilizando Ext JS‘.

O primeiro passo, é ativar a opção console para a página do projeto:

firebug_json_02

Após a ativação, vamos dar um refresh na pagina. Observe que já aparecem duas ações executadas pela página.

firebug_json_01

Vamos dar uma olhada na primeira ação GET, que foi a chamada do método getColumnsJson.

A resposta do método está em formato JSON, que são as colunas retornadas pelo método:

firebug_json_03

Com a nova aba, veja como fica muito mais amigável verificar a estrutura do objeto em formato JSON:

firebug_json_04

Como pode-se notar, a raiz do objeto (rows), possui três objetos do tipo ColumnModel:

firebug_json_05

Viu como é muito mais simples e muito mais amigável? Essa aba para visualizar os objetos JSON vai nos poupar um bom tempo! rs

Vamos dar uma olhada agora na chamada do método getStoreFieldJson. Pode-se verificar os parâmetros enviados no request: meta e start:

firebug_json_07

A resposta: objeto metadata em formato JSON (um pouco ‘complicado’ analisar o retorno desse jeito):

firebug_json_06

E o objeto JSON estruturado (muito melhor do que a imagem anterior):

firebug_json_08

Viu como é simples? Na página de plugins para o Firefox, ainda existem outros plugins que são ‘complementos’ para a barra do Firebug.

Não deixe de explorar as outras opções do Firebug, como já foi dito, é uma ferramenta vital para quem desenvolve para a web.

Até a próxima!

Fonte: Blog da Loiane

AGRADEÇA AO AUTOR COMPARTILHE!

Loiane Groner

Mais artigos deste autor »

Bacharel em Ciência da Computação, trabalha como Engenheira de Software Sr em uma instituição financeira em projetos internacionais, em São Paulo. Já trabalhou na IBM como IT Specialist e líder de equipe para projetos internacionais. Possui 6+ anos de experiência em Java EE. Expertise em Java, atuando como JUG Leader no CampinasJUG e coordenadora do ESJUG, além de co-fundadora do JDuchessBR, grupos de usuários java. Expertise em Ext JS, um framework JavaScript, sobre qual escreveu um livro em inglês (Ext JS 4 First Look) lançado mundialmente pela Packt Publishing. Nas horas vagas escreve artigos técnicos e sobre carreira em TI nos blogs http://loiane.com e http://loianegroner.com. No blog também é possível encontrar cursos online gratuitos sobre produtos Sencha.


3 Comentários

Diego Cardoso
1

Muito bom.

Você recomendaria alguns sites para quem está começando com o JSON e apenas como complemento de informação, a extensão do firebug também está disponível para o Chrome.

Sucesso!

Luiz Paulo Camargo
2

Ola Loaine,

Realmente o Firebug é muito bom e utilizo muito nos projetos de desenvolvimento aqui na CLARO, outra ferramenta muito útil, nativa do Javascript, é o console.log() que exibe a saida de qualquer variavel, objeto, elemento html na aba console do Firebug.

att.
Luiz Paulo

Luiz Paulo Camargo
3

Ola Loaine,

Realmente o Firebug é muito bom e utilizo muito nos projetos de desenvolvimento aqui na CLARO, outra ferramenta muito útil, nativa do Javascript, é o console.log() que exibe a saida de qualquer variavel, objeto, elemento html na aba console do Firebug.

Deixe seu comentário

Seu endereço de e-mail não será publicado. Campos com * são obrigatórios!

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">