Debug en Javascript

Chrome Vs Firebug

La respuesta a esta tesitura, depende completamente de ti. Personalmente estoy a favor de las herramientas para desarrolladores que ofrece Google en este caso Chrome, pero como digo no deja de ser una opinión personal. A continuación intentaré ofrecer algunas de las razones por las que me decanto por este debug de Google.

Razones de alto nivel 

1.- Para empezar, uso Chrome como navegador predeterminado.

2.- Firebug es un addon para Firefox, mientras que las herramientas dev en Chrome no lo son. Si bien es cierto,  esto no debería importar en absoluto, pero en cuestiones de instalación, si usamos chrome como navegador siempre es más limpio el que nos proporciona.

3.- Cuestiones de IU. Podrías estar o no de acuerdo en este aspecto, pero Firebug es de un uso menos amigable con el usuario, por lo que el aprendizaje es algo mayor.

4.- Es posible depurar de forma remota los sitios web móviles en el teléfono mediante herramientas Chrome Dev.

5.- Soporte en el código de los mapas en Chrome.

Razones de uso reales

Hay demasiadas para enumerar, sin embargo nombraré algunas de las más importantes.

1.- Las herramientas de desarrollo de Chrome ofrece una función de impresión bastante agradable y se puede establecer puntos de interrupción bastante después de imprimir en pantalla. Hay algunas extensiones para Firebug que hacen esto, pero no funcionan muy bien.

2.- Cuando encontramos un error en un archivo en Firebug, al hacer clic en el archivo, abre una nueva ventana con el código fuente (no en el panel del depurador como sería más cómodo e intuitivo). Podríamos incluso ver el mensaje de "recargue la página", un mensaje bastante irritante.

3.- En Chrome, al hacer clic en el error te lleva directamente a la ficha del código y entonces se puede establecer los puntos de interrupción donde se desee. Teniendo en cuenta el número de veces que he depurado con firebug, he podido comprobar que usa demasiada memoria al depurar el código y el riesgo de congelar el pc es bastante alto, incluso con una máquina potente he tenido problemas con la memoria.

4.- Firebug tiene una función de "activar / desactivar" para un sitio web, esto a veces es nos hace un flaco favor. Trabajando en una web en DRUPAL en particular, tardaba una eternidad en cargar en Firefox.

Nunca entendí lo que pasaba hasta que averigüé los recursos que puede llegar a consumir, sin embargo el mismo portal funcionaba perfecto con el debug de Google.

Al parecer firebug habilitó un breakpoint que había marcado un tiempo atrás y este seguía haciendo algún procesamiento cada vez que se visitaba el portal.

He tenido que trabajar varias veces con los tiempos de respuesta,  debido a que era lo que el cliente consideraba más importante (el tiempo real), con todo esto, cabe destacar la compilación en tiempo real que ofrece chrome, posibilitando modificar directamente el código.

Con lo que por estas razones personalmente elegí Chrome como el debug por defecto.

¿Cuál escoger?

Yo diría que depende mucho del navegador predeterminado que usamos. Incluso si somos usuarios de Firefox, probablemente nos vendrá mejor la herramienta nativa de Firefox (Firebug). Después del trabajo comparando estas herramientas, estoy seguro de que todas ellas tienen más o menos una funcionalidad muy similar y unas características similares.

Nota: Yo no soy, como podéis observar, muy partidario de usar las herramientas de desarrollo de Microsoft para IE, al ser herramientas de software propietario. Otro apunte que no me gustaría que pasara desapercibido es el hecho de que en este post no se ha considerado los plugins adicionales que Chrome ofrece con lo que gana aún más puntos.

Como recomendación final y después de hacer la comparación entre Chrome, Firebug y al trabajar con PhpStorm ya que es un gran IDE de PHP, no quería tener un debug para Javascript  y trabajar en PHP en distintos entornos. Por ello he integrado ambas herramientas en el debug de PhpStorm con el plugin que JetBrains nos proporciona y esto es inmejorable, ya que tener centralizado toda la depuración en un sólo entorno, es mucho más cómodo y rápido.

A continuación dejo un breve tutorial muy sencillo para todo aquel que use este debug pueda integrarlo y disfrutarlo tanto como yo.

Tutorial PhpStorm

1º paso:

Instalar extensión de chrome jetBrains 

2º paso:

Configurarlo para que nuestro host sea en local (mi caso 127.0.0.1)  63342 por defecto.

3º paso:

Crear una nueva configuración de debug en PhpStorm.

• Run
• Edit configurations
• Javascript  Debug.

4º paso:

5º paso:

Activarlo en botón secundario letras JS "inspect in PhpStorm".

6º paso: