Reintroducción a las herramientas de desarrollador, parte 1: La Consola Web y el Depurador

17 octubre, 2013 4:43 por

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

Esta es la parte 1 de 5, centrándose en herramientas de desarrollador incorporadas en Firefox, sus características y dónde estamos con ellas. La intención es mostrarte todas las posibilidades disponibles, el progreso y a lo que nos dirigimos.

En Firefox 4 vimos el lanzamiento de la consola web, la primera de las nuevas herramientas de desarrollador incorporadas en Firefox. Desde entonces hemos estado agregando más capacidades a estas herramientas que ahora realizan un amplio rango de funciones que pueden ser usadas para depurar y analizar aplicaciones Web en Firefox para escritorio, Firefox OS y Firefox para Android.

Varias herramientas de desarrollo

Esta es la primera en una serie de entradas en las que veremos a lo que han llegado las herramientas de desarrollador desde Firefox 4. Les vamos a presentar cada herramienta en un corto vídeo (en inglés), ilustrando el flujo de trabajo específico y los patrones que deberán ayudarte a obtener lo mejor de estas herramientas de trabajo. Los mismos incluirán escenarios como el desarrollo móvil, modificación y depuración de aplicaciones basadas en CSS, etc.

En esta primera entrada, les presentamos lo más reciente de la consola web y el depurador de JavaScript.

La consola web

La consola web es usada principalmente para mostrar información asociada con la página web actual que tenemos cargada. Esto incluye advertencias y errores de HTML, CSS, JavaScript, y seguridad. Además, las peticiones de red son mostradas y la consola indica cuáles fueron satisfactorias o fallaron. Cuando las advertencias y errores son detectados, la consola web también ofrece un enlace a la línea de código que causó el problema. A menudo, la consola web es el primer paso en la depuración de una aplicación web que no está funcionando correctamente.

Consola web

La consola web también te permite ejecutar JavaScript dentro del contexto de la página. Esto significa que puedes inspeccionar objetos definidos por la misma, ejecutar funciones dentro de su alcance, y acceder a elementos específicos usando selectores CSS. Este vídeo presenta una vista previa de las características de la Consola Web.

Revisa la documentación de la consola web en MDN para más información.

El depurador de JavaScript

El depurador de JavaScript es usado para la depuración y refinación del código JavaScript que tu aplicación web utiliza actualmente. El depurador puede ser usado para depurar código corriendo en Firefox OS y Firefox para Android, así como Firefox para escritorio. Es un depurador con muchas características, proporcionando vigilancia de expresiones, alcance de variables, breakpoints, breakpoints condicionales, avance de pasos, saltar pasos y ejecutar hasta el final. Además, puedes cambiar los valores de variables en tiempo de ejecución mientras el depurador ha pausado tu aplicación. Depurador

Este vídeo ilustra algunas características del Depurador de JavaScript.

Para más información sobre el depurador de JavaScript, revisa la documentación del depurador en MDN.

Aprende más

Estos vídeos te dan una rápida introducción a las principales características de estas herramientas. Para los detalles completos de todas las herramientas de desarrollador, visita la documentación completa sobre las herramientas en MDN.

Lo que viene

En el siguiente post de esta serie, nos centraremos en el editor de estilos y el borrador. Por favor, déjanos tu opinión en los comentarios sobre qué características quieres que expliquemos con más detalle.

The following two tabs change content below.

AngelFQC

Web Developer at BeezNest Latino
Ingeniero de Sistemas y Computación. Desarrollador PHP. Mozilla Peru. Chamilo LMS Developer.

Compartir artículo:

cc-by-sa