Herramientas de Desarrollo Web de Firefox

Herramientas de Desarrollo Web
de Firefox
Jorge Villalobos
Mozilla
http://mzl.la/fxdev-cr
Presentación
●
Mozillian por 10 años.
●
Empleado de Mozilla por 3 años.
●
Trabajo para el equipo de add-ons.
●
Co-fundador de Mozilla Costa Rica.
Herramientas de Desarrollo Web
●
Consola web.
●
Inspeccionar.
●
Vista de diseño adaptable.
●
Depurador.
●
Borrador.
●
Editor de estilo.
●
Barra de desarrolladores.
Consola web
●
Errores y advertencias de CSS y JS.
●
Actividad de red.
●
Registro (con el objeto console).
Inspeccionar
●
Inspección de elementos.
●
:focus, :hover, :active.
●
Estilos y
dimensiones.
●
Vista 3D.
Vista de diseño adaptable
●
Vista de distintas
resoluciones.
●
Indispensable para
sitios móviles.
Depurador
●
Búsqueda con : y #, similar a Sublime.
●
Inspección de variables y ambiente.
●
Depuración remota para Android.
Depurador
●
Búsqueda con : y #, similar a Sublime.
●
Inspección de variables y ambiente.
●
Depuración remota para Android.
Borrador
●
Ejecución de JavaScript.
●
Abrir y guardar scripts.
●
Útil para crear
add-ons simples.
Editor de estilo
●
Es la versión CSS del borrador.
●
Abrir y guardar hojas de estilo.
Barra de desarrolladores
●
●
Maneja inspección, vista 3d, depurador,
consola, y vista de diseño adaptable.
Agrega screenshots, manejo de add-ons,
cookies y otros.
Add-ons
●
Firebug.
●
DOM Inspector.
●
devtools.chrome.enabled
●
●
Habilita algunas herramientas para el DOM de la
ventana de Firefox.
La barra de desarrolladores se puede extender.
●
Ejemplo: imgur Command.
Más información
●
http://mzl.la/fxdev-cr
●
https://hacks.mozilla.org/
●
https://developer.mozilla.org/
●
https://addons.mozilla.org/developers
●
Mozilla Costa Rica.
●
@MozillaCR
●
jorge@mozilla.com