30Jun
Firefox 11 agregó dos nuevas herramientas de desarrollo web al ya impresionante arsenal de Firefox. La característica de inclinación visualiza las estructuras del sitio web en 3D, mientras que el Editor de estilos puede editar hojas de estilo CSS sobre la marcha.
La característica 3D, conocida como Tilt, es una forma de visualizar el DOM de un sitio web. Se integra con el Inspector de documentos existente y utiliza WebGL para mostrar gráficos 3D en tu navegador.
Tilt - Visualización del sitio web en 3D
Puede acceder a Tilt desde Firefox's Page Inspector. Para comenzar, abra el Inspector de página seleccionando "Inspeccionar" en el menú Desarrollador web. También puede hacer clic derecho en la página actual y seleccionar "Inspeccionar elemento" para iniciar el inspector en un elemento específico.
Haga clic en el botón "3D" en la barra de herramientas del inspector.
Verá la estructura de la página después de activar el modo 3D, pero se verá plana hasta que la gire.
Gire el modelo haciendo clic con el botón izquierdo, mueva la imagen haciendo clic derecho y acerque y aleje con la rueda del mouse.
Esta vista está integrada con las otras herramientas en el inspector. Si tiene los paneles HTML o de Estilo abiertos, puede hacer clic en un elemento de la página para ver el código HTML o las propiedades de CSS de ese elemento.
Más características 3D
La función de visualización 3D se basó en la extensión Tilt, pero no tiene todas las características de la extensión Tilt. Si desea personalizar los colores o incluso exportar la visualización como un archivo de modelo 3D para usar con un programa de edición en 3D, deberá instalar el complemento Tilt 3D.Una vez que tenga, obtendrá una nueva opción "Inclinar" en el menú Desarrollador web.
Haga clic en el botón Cancelar para usar la versión anterior de Tilt cuando se le solicite.
Encontrará controles para personalizar la visualización en el lado izquierdo de la ventana y otras opciones, incluida la función de exportación, en la parte superior de la página.
Editor de estilos CSS
Para ver y editar las hojas de estilo CSS de una página, abra el Editor de estilos en el menú Desarrollador web.
El editor de estilos enumera las hojas de estilo en la página actual. Active o desactive una hoja de estilo haciendo clic en el ícono de ojo a la izquierda del nombre de la hoja de estilo. Edite una hoja de estilo seleccionándola y modificando el código.
Los cambios se reflejan en la página de inmediato. Si desactiva una hoja de estilos, la página perderá su información de estilo. Si edita una hoja de estilo, verá que las ediciones aparecen en la página mientras escribe.
Puede guardar una copia de una de las hojas de estilo en su computadora, importar una hoja de estilo existente de su computadora o agregar una nueva hoja de estilo en blanco con los enlaces Guardar, Importar o Nuevo en la ventana del Editor de estilos.
La función de visualización 3D observa los cambios en la página actual y avisos cuando ocurren cambios. Cuando utiliza el Editor de estilos con el inspector 3D abierto, sus cambios se reflejarán inmediatamente en la vista 3D.Esto también funciona con extensiones de terceros que modifican páginas web, como Firebug.
