Comment déboguer des applications Web avec les outils de développement Firefox

Un savoir-faire incontournable pour le développement Web avancé

Photo de Charles sur Unsplash

En sachant comment déboguer votre application Web, vous pouvez utiliser les outils de développement pour pirater votre productivité. Après avoir lu cet article, vous pourrez:

  • déboguer les versions mobile et tablette de votre application Web sur votre ordinateur.
  • connectez l'application Firefox à votre ordinateur et déboguez les applications Web à cet endroit.
  • trouvez les polices et les styles qui conviennent le mieux à votre site Web sans avoir à construire votre code CSS et JS encore et encore.
  • trouvez des problèmes dans votre mise en page CSS.

Enfin, à la fin, je vais vous expliquer comment installer le puissant Firefox Developer Edition.

Ouverture des outils de développement

La plupart d'entre nous savons comment ouvrir les outils de développement par erreur ou par expérience.

Voici quelques manières d'ouvrir la boîte à outils du développeur:

  • Appuyez sur la touche F12
  • Allez dans le menu hamburger à l'extrême droite de la barre d'URL et cliquez dessus. En bas, recherchez l'option ci-dessus «Aide» qui dit «Développeur Web». Ouvrez toutes les neuf options.

Bref aperçu de l'interface utilisateur

Tout en haut de la boîte à outils, vous constaterez qu'il existe de nombreux «outils» ayant des utilisations très différentes.

Barre d'outils
  1. L'option de pointeur vous aidera à trouver un élément DOM dans votre page Web en le survolant simplement dans l'interface utilisateur.
  2. Inspecteur de page: l’inspecteur de page vous permet de visualiser le code HTML de votre page Web au moment de l’exécution. Il vous permet également d'afficher les propriétés CSS et de configurer les polices et les animations.
  3. Console Web: La console Web est l’outil le plus connu des développeurs front-end. C'est là que votre console.log ("..."); les déclarations sont imprimées.
  4. Débogueur Javascript: vous pouvez utiliser l'outil de débogage pour voir où des erreurs se produisent dans votre code Javascript. Il peut également procéder à un reverse engineering de vos modules Webpack et vous permettre de localiser des erreurs dans des fichiers source spécifiques à partir de votre code compilé.
  5. Editeur de styles: vous pouvez afficher et modifier les feuilles de style individuelles utilisées dans votre page Web, y compris le CSS incorporé dans les balises de style. De plus, vous pouvez écrire du code CSS supplémentaire ou importer une autre feuille de style à partir de votre ordinateur.
  6. Outils de performance: Cela vous permet de voir la durée de certains événements et le nombre de FPS de votre page Web. (Le nombre de FPS, ou images par seconde, est le nombre de fois où le navigateur est capable de mettre à jour l'affichage. Au mieux, il devrait atteindre 60 FPS selon les systèmes d'exploitation et de matériel de votre moniteur.) Vous devrez alors commencer à surveiller vos performances. est chargé dans un tampon en mémoire. Vous ne pouvez afficher les résultats qu'après avoir arrêté la surveillance. sinon, les performances se dégraderaient en raison de la charge d'affichage des données de performances en temps réel.
  7. Mémoire: L'outil de mémoire vous permet de créer un instantané de votre segment de mémoire Javascript. Il peut également localiser où vous allouez vos objets dans votre code source.
  8. Moniteur de réseau: cet outil vous permet de visualiser toutes vos demandes de réseau.
  9. Stockage: vous pouvez afficher et modifier le cache, les cookies, la base de données indexée, le stockage local et de session de votre site.
  10. Outils d'accessibilité: vous pouvez voir comment les fonctionnalités d'accessibilité interprètent votre page Web. Ceci est crucial si vous voulez que votre site Web atteigne le maximum de public possible.
  11. Mode de conception réactif: vous pouvez tester le fonctionnement de votre site Web sur les appareils mobiles et les tablettes. Cela fonctionne beaucoup mieux que de réduire la fenêtre du navigateur de votre ordinateur portable. En outre, vous pouvez tester la réponse du site Web à la rotation des périphériques, à la régulation du réseau, aux ratios de pixels des périphériques et à la simulation d’événements tactiles.

Le dernier menu de la barre d’outils vous permettra d’ancrer la boîte à outils du développeur à gauche, en bas ou à droite du navigateur. De plus, vous pouvez séparer la boîte à outils dans une fenêtre totalement différente.

Caractéristiques importantes que vous devriez utiliser

Tester de nouvelles polices

Dans l’inspecteur de page, recherchez le troisième panneau (il peut être masqué, cliquez sur la flèche située dans le coin supérieur gauche du deuxième panneau). Il a un onglet appelé "Polices".

Après avoir sélectionné un élément HTML à l'aide de l'option de pointeur, vous pouvez commencer à manipuler la taille de la police, son poids, son style et à trouver la meilleure combinaison. Vous pouvez même changer la famille de polices en modifiant l'attribut de style HTML directement dans l'éditeur HTML.

Modification de la police «Hello word» à l'aide des outils de développement

