DesarrolloLibre

Desarrollo Web, Android y mucho más

19-01-2017

Si eres desarrollador lo cual es altamente probable si estas leyendo esto, sabrás que una de las cosas que se pueden hacer molestas al momento de desarrollar es cuando se están creando las vistas para obtener datos con formato JSON (es decir recursos desde una URL la cual es accedida mediante JavaScript, por ejemplo) o enviando datos al servidor; no siempre es fácil detectar el o los errores desde el navegador; por suerte Google Chrome ofrece una interesante herramienta que permite monitorear las peticiones HTTP de los sitios que visitamos aunque en nuestro caso de mayor interés es desde el ámbito de desarrollo de nuestras aplicaciones web.

Consultando las peticiones HTTP en Google Chrome

Para ver las peticiones HTTP que realizamos desde nuestra aplicación o web primero debemos ir a la consola de desarrollo de Google Chrome presionando F12 o desde la opción "Más Herramientas" en el menú y veremos nuestra consola de desarrollo; por ejemplo, en la siguiente imagen vemos que ocurrió un error en una de las URL que ejecuta un JavaScript interno en la aplicación:

Google chrome error POST

En este caso es un Ajax que envía una petición POST al servidor, si fuera una petición GET, el navegador compondría la URL con los parámetros y podríamos detectar el error abriendo el enlace en una pestaña del navegador, pero al ser la petición mediante un POST no ocurrirá esto.

La consola de desarrollo de Google Chrome sirve para mucho más que para revisar estatus de variables, debugging, y ver estados de las peticiones (generalmente 500, 404 y/o 200) si no que tambien podemos ver el estado perfectamente como si copiamos la URL de la petición en el navegador pero sin la necesidad de hacerlo; para esto abrimos nuestra consola de desarrolladores con F12:

Por defecto, al abrir la consola estamos sobre la opción "Console", damos un clic sobre la pestaña "Netwotk y veremos listados de todas las peticiones realizadas:

Google chrome error POST

Buscamos el recurso que nos ocasionó el error 500:

Google chrome error 500 recursos

Y damos un clic sobre el recurso que nos arroja el error 500:

Google chrome error 500 recurso

Cómo podemos darnos cuenta, podemos ver el error 500 como si la petición se hubiera realizado en la pestaña en donde se está ejecutando la aplicación a través del hilo principal de la aplicación; de esta forma detectar fácilmente el error sin necesidad de emplear otras herramientas o colocar impresiones innecesarias.


Publicidad

Give me for a beer!

Algunos artículos que te pueden interesar

Debugging de páginas web con Google Chrome y Android

Debugging de páginas web con Google Chrome y Android

Se explica cómo realizar el debugging de nuestras páginas web desde un dispositivo Android en nuestra PC.

Andrés Cruz 30-01-2017

Autenticación social con HybridAuth en redes sociales con PHP

Autenticación social con HybridAuth en redes sociales con PHP

Se explica cómo autenticar mediante las redes sociales a las aplicaciones creadas en PHP empleando HybridAuth como librería; además se explica como configurar las redes de Google+ y Twitter.

Andrés Cruz 14-04-2016

Resolviendo las peticiones desde la consola de desarrollo en Google Chrome

Resolviendo las peticiones desde la consola de desarrollo en Google Chrome

Se explica como emplear la consola de desarrollo para visualizar peticiones realizadas en segundo plano sin la necesidad de emplear otra pestaña del navegador.

Andrés Cruz 19-01-2017