Aprenda como debugar AJAX sem plugin
Hoje vou demonstrar como podemos debugar AJAX(Asynchronous Javascript and XML) sem a necessidade de instalar plugins no navegador.
Nos dias atuais é normal nossas páginas conterem algumas funcionalidades em AJAX, mesmo que alguns especialistas repreendam fortemente o uso excessivo dessa técnica de programação front-end, mas temos que concordar como a utilização de requisições AJAX torna a experiência do usuário mais agradável, principalmente em sistemas administrativos.
Antes de entrar no tema como debugar AJAX, gostaria de indicar alguns posts para o leitor que tem curiosidade em conhecer um pouco mais sobre o assunto requisições AJAX:
AJAX com jQuery – Série de vídeos com exemplos
Requisição AJAX utilizando a função $.post() com PHP
Requisição AJAX utilizando a função $.get() com PHP
Requisição AJAX utilizando a função $.ajax() com PHP
O que é debugar?
Basicamente podemos definir que debugar seria analisar trechos de códigos em busca de bugs de programação (codificação) ou do sistema.
Porque debugar AJAX?
Quando estamos desenvolvendo qualquer tipo de funcionalidade que utilize requisições AJAX e por ventura não funcione é sempre um problema entender o porque nosso código não funcionou. Isso porque caso o erro não seja no javascript da página o console do navegador não vai exibir informações sobre onde ocorreu o erro.
Abaixo temos a imagem do console em branco após um erro na requisição AJAX, para visualizar o console no Google Chrome pressione a tecla F12 ou pressione o botão direito do mouse e selecione “Inspecionar Elemento”:
Após pressionar o botão “ENVIAR” houve um erro no script back-end mas nada foi exibido na página ou no console, nós sabemos que podem ocorrer diversos tipos de erros ou apenas a falta de um ponto e vírgula no final de alguma instrução no script back-end, essa falta de mensagens de erro já me fez perder horas procurando bugs simples de resolver.
Como debugar AJAX?
Observação: O post foi escrito baseado na ferramenta que o Google Chrome possui, mas podemos obter resultados semelhantes usando Firefox sem instalação de plugins.
Pesquisando cheguei a vários sites que indicavam a instalação do plugin Firebug para o Firefox, mas a solução foi bem mais simples, com ajuda do “Inspecionar Elemento” do Google Chrome precisei apenas no momento do request interceptar o response e pronto, estava ali a mensagem de erro que eu precisava saber.
No mesmo exemplo acima, podemos obter a mensagem de erro no script PHP apenas verificando a aba “Network” após pressionar o botão “ENVIAR”. Para esse exemplo de como debugar AJAX escrevi um script PHP forçando um erro com nome do banco de dados errado (“mysq”) quando tenta instanciar uma conexão PDO com o SGBD MySQL.
Esse script recebe 1 parâmetro via POST e verifica se esse valor é “conectar” se for então retorna “1” se conectado ou “0” senão foi conectado, capturo esse retorno via AJAX e exibo na página:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php ini_set('display_errors', 1); $parametro = (isset($_POST['parametro'])) ? $_POST['parametro'] : ''; if ($parametro == 'conectar'): $conexao = new PDO('mysql:host=localhost;dbname=mysq', 'root', '011224'); if ($conexao): echo "1"; else: echo "2"; endif; endif; ?> |
Abaixo temos o script HTML contendo a requisição AJAX do tipo $.post() para o script dados.php, observem que envio um parâmetro “conectar” e verifico o valor de retorno para depois inserir a string na página, geralmente essa verificação de retorno costuma esconder os erros, por isso que se torna importante sabermos debugar AJAX.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <title>Como debugar AJAX</title> </head> <body> <h3>O valor de retorno AJAX -> <span id='valor'></span></h3> <input type='button' id='botao' value='ENVIAR'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function() { $('#botao').click(function(event) { $.post('dados.php', {parametro: 'conectar'}, function(data) { if (data == '1'){ $('#valor').html('Sucesso'); }else if(data == '2'){ $('#valor').html('Erro'); } }); }); }); </script> </body> </html> |
Deixando a ferramenta do desenvolvedor aberta enquanto pressionamos o botão “ENVIAR” podemos obter a mensagem de erro que ocorreu no script PHP apenas selecionando na aba “Network” o nome do script que foi requisitado e navegando até a seção “Preview”:
Com o mínimo de conhecimento em PHP já fica fácil interpretar essa mensagem sobre o que ocorreu de errado no script, quanto mais condições IFs existirem no script PHP mais escondido ficam os erros, alguns leitores podem questionar “mas se eu abrir o script dados.php no navegador esse erro será exibido?“,
Não será exibido erro pois as instruções dependem do parâmetro enviado via POST, nesse exemplo é apenas 1 parâmetro mas já trabalhei com scripts onde espero mais de 20 parâmetros e seria inviável simular esse ambiente, mas na imagem abaixo tiramos essa dúvida:
Bom pessoal com isso vou encerrando mais um post sobre como debugar AJAX, espero que essas informações sejam de grande ajuda para o leitor que esteja desenvolvendo usando AJAX. No meu dia a dia trabalho com PHP e ASP clássico, muitas vezes meus scripts tem mais de 100 linhas e são requisitados via AJAX, imaginem as probabilidades de erros que podem ocorrerem, mas com essa dica que postei fica fácil encontrar possíveis erros.
Se você gostou desse post compartilhe nas redes sociais abaixo, até a próxima …
