Cómo usar las herramientas de desarrollo web de Firefox
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 nueva herramienta Inspector y actualizó Scratchpad.
Las nuevas características 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 los desarrolladores web. Todas las herramientas están disponibles en Desarrollador web 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 puedes lanzar el Inspector desde el menú Web Developer.
Verá una barra de herramientas en la parte inferior de la pantalla, que puede utilizar 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 Inspeccionar en la barra de herramientas, pase el mouse sobre la página y haga clic en su elemento. Firefox resalta el elemento debajo de tu cursor..
Puede navegar entre los elementos principales y secundarios haciendo clic en las rutas de navegación de la barra de herramientas.
Inspector de HTML
Haga clic en el HTML Botón 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 su visualización de un vistazo. Si desea ver el HTML de la página en un archivo plano, puede seleccionar Ver código fuente desde el menú Web Developer.
Inspector de CSS
Haga clic en el Estilo Botón para ver las reglas CSS aplicadas al elemento seleccionado..
También hay un panel de propiedades CSS - cambia entre los dos haciendo clic en 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 añadido el font-weight: negrita; Regla CSS, haciendo el texto del elemento en negrita.
Bloc de notas de JavaScript
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 tengas, haz clic en el Ejecutar menú y seleccione correr. 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, de los cuales puede alternar la visibilidad: solicitudes de red, mensajes de error de CSS, mensajes de error de JavaScript y mensajes de desarrollador web..
¿Qué es un mensaje para desarrolladores web? Es un mensaje impreso al objeto window.console. Por ejemplo, podríamos ejecutar el window.console.log ("Hello World"); Código JavaScript en el Bloc de notas 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..
Actualiza la página y verás las solicitudes de red generadas y otros mensajes..
Usa 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áginas. 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 = "none" en la consola.
Si está interesado en aprender más sobre el uso de la consola y sus funciones integradas, visite la página de la Consola Web en el sitio web de la Red de Desarrolladores de Mozilla.
Obtener más herramientas
los Obtener más herramientas Esta opción lo lleva a la colección de complementos del cuadro de herramientas del desarrollador web en el sitio web de complementos de Mozilla. Contiene algunos de 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, puede recordar el Inspector DOM. Las herramientas integradas para desarrolladores de Firefox han recorrido un largo camino desde entonces..
