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 funciones para desarrolladores web de Firefox, en combinación con increíbles complementos para desarrolladores web como Firebug y la barra de herramientas para desarrolladores web, 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 derecho en él y seleccionando Inspeccionar (o presionando Q ). También puede iniciar el Inspector en el menú Desarrollador web.
Verá una barra de herramientas en la parte inferior de la pantalla, que puede usar para controlar el inspector. El elemento seleccionado se resaltará y los demás elementos de la página se atenuarán.
Si desea elegir un nuevo elemento, haga clic en el Inspeccionar en la barra de herramientas, pase el mouse sobre la página y haga clic en su elemento. Firefox resalta el elemento debajo del cursor.
Puede navegar entre elementos principales y secundarios haciendo clic en las rutas de navegación en la barra de herramientas.
Inspector de HTML
Haga clic en el HTML para ver el código HTML del elemento seleccionado actualmente.
El inspector de 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 código fuente en el menú Desarrollador web.
Inspector CSS
Haga clic en el Estilo para ver las reglas CSS aplicadas al elemento seleccionado.
También hay un panel de propiedades de CSS: cambie entre los dos haciendo clic en el Reglas y Propiedades botones. 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 el font-weight: negrita; Regla CSS, haciendo que el texto del elemento esté en negrita.
Bloc de notas de JavaScript
El Scratchpad también se actualizó con Firefox 10 y ahora contiene resaltado de sintaxis. Puede escribir código JavaScript para ejecutar en la página actual.
Una vez que lo haya hecho, haga clic en el Ejecutar menú y seleccione Correr. El código se ejecuta en la pestaña actual.
Consola web
La Consola web reemplaza a la antigua Consola de errores, que ha quedado obsoleta y se eliminará en una versión futura de Firefox.
La consola muestra cuatro tipos diferentes de mensajes, cuya visibilidad puede alternar: solicitudes de red, mensajes de error CSS, mensajes de error de JavaScript y mensajes de desarrolladores web.
¿Qué es un mensaje de desarrollador web? Es un mensaje impreso en el objeto window.console. Por ejemplo, podríamos ejecutar el window.console.log ("Hola mundo"); Código JavaScript en 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 funcionar en conjunto con el inspector de página. La variable $ 0 representa el objeto seleccionado actualmente en el inspector. Entonces, por ejemplo, si desea ocultar el objeto seleccionado actualmente, puede ejecutar $ 0.style.display = "ninguno" 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
los Obtenga más herramientas La opción lo lleva a la colección de complementos de la caja de herramientas del desarrollador web en el sitio web de complementos de Mozilla. Contiene algunos de los los mejores complementos para desarrolladores web , incluidos Firebug y la barra de herramientas para desarrolladores web.
Si ha estado usando Firefox durante algunos años, es posible que recuerde el Inspector DOM. Las herramientas de desarrollo integradas de Firefox han recorrido un largo camino desde entonces.
