13Sep
El menú del desarrollador web de Firefox contiene herramientas para inspeccionar páginas, ejecutar código JavaScript arbitrario y ver solicitudes HTTP y otros mensajes. Firefox 10 agregó una herramienta Inspector completamente nueva y Scratchpad actualizado.
Las nuevas características del desarrollador web de Firefox, en combinación con increíbles complementos para desarrolladores web como Firebug y Web Developer Toolbar, hacen de Firefox un navegador ideal para desarrolladores web. Todas las herramientas están disponibles en Web Developer en el menú de Firefox.
Inspector de página
Inspeccione un elemento específico haciendo clic con el botón derecho y seleccionando Inspeccionar ( o presionando Q ).También puede iniciar Inspector desde el menú de Web Developer.
Verá una barra de herramientas en la parte inferior de la pantalla, que puede usar para controlar al inspector. El elemento seleccionado se resaltará y otros elementos de la página se atenuarán.
Si desea elegir un nuevo elemento, haga clic en el botón
Inspeccionar en la barra de herramientas, coloque el mouse sobre la página y haga clic en su elemento. Firefox resalta el elemento debajo del cursor.Puede navegar entre elementos primarios y secundarios haciendo clic en las rutas de exploración en la barra de herramientas.
HTML Inspector
Haga clic en el botón HTML para ver el código HTML del elemento seleccionado actualmente.
El inspector HTML le permite expandir y contraer las etiquetas HTML, lo que facilita la visualización de un vistazo. Si desea ver el HTML de la página en un archivo plano, puede seleccionar Ver origen de página en el menú Desarrollador web.
Inspector de CSS
Haga clic en el botón Style para ver las reglas de CSS aplicadas al elemento seleccionado.
También hay un panel de propiedades CSS: cambie entre los dos haciendo clic en los botones Rules y Properties .Para ayudarlo a encontrar propiedades específicas, el panel de propiedades incluye un cuadro de búsqueda.
Puede editar el CSS del elemento sobre la marcha desde el panel Reglas. Desmarque cualquiera de las casillas de verificación para desactivar una regla, haga clic en el texto para cambiar una regla o agregue sus propias reglas al elemento en la parte superior del panel. Aquí, he agregado font-weight: bold;Regla CSS de , lo que hace que el texto del elemento sea negrita.
JavaScript Scratchpad
El Scratchpad también vio una actualización con Firefox 10, y ahora contiene resaltado de sintaxis. Puede escribir el código JavaScript para ejecutar en la página actual.
Una vez que tenga, haga clic en el menú Execute y seleccione Run. El código se ejecuta en la pestaña actual. Consola web
La Consola web reemplaza la antigua Consola de errores, que ha quedado en desuso y se eliminará en una versión futura de Firefox.
La consola muestra cuatro tipos diferentes de mensajes, que pueden alternar la visibilidad de: solicitudes de red, mensajes de error de CSS, mensajes de error de JavaScript y mensajes de desarrollador web.
¿Qué es un mensaje de desarrollador web? Es un mensaje impreso en el objeto window.console. Por ejemplo, podríamos ejecutar window.console.log( "Hello World"); Código de JavaScript en el Scratchpad para imprimir un mensaje de desarrollador en la consola. Los desarrolladores web pueden integrar estos mensajes en su código JavaScript para ayudar con la depuración.
Actualice la página y verá las solicitudes de red generadas y otros mensajes.
Utilice el cuadro de búsqueda para filtrar los mensajes;haga clic en una solicitud si desea ver más detalles.
A partir de Firefox 10, la consola web puede trabajar en conjunto con el Page Inspector. La variable $ 0 representa el objeto seleccionado actualmente en el inspector. Entonces, por ejemplo, si desea ocultar el objeto seleccionado actualmente, podría ejecutar $ 0.style.display = "none" en la consola.
Si está interesado en obtener más información sobre el uso de la consola y sus funciones integradas, consulte la página de la consola web en el sitio web de la red de desarrolladores de Mozilla.
Obtenga más herramientas
La opción Obtener más herramientas lo lleva a la colección de complementos de herramientas de Web Developer en el sitio web de Complementos de Mozilla. Contiene algunos de los mejores complementos para desarrolladores web, incluidos Firebug y la barra de herramientas de desarrollo web.
Si ha estado utilizando Firefox durante algunos años, puede recordar el Inspector DOM.Las herramientas de desarrollo integradas de Firefox han recorrido un largo camino desde entonces.