Cómo depurar aplicaciones web con Firefox Developer Tools

Un saber hacer imprescindible para el desarrollo web avanzado

Foto de Charles  en Unsplash

Al saber cómo depurar su aplicación web, puede aprovechar las herramientas de desarrollador para hackear su productividad. Después de leer este artículo, podrás:

  • depure las versiones para dispositivos móviles y tabletas de su aplicación web en su computadora.
  • conecta la aplicación móvil de Firefox a tu computadora y depura las aplicaciones web allí.
  • encuentre las fuentes y estilos que mejor se adapten a su sitio web sin tener que construir su código CSS y JS una y otra vez.
  • encuentra problemas en tu diseño CSS.

Finalmente, al final, les voy a decir cómo instalar la poderosa Firefox Developer Edition.

Abrir herramientas para desarrolladores

La mayoría de nosotros sabemos cómo abrir las herramientas de desarrollador, ya sea por error o por experiencia.

Aquí hay algunas formas de abrir la caja de herramientas del desarrollador:

  • Presione la tecla F12
  • Vaya al menú de hamburguesas en el extremo derecho de la barra de URL y haga clic en él. En la parte inferior, encuentre la opción anterior "Ayuda" que dice "Desarrollador web". Abra cualquiera de las nueve opciones.

Breve descripción de la IU

En la parte superior de la caja de herramientas, encontrará que hay muchas "herramientas" que tienen usos muy diferentes.

Barra de herramientas
  1. La opción de puntero lo ayudará a encontrar un elemento DOM en su página web simplemente pasando el mouse sobre él en la interfaz de usuario.
  2. Inspector de página: el inspector de página le permite ver el código HTML de su página web en tiempo de ejecución. También le permite ver las propiedades CSS y configurar fuentes y animaciones.
  3. Consola web: la consola web es la herramienta más conocida entre los desarrolladores front-end. Es donde su console.log ("..."); las declaraciones se imprimen.
  4. Depurador de Javascript: puede usar la herramienta de depuración para ver dónde ocurren los errores en su código Javascript. También puede realizar ingeniería inversa en sus módulos de Webpack y permitirle identificar errores en archivos fuente específicos de su código compilado.
  5. Editor de estilo: puede ver y editar las hojas de estilo individuales utilizadas en su página web, incluido CSS en línea en las etiquetas de estilo. Además, puede escribir código CSS adicional o importar otra hoja de estilo desde su computadora.
  6. Herramientas de rendimiento: esto le permite ver cuánto duran ciertos eventos y cuántos FPS puede hacer su página web. (El FPS, o cuadros por segundo, es la cantidad de veces que el navegador puede actualizar la pantalla. De manera óptima, debería ser de 60 FPS dependiendo de su sistema operativo y el hardware del monitor). Deberá comenzar a monitorear su rendimiento. se carga en un búfer en la memoria. Solo puede ver los resultados después de detener la supervisión; de lo contrario, el rendimiento se degradaría debido a la carga de mostrar los datos de rendimiento en tiempo real.
  7. Memoria: la herramienta de memoria le permite crear una instantánea de su montón de Javascript. También puede ubicar dónde está asignando sus objetos en su código fuente.
  8. Monitor de red: esta herramienta le permite ver todas sus solicitudes de red.
  9. Almacenamiento: puede ver y editar la memoria caché, las cookies, la base de datos indexada, el almacenamiento local y de sesión de su sitio.
  10. Herramientas de accesibilidad: puede ver cómo las funciones de accesibilidad interpretan su página web. Esto es crucial si desea que su sitio web obtenga la mayor audiencia posible.
  11. Modo de diseño receptivo: puede probar cómo funcionará su sitio web en dispositivos móviles y tabletas. Funciona mucho mejor que reducir la ventana del navegador en su computadora portátil. Además, puede probar la respuesta del sitio web a la rotación del dispositivo, la limitación de la red, la proporción de píxeles del dispositivo y la simulación de eventos táctiles.

El último menú en la barra de herramientas le permitirá acoplar la caja de herramientas del desarrollador en el lado izquierdo, inferior o derecho del navegador. Además, puede separar la caja de herramientas en una ventana totalmente diferente.

Características importantes que debe utilizar

Probar nuevas fuentes

En el inspector de la página, busque el tercer panel (puede estar oculto, haga clic en la flecha en la esquina superior izquierda del segundo panel). Tiene una pestaña llamada "Fuentes".

Después de seleccionar un elemento HTML con la opción de puntero, puede comenzar a manipular el tamaño de fuente, el peso, el estilo y encontrar la combinación más atractiva. Incluso puede cambiar la familia de fuentes editando el atributo de estilo HTML directamente en el editor HTML.

Edición de la fuente

Además de editar fuentes, puede editar animaciones. ¡Todavía tengo que probar esa característica!

Cuentagotas

