Herramientas para desarrolladores de Chrome

El desarrollo de software en cualquier lenguaje de programación o entorno de trabajo entraña dificultades.

Para escribir código se utilizan IDEs (integrated development environment) que suministran al programador herramientas para facilitar su trabajo. Entre estas herramientas están las de depuración (debug). Los debuggers son muy útiles para los desarrolladores puesto que incorporan funcionalidad para ayudarle a buscar errores y problemas que de otra forma tendrían que buscar de forma manual e intuitiva.

En el caso de desarrollos para aplicaciones web, las herramientas de depuranción de los IDEs sirven para depurar el código que genera html, css y javascript que se envía al browser.Una vez que ese código es generado y enviado la única forma de depurarlo es en el browser que es el que lo está inerpretando. 

Google Chrome incorpora herramientas de depuración. Los demás browsers también tienen este ripo de herramientas pero las mas completas son las de Chrome. Con Chrome sobre una página html cargada en el browser se pueden analizar numerosos aspectos que ayudan a localizar malos funcionamientos y errores. Las herramientas de desarrollador de Chrome, permiten: 

• Localizar un elemento del DOM (Document Object Model) tanto desde la vista del usuario como desde el código fuente.
• Saber que estilos se están aplicando a cada elemento. Si se están aplicando de forma directa (inline), por hoja de estilo, porque se han heredado de algún elemento padre o porque son el valor de defecto.
• Consultar los mensajes que el browser genera o los que genera el programador utilizando el objeto "console" de javascript.
• Se puede consultar el número de línea en el que se ha producido un error para subsanarlo.
• Se pueden poner puntos de ruptura (breakpoints) para detener el programa donde convenga al programador y luego avanzar instrucción a instrucción para ver como progresa el flujo de control del programa.
  
• Se puede consultar el contenido de las variables e incluso modificar su valor para observar el comportamiento del programa con los nuevos valores almacenados.
• Se puede saber el tiempo que tarda en cargarse cada elemento de la página.
• etc.

Si quieres ver una pequeña intro al funcionamiento de estas herramientas, puedes reproducir los videos Herramientas de desarrollador de Chrome (1ª parte) aquí y Herramientas de desarrollador de Chrome (2ª parte) aquí

Espero que esta información te sea de utilidad y te ayude a escribir código siendo más feliz. Y serás más feliz porque si lo utilizas entenderás mejor lo que está sucediendo trás tú programación.