Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Usando el Editor de Desarrollo de Firefox para Desarrollo Web

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Final product image
What You'll Be Creating

La edición del desarrollador de Firefox fue lanzada por Mozilla durante la celebración del décimo aniversario  de Firex, el año pasado. Recientemente, la Edición del Desarrollador de Firefox de 64-bit también se ha hecho disponible para Windows, Linux y Max OS X. La edición del desarrollador de Firefox ofrece fácil accesibilidad para una amplia variedad de herramientas de desarrollo que ayudan haciendo una depuración fácil y también más rápida y además un desarrollo más profesional. Puedes descargar la última versión de la Edición del Desarrollador de Firefox al hacer clic sobre este enlace. Déjanos echar un vistazo a algunas de las magnificas características de la Edición del Desarrollador de Firefox.

WebIDE

WebIDE Running Firefox OS 22

Con WebIDE, puedes crear, editar, probar o depurar aplicaciones web al ejecutarlas en el simulador OS de Firefox. Si estás creando una nueva aplicación web, esta también crea una aplicación básica repetitiva o un completo publicación de informes para tí junto con una adecuada estructura de escritorio. WebIDE, también te permite conectar Firefox Devtools (herramientas de desarrollo de Firefox) con muchos otros navegadores web tales como Safari (iOS), Firefox (Android) y Chrome (Android).

Visualización de Diseño Responsable

Responsive Design View

La visualización de diseño responsable en Firefox puede ser llamada al presionar Ctrl + Shift + M. Puedes comprobar la capacidad de responsabilidad de tu aplicación web con ayuda de esta utilidad. Esta utilidad ofrece un número de opciones tales como ajustar el tamaño del dispositivo que quieras emular, rotación de la pantalla (cambiar de vertical a un modo de vista panorámica), simula eventos de contacto y toma capturas de pantalla de la página web en el modo responsable.

La herramienta Cuenta gotas

Eyedropper Tool

La herramienta Cuenta gotas es realmente una herramienta asombrosa que ayuda a conocer los valores hexadecimales de cualquier color en una página web (funciona igual a la herramienta cuenta gotas en Photoshop). Esta herramienta ayuda a encontrar el color de cualquier elemento o imagen que tenga el navegador ya sea a través de su código por medio del Inspector de Elemento. Al hacer clic sobre la copia de color, ¡éste copia el valor al cortapapeles! 

Inspector del Navegador

Browser Inspector

Todos hemos trabajado con el Inspector de Elemento, pero ¿qué demonios es el Inspector de Navegador? Bien, el Inspector de Navegador es utilizado para depurar el mismo  Navegador de Firefox. Si quieres cambiar el color de la barra URL o, por ejemplo, cambiar la curva de las pestañas con resultados no persistentes, entonces puedes hacer eso a través del Inspector de Navegador. Aunque se puede lograr el mismo resultado a través de la utilidad Scratchpad, el Inspector de Navegador es magnífico si no eres un Desarrollador de Firefox o si sólo quieres probar tus cambios.

Visualización 3D

3D View

Ahora esto, siento que es la característica más asombrosa de las herramientas para Desarrollaores de Firefox. Puedes ver renderizado en 3D cualquier sitio web, en donde cada bloque de elevación representa un elemento, a fin de anidarlo en el código del sitio web. Esta herramienta ayuda a conocer cuales elementos están anidados en cual elemento. Puedes lograr el acceso a la visualización 3D, presionando las teclas Ctrl + Shift + C y luego seleccionar el icono de la forma de caja que está al lado derecho del nuevo panel que se abre.

Scratchpad

Scratchpad

Puedes abrir el Scratchpad al presionar Shift + F4. Scratchpad puede ser utilizada para ejecutar grupos de código de javascript y editarlo, ejecutarlo y examinar los resultados. La forma en como se presenta difiere de la Consola de Navegador es que la Consola de Navegador está diseñada para interpretar una sola línea de código a la vez, sin embargo, con Scratchpad, puedes trabajar con grandes trozos de código ejecutándolo en varias maneras, dependiendo de cómo quieres usar la salida del código.

Conclusión

La Edición del Desarrollador de Firefox ofrece una amplia variedad de herramientas para crear, depurar, rendimiento de monitores, depurando el navegador y ampliando las Herramientas de Desarrollo en sí mismas. Explicar todas las herramientas está más allá del alcance que puede abordarse en éste artículo. Sin embargo, puedes echar un vistazo a la lista completa de estas herramientas aquí. Esperamos que la introducción a las herramientas que se mencionaron arriba te ayuden en tus tareas de desarrollo web que realizas a diario.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.