En plus de l'édition de polices, vous pouvez modifier des animations. Je n'ai pas encore testé cette fonctionnalité!

Pipette

C’est l’une de ces caractéristiques que tout le monde ignore parce qu’elle est si petite. Si vous regardez attentivement, à côté de la zone de texte «Rechercher HTML» dans l'éditeur HTML, vous trouverez un symbole compte-gouttes à droite.

Le compte-gouttes peut être utilisé pour sélectionner une couleur sur la page Web. Je n’ai pas pu faire une capture d’écran car cela prend automatiquement le focus. Je vais l'expliquer avec des mots - pas de problème!

La pipette suit votre pointeur. Il s'agrandira en un carré de pixels 7x7 et les affichera individuellement afin que vous puissiez inspecter chaque couleur. Il vous dira la couleur hexadécimale du pixel central.

Vous le trouverez utile dans de nombreux cas:

  • Si vous aimez les couleurs d'un site Web, ouvrez-le dans Firefox, inspectez chaque pixel et copiez les couleurs de votre choix.
  • Vous pouvez voir comment fonctionne l'anti-aliasing en affichant les nuances individuelles affichées dans les polices.
  • Vous pouvez déboguer votre toile HTML5. Par exemple, voyez comment l’option anti-alias de PixiJS change le rendu.

Capture d'écran

L’outil de capture d’affichage de Firefox est très utile, non seulement pour les développeurs, mais pour tout le monde. C'est quelque chose que Google Chrome n'a pas encore implémenté! Faites un clic droit sur une page Web et sélectionnez l'option «Prendre une capture d'écran».

Vous pouvez sélectionner une partie d'une page Web en faisant glisser ou même en cliquant sur un élément HTML à enregistrer.

Connecter Firefox à votre appareil Android

Conditions préalables

Vous devez disposer de Firefox pour Android et du scanner de codes à barres de ZXKing pour commencer. En outre, vous devez disposer d'un réseau WiFi sur lequel le débogage à distance aura lieu.

Allez dans options> paramètres> avancés dans Firefox (mobile) et activez le débogage à distance via WiFi.

Activer le débogage

  1. Ouvrez WebIDE sur votre bureau (WebDeveloper> WebIDE sur votre ordinateur portable) et cliquez sur Actualiser les périphériques.
  2. Scannez le code QR affiché à l’aide de l’application du scanner de codes à barres de votre téléphone mobile.
  3. Votre appareil mobile doit maintenant figurer dans WebIDE. Sélectionnez le.

Vous pouvez maintenant vous connecter à n’importe quel onglet ouvert dans Firefox pour Android et y associer les outils de développement. Vous pouvez maintenant exploiter la puissance de votre ordinateur pour déboguer votre application Web sur les téléphones mobiles.

MDN docs ici:

  • Débogage de Firefox avec Android
  • Débogage de Firefox avec iOS et Chrome pour Android
  • Débogage USB avec Firefox

Firefox Developer Edition

Enfin, ma partie préférée de cette histoire - Présentation de Firefox Developer Edition. Ceci est une édition peu connue de Firefox axée sur les développeurs Web. Il inclut quelques add-ons (comme Valence) pour le développement Web et inclut des technologies futures qui ne sont pas incluses dans Firefox Quantum.

Il est livré à partir de constructions nocturnes. Il dispose de fonctionnalités qui se sont stabilisées au cours des six dernières semaines.

Installation sur Linux

Vous pouvez installer Firefox Developer Edition via le projet UMake. Pour cela, vous devrez ajouter le PPA pour UMake manuellement:

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

Pour ajouter l'application dans un bureau GNOME, vous devez créer une entrée de bureau comme suit:

#! / usr / bin / env xdg-open
[Entrée du bureau]
Version = 1.0
Type = Application
Terminal = faux
Nom [en_IN] = Firefox Developer Edition
Exec = / home / shukant / .local / share / umake / web / firefox-dev / firefox
Nom = Firefox Developer Edition
Icône = / home / shukant / .local / share / umake / web / firefox-dev / navigateur / chrome / icons / default / default128.png

Assurez-vous de changer les chemins de fichiers en ceux de votre système. Spécifiquement, changez la partie “/ home / shukant /” en “/ home / votre-nom d'utilisateur”.

Windows et macOS

Vous pouvez utiliser directement le programme d'installation de Firefox: https://www.mozilla.org/en-US/firefox/developer/.

NOTE: Les utilisateurs de Linux peuvent aussi utiliser le lien - bien que l'installation du paquet .deb directement à l'aide de votre gestionnaire de paquets sera plus compliquée.

Lectures complémentaires:

  • Un aperçu complet du canevas HTML
  • Comment les valeurs non-entières sont stockées dans un float (et pourquoi il flotte)
  • Supprimer les dépendances circulaires en JavaScript
  • Comment synchroniser votre application sur plusieurs appareils (Android)
  • Comment utiliser Firebase pour créer des jeux Android multijoueurs

Assurez-vous de me dire comment vous aimez Firefox Developer Edition sur Twitter. De plus, expliquez si vous pouvez passer de Chrome à Firefox pour le débogage de vos applications Web !!!