Cómo utilizar las herramientas de desarrollo web de Firefox para ver estructuras de sitios web en 3D

encabezado de desarrollo de firefox

Firefox 11 ha agregado dos nuevas herramientas de desarrollo web al ya impresionante arsenal de Firefox. La función Tilt visualiza las estructuras del sitio web en 3D, mientras que el Editor de estilos puede editar hojas de estilo CSS sobre la marcha.

La funcionalidad 3D, conocida como inclinación, 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 ricos en 3D en su navegador.

Tilt – Visualización de sitios web en 3D

Puedes acceder a Tilt desde el Inspector de páginas de Firefox. Para comenzar, abra el Inspector de página seleccionando «Inspeccionar» en el menú Desarrollador web. También puede hacer clic con el botón derecho en la página actual y seleccionar «Inspeccionar elemento» para iniciar el Inspector en un elemento específico.

Como utilizar las herramientas de desarrollo web de Firefox para

Haga clic en el botón «3D» en la barra de herramientas del Inspector.

1631032343 767 Como utilizar las herramientas de desarrollo web de Firefox para

Verá la estructura de la página después de activar el modo 3D, pero se verá plana hasta que la gire.

1631032344 547 Como utilizar las herramientas de desarrollo web de Firefox para

Gire el modelo haciendo clic con el botón izquierdo del mouse, mueva la imagen haciendo clic con el botón derecho del mouse y acerque y aleje la imagen con la rueda del mouse.1631032344 880 Como utilizar las herramientas de desarrollo web de Firefox para

Esta vista está integrada con las otras herramientas del inspector. Si los paneles HTML o Estilo están abiertos, puede hacer clic en un elemento de la página para mostrar el código HTML o las propiedades CSS de ese elemento.

1631032344 163 Como utilizar las herramientas de desarrollo web de Firefox para

Más funciones 3D

La función de visualización 3D se basó en la extensión Tilt, pero no tiene todas las funciones 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 3D, deberá instalar el Complemento de inclinación 3D. Una vez que haya hecho eso, obtendrá una nueva opción «Inclinar» en el menú del desarrollador web.

1631032344 198 Como utilizar las herramientas de desarrollo web de Firefox para

Haga clic en el botón Cancelar para usar la versión anterior de Tilt cuando se le solicite.

1631032344 894 Como utilizar las herramientas de desarrollo web de Firefox para

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.

1631032345 27 Como utilizar las herramientas de desarrollo web de Firefox para

Editor de estilo CSS

Para ver y editar las hojas de estilo CSS de una página, abra el Editor de estilos desde el menú Desarrollador web.

1631032345 79 Como utilizar las herramientas de desarrollo web de Firefox para

El editor de estilo enumera las hojas de estilo de la página actual. Active o desactive una hoja de estilo haciendo clic en el icono del ojo a la izquierda del nombre de la hoja de estilo. Edite una hoja de estilo seleccionándola y modificando el código.

1631032345 115 Como utilizar las herramientas de desarrollo web de Firefox para

Los cambios se reflejan inmediatamente en la página. Si desactiva una hoja de estilo, la página perderá su información de estilo. Si edita una hoja de estilo, verá que los cambios aparecen en la página a medida que escribe.

1631032345 162 Como utilizar las herramientas de desarrollo web de Firefox para

Puede guardar una copia de una de las hojas de estilo en su computadora, importar una hoja de estilo existente desde 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 visor 3D supervisa los cambios en la página actual y los notifica cuando ocurren cambios. Cuando utilice el Editor de estilos con el Inspector 3D abierto, sus cambios se reflejarán inmediatamente en la vista 3D. También funciona con extensiones de terceros que modifican páginas web, como Firebug.

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *