Firefox Developer Tools, parte 2: Scratchpad y Editor de Estilos

Siguiendo con el repaso de las herramientas para desarrollo de Firefox, esta vez en Mozilla Hacks cubrieron de qué se trata el Scratchpad y el Editor de Estilos. Si quieren ver la primera parte: Firefox Developer Tools, parte 1: la Consola Web y el Debugger JavaScript

En esta parte de la serie, se explican el Editor de Estilos (Style Editor) y el Scratchpad. El Editor de Estilos es una de esas cosas fantásticas sin las cuales la vida de un desarrollador web sería mucho más difícil. Ni que hablar de buscarle la vuelta a distintos problemas en un CSS. Podemos escribir un CSS desde cero con nuestro navegador y después guardarlo, viendo los resultados en la página en tiempo real.

Firefox Aurora Nightly

Vamos con el artículo:

El Editor de Estilos

El Editor de Estilos se usa principalmente para editar, debuggear o crear nuevas hojas de estilo en el contexto de la aplicación actual. Los cambios hechos en el editor de estilos se reflejan automáticamente en la página cargada. Si no estás familiarizado con Cascading Style Sheets (CSS), asegúrate de mirar la documentación de MDN sobre CSS.

El Editor de Estilos permite guardar los cambios hechos mientras lo usamos. Además de eso también se pueden importar hojas de estilo existentes y aplicarlas a la página actual o deshabilitar individualmente hojas de estilo específicas. El Editor de Estilos también está ligado al Inspector permitiendo a los desarrolladores acceso rápido al estilo para el elemento inspeccionado. El siguiente screencast presenta por arriba las características del Editor de Estilos:

Para información más detallada sobre el Editor de Estilos vean la documentación de MDN.

Scratchpad

El Scratchpad tiene muchos usos y es esencialmente un editor en vivo de JavaScript y una herramienta de prototipeo. Usando el Scratchpad, un desarrollador puede acceder a los objetos de la página actual, variables y script. Además pueden escribirse y testearse funciones completas en el editor en el scope de la página en vivo. Éstos cambios pueden luego ser adjuntados y guardados con la aplicación actual.

También se pueden cargar y testear archivos JavaScript externos. Hay disponibles varias opciones de ejecución para permitir a un desarrollador ejecutar el código, ejecutar el código e inspeccionar los objetos retornados, o ejecutar el código e imprimir los resultados como un comentario dentro del Scratchpad. El siguiente screenscast ilustra algunas de las características del Scratchpad. Notar que el script de Scratchpad corre en el mismo contexto que el script cargado en la página. En el screencast, el ejemplo usa la biblioteca jQuery y algunos scripts personalizados para ilustrar esta característica:

Para más información sobre Scratchpad, ver la documentación en MDN.

Si no estás muy familiarizado con JavaScript, revisa la documentación de MDN para una lista exhaustiva de recursos para aprender el lenguaje y la mecánicas.

Aprende más

Estos screencasts dan una introducción rápida a las características principales de estas herramientas. Para el detalle completo de todas las Developer Tools, revisa la documentación completa de MDN.

Próximamente

En el siguiente post nos concentraremos en algunas características de diseño Móvil incluyendo la vista Responsive Design y Remote Debugging usando el App Manager. Por favor provee tus sugerencias de qué te gustaría ver explicado en más detalle en el próximo post comentando aquí.

Artículo original publicado el 4 de Noviembre de 2013 por Jason Weathersby, Will Bamberg y Robert Nyman [Editor] bajo una licencia Creative Commons Attribution Share-Alike License v3.0.