Firebug, amigo do dia-a-dia [2]

3) Ver o log detalhado dos requests(chamadas de arquivos .js, .css, imagens, chamadas Ajax)

Outra funcionalidade que eu acho muito útil é a ‘Rede‘ (’Net‘ para quem usa o Firebug em Ingês). Com ela você pode ver todos os arquivos que foram chamados para montar sua página. E ainda pode ver qual foi o tempo de carregamento de cada arquivo.

Faça o seguinte, abra o Firebug(atalho é F12) em algum site e clique na aba ‘Net‘ ou ‘Rede‘. Na primeira vez que o fizer irá aparecer uma mensagem falando que o o painel Rede esta desabilitado e você terá que habilitar clicando na seta indicativa da imagem. Em seguida você verá algo como a imagem abaixo:

Perceba que esta todo vazio.

Mas agora de um reload(F5) na página e veja o resultado:

Perceba que ele exibiu os dados de carregamento dos arquivos Javascript, CSS, imagens, Flash, HTML…

Agora pule para aba ‘Console‘ do Firebug(terá que habilitar como fez com a aba Rede). Esta aba vai exibir todo request que for feito na sua página. Um exemplo prático disto é esta tela que estou digitando este POST no Wordpress. Quando eu teclar CTRL+S o Wordpress dispara uma chamada Ajax que envia os dados atuais deste post e salva as alterações no banco de dados. Acabei de fazer isto e dei um PrintScreen:

Perceba que conseguimos ver qual foi o endereço chamado via Ajax e ver qual arquivo/linha disparou a chamada. Se clicarmos no sinal de +(mais) antes do endereço conseguimos detalhar mais ainda esta chamada:

Cabeçalhos: são todas as informações que foram enviadas junto com a chamada(navegador, encoding, …) e os dados que foram recebidos(data da resposta, encoding da resposta, tamanho da resposta, …).

Postar ou parâmetros: contém todos os dados/variáveis que foram enviados na chamada. Sempre será no formato ‘nome: valor’
Por exemplo, se a chamada for feita pelo method POST, la no PHP você vai acessar da seguinte forma: $_POST['nome_que_esta_aparecendo_nesta_tela']. Conseguiu entender?

Reposta é o valor que foi retornado pela chamada. Quando você faz uma chamada Ajax você pode precisar de alguma informação de resposta para poder interpretar no lado do Javascript certo?

Aqui você consegue ver exatamente qual foi a resposta neste caso. Um XML… mas poderia ser um JSON, um texto puro, um número tipo 0 ou 1 para você fazer um IF no Javascript e exibir um alerta de sucesso ou falha.

Se você esta se perguntando para que serve tudo isso a resposta é simples: Debugar.

Quando estamos desenvolvendo algum site/sistema inevitávelmente você vai pracisar fazer chamadas Ajax, como achar um erro do tipo: “Estou selecionando o um estado brasileiro em um combobox mas as cidades não estão sendo carregadas”.

• Terá que conferir a URL que foi chamada, pois pode estar chamando errado.
• Ver se o código do estado escolhido esta sendo enviado corretamente…. você o fará olhando para opção Postar.
• E vai ter que conferir a resposta da chamada pois imagino que o resultado seria a lista de cidades em algum formato(XML, JSON,TXT, …) para popular o combobox de cidades.

Eu particularmente utilizo estas funcionalidades  diariamente.
Se você tiver alguma dúvida ou quer complementar o POST por favor é só entrar em contato.

Por hoje é isso.

Um grande abraço!