Esta es una de esas características que todos pasan por alto porque es muy pequeña. Si observa detenidamente, al lado del cuadro de texto "Buscar HTML" en el editor de HTML, hay un símbolo de cuentagotas a la derecha.

El cuentagotas se puede usar para seleccionar un color de la página web. No pude capturarlo porque toma el foco automáticamente. Lo explicaré con palabras, ¡no hay problema!

El cuentagotas sigue tu puntero. Se expandirá en un cuadrado de píxeles de 7x7 y los mostrará expandidos individualmente para que pueda inspeccionar cada color. Le indicará el color hexadecimal del píxel central.

Le resultará útil en muchos casos:

  • Si alguna vez te encanta el esquema de colores de un sitio web, ábrelo en Firefox e inspecciona cada píxel y copia los colores que quieras.
  • Puede ver cómo funciona el suavizado visualizando sombras individuales que se muestran en las fuentes.
  • Puede depurar su lienzo HTML5. Por ejemplo, mira cómo la opción anti-alias de PixiJS cambia la representación.

Captura de pantalla

La herramienta de captura de pantalla de Firefox es muy útil, no solo para los desarrolladores, sino para todos. ¡Es algo que Google Chrome aún no ha implementado! Haga clic derecho en una página web y seleccione la opción "Tomar una captura de pantalla".

Puede seleccionar parte de una página web arrastrando o incluso haciendo clic en un elemento HTML para guardar.

Conectando Firefox a su dispositivo Android

Prerrequisitos

Para comenzar, debes tener Firefox para Android y el escáner de código de barras de ZXKing. Además, debe tener una red WiFi a través de la cual se realizará la depuración remota.

Vaya a opciones> configuración> avanzado en Firefox (móvil) y habilite la depuración remota a través de WiFi.

Habilitación de depuración

  1. Abra WebIDE en su escritorio (WebDeveloper> WebIDE en su computadora portátil) y haga clic en actualizar dispositivos.
  2. Escanee el código QR que se muestra con la aplicación de escáner de código de barras de su teléfono móvil.
  3. Su dispositivo móvil debería aparecer en WebIDE ahora. Seleccionarlo

Ahora puede conectarse a cualquier pestaña abierta en Firefox para Android y adjuntarle las herramientas de desarrollador. Ahora puede aprovechar el poder de su computadora para depurar su aplicación web en teléfonos móviles.

Documentos de MDN aquí:

  • Depuración de Firefox con Android
  • Depuración de Firefox con iOS y Chrome para Android
  • Depuración de USB con Firefox

Edición para desarrolladores de Firefox

Finalmente, mi parte favorita de esta historia: presentar Firefox Developer Edition. Esta es una edición poco conocida de Firefox centrada en desarrolladores web. Incluye algunos complementos (como Valence) para el desarrollo web e incluye tecnologías futuras que no se incluyen en Firefox Quantum normal.

Se entrega de construcciones nocturnas. Obtiene características que se han estabilizado en las últimas seis semanas.

Instalación en Linux

Puede instalar Firefox Developer Edition a través del proyecto UMake. Para eso, deberá agregar el PPA para UMake manualmente:

sudo add-apt-repository ppa: ubuntu-desktop / ubuntu-make
sudo apt-get update
sudo apt-get install ubuntu-make
umake web firefox-dev -r # instala firefox dev edition

Para agregar la aplicación en un escritorio de GNOME, debe realizar una entrada de escritorio de la siguiente manera:

#! / usr / bin / env xdg-open
[Entrada de escritorio]
Versión = 1.0
Tipo = Aplicación
Terminal = falso
Nombre [en_IN] = Firefox Developer Edition
Exec = / home / shukant / .local / share / umake / web / firefox-dev / firefox
Nombre = Edición para desarrolladores de Firefox
Icon = / home / shukant / .local / share / umake / web / firefox-dev / browser / chrome / icons / default / default128.png

Asegúrese de cambiar las rutas de los archivos a las de su sistema. Específicamente, cambie la parte "/ home / shukant /" a "/ home / your-username".

Windows y macOS

Puede usar el instalador de Firefox directamente: https://www.mozilla.org/en-US/firefox/developer/.

NOTA: Los usuarios de Linux también pueden usar el enlace, aunque será más complicado instalar el paquete .deb directamente usando su administrador de paquetes.

Otras lecturas:

  • Una descripción completa del lienzo HTML
  • Cómo se almacenan los valores no enteros en un flotante (y por qué flota)
  • Eliminar dependencias circulares en JavaScript
  • Cómo sincronizar su aplicación en múltiples dispositivos (Android)
  • Cómo usar Firebase para crear juegos de Android multijugador

Asegúrese de decirme cómo le gusta Firefox Developer Edition en Twitter. Además, explique si puede cambiar de Chrome a Firefox para depurar sus aplicaciones web.