La boîte à outils de développements dans Firefox

La boîte à outils de développements dans Firefox
Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
8 octobre 2022

Atos open source - afup – lemug.fr – mariadb – drupal – mozilla - firefox – lemugfr - sumo – webextensions – VR – AR – XR - Cause commune 93.1 FM - TechSpeaker - Lizard - eyrolles – editions eni – programmez – linux pratique – webriver – elephpant -
CommonVoice – Sécurité - Cybersécurité
●
Consultant Open Source
●
Dresseur animaux

@hellosct1 – Paris Web 2022
Aujourd’hui
●
Le Web : Les problèmes de développement
●
Outillages
●
Les exemples en réels
●
Mode avancé

●
Le Web : Les
problèmes de
développement
●
Outils de
développement
●
On y va…
par les exemples
●
Mode avancé

Supprimer les frictions !!!
●
Offrir des expériences
– qui fonctionnent parfaitement dans Firefox

Problème numéro 1 : Le matériel
●
Nombreux
– Tablette
– Smartphone
– Ordinateur portable
●
Différentes tailles d'écran
●
Des navigateurs différents

Quels sont les problèmes actuels ?
●
Lors d’un développement Web
●
Éditeurs à retard technologique
●
Peu d’interactions avec le navigateur

Problème développements ?
●
Nombreuses bibliothèques JS existantes

Quel est le plus gros problème ?
●
Les problèmes de connexion

Autres problèmes répétitifs...
●
L'application est lente
●
Mon appareil semble lourd
→ lorsque vous utilisez votre application
●
L'application ne fonctionne pas ou mal
→ pour un utilisateur spécifique

Editeurs périmés
●
Ancien rédacteur
– Ils ne supportent pas les dernières spécifications
– Presque pas d'interaction avec le navigateur
●
Le support arrive en retard

Méthodologie de travail
●
Écrire le code
●
Exécutez votre outil d'assistance
●
Changer de navigateur
●
Rafraîchir
●
Voir les changements
●
Répéter en cas d'échec
→ Ennuyeux, improductif et répétitif

Avez-vous connu ces problèmes?
Avez-vous connu ces problèmes ?

Solution
●
Votre navigateur peut vous aider
→ sur ces scénarios

●
Les problèmes de
développement Web.
●
Outillages
●
On y va…
par les exemples
●
Mode avancé

Un Navigateur

Firefox: Developer Edition / Nightly

La barre d’outils
●
Choisir l’emplacement de la barre
●
Utilisation :
– Raccourci (F12)
– Choisir la position de l’ancre

Outil principal
●
L'inspecteur
– Ctrl + Maj + I
– Clic droit et Examiner l’élément

Quelques fonctionnalités
●
Inpecteur
●
Console web
●
Débogueur Javascript
●
Réseau
●
Performances
●
Responsive
●
Accessibilité
●
Mémoire
●
Stockage
●
DOM
●
Pipette
●
Editeurs
– Texte, styles
– Shaders, Web audio
– Capture
https://firefox-source-docs.mozilla.org/devtools-user/index.html

●
Les problèmes de
développement Web.
●
Outils de
développement
●
On y va…
par les exemples
●
Mode avancé

Les basics : l’inspecteur
●
Sélectionner une zone à la volée
– Clic droit puis examiner l’élément.
– CTRL-Shift-C (MacOS : CMD-Shift-C)
●
Définissez vos préférences
●
Débogage de l'ordre en cascade
– avec Rules & Computed
●
DOM & Console:
– inspect (element) & $ 0.textContent

CSS Flexbox inspector
●
Trouvez les conteneurs Flexbox dans l'inspecteur
→ Rapidement
●
Visualisez tous les éléments Flex
– Et l'espacement entre eux
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts

Capture écran
●
Utilisation :
– Activer dans paramètres
●
Prendre une capture écran de la page entière
●
CTRL-Shift-S (MacOS : CMD-Shift-S)
●
Sélectionner un noeud

Editeur Javascript
●
Utilisation
– Onglet console
– En bas : 1 ligne spécifique
●
Editeur de javascript dans DevTools

Rendre lisible un fichier Javascript
●
Utilisation :
– Onglet débogueur
– Choisir le fichier JS
–

Editeur CSS
●
Utilisation
– Editeur de style
– L’icone + pour ajouter une nouvelle CSS

La performance
●
Utilisation
– Onglet Performances
– Activer l’option
– Afficher une page et regarder
●
Activer dans la barre outils
– Menu → outils supplémentaires → Personnaliser
https://profiler.firefox.com/

Consommation mémoire
●
Utilisation :
– Activer dans les options
→ Onglet mémoire
●
Différentes vues possible
→ de la consommation

Réseaux
●
Utilisation :
– Onglet Réseau
●
Inspecter les différents types de stockage
– page Web peut utiliser

Stockage
●
Utilisation :
– Activer dans les options
→ Onglet mémoire
●
Inspecter les différents types de stockage
– page Web peut utiliser

Accessibilité (1/2)
●
Inspecteur
→Activer l’option

@hellosct1 -
Accessibilité Exemple (2/2)
Constraste
Message d’alerte
Ordre tabulation

Expert
●
Designer
●
Webmaster
●
Dev. Back / Front
●
Performance
●
...

Capture écran
●
Utilisation :
– Activer dans paramètres
●
Prendre une capture écran de la page entière
●
CTRL-Shift-S (MacOS : CMD-Shift-S)

Afficher une règle
●
Utilisation
– Paramètres
– Cocher la case
→ Mesurer une zone de la page
– Une règle apparaît

Mesurer un objet dans un écran
●
Utilisation
– Paramètres
– Cocher la case
→ Mesurer une zone de la page
– Un icône apparaît

Pipette
●
Connaître la couleur d’un point de l’écran
●
Utilisation :
– A partir du menu
●
Outils supplémentaires → Pipette
– Naviguer dans la page web
●
Pour connaître la valeur d’un point

Gestion de polices
●
Modification des tailles
– Tailles de la police de caractères
●
Utilisation
– Sélectionner un bloc de la page web (ex : Div)
– Inpecteur
– Onglet Polices

Détecter les espaces blancs indésirables
●
Détecter les espaces de texte dans les espaces
blancs
●
L’impact → mise en page.
●
Utilisation :
– Onglet Inspecteur
https://developer.mozilla.org/fr/docs/Outils/Inspecteur/Comment/Examiner_et_%C3%A9diter_le_code_HTML

CSS (1/2)
●
Utilisation
– Onglet inspecteur
https://developer.mozilla.org/fr/docs/Outils/Inspecteur/Comment/Examine_grid_layouts

CSS inactif (2/2)
●
Manipuler les images
●
Détecter les erreurs CSS
●
Apprendre quand et pourquoi
– certaines propriétés n'ont aucun effet sur un
élément.
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS

CSS : Transition animation
●
Utilisation
– Onglet CSS
https://devtoolstips.org/tips/en/visualize-css-transforms/

Sauter un attribut d’un label
●
Choisir élément
– Cliquer sur le label
– Arriver sur le input directement

Créer des animations CSS
●
Choisir élément CSS
– Créer ces règles
https://developer.mozilla.org/fr/docs/Web/CSS/animation

Déboguer en JS
●
Possible du pas à pas
●
Utilisation :
– Onglet débogueur
– Choisir le fichier JS
– Ajouter un point d’arrêt
→Clic sur un numéro de lignes
– Ajouter une information
→ clic droit
→ Ajouter une sortie console
→ saisir message ou une alerte

Déboguer DOM
●
Faire une pause dans les scripts
→ modifient le DOM
●
Utilisation :
– Inspecter
●
Onglet DOM
https://firefox-source-docs.mozilla.org/devtools-user/dom_property_viewer/index.html

Points de surveillance
●
Utilisation
– Débogueur
– Click droit → propriétés de l'objet
●
Onglet débogueur → Point d’arrêt... > Get/Set
●
Disponible en VSCode
●
Possibilité :
– Enregistrement d'objets dans la console
– Aperçu en ligne
– etc.

Visualiser contenu JSON
●
Utilisation
– Ouvrir le fichier JSON dans la barre de navigation

Firefox Profiler
●
Capturez un profil de performance.
– Analysez-le.
– Partagez-le.
– Rendre le web plus rapide.
●
Exemple :
– Addon : profiler.firefox.com
– Le profilage peut être de
●
courtes rafales ou le garder activé (Ctrl-Shift-1)
●
capturer (Ctrl-Shift-2) lorsque vous avez un problème de
performance

Barre de défilements indésirables
●
Utilisation
– ScrollBars apparaissent sur une page Web à des
endroits non voulu
●
Debug

CMS / Framework
●
Construction d’un nouveau thème
→ Avec les DevTools

Ettendre les outils de développements (1/2)
●
DevTools
●
Disponible sur AMO
– https://addons.mozilla.org
– AngularJS Inspector
– React Tools
– Vue.JS Inspector
– Ember Inspector
– DevTools Tweaks
– DevTools Prototyper
– React DevTools
– FireQuery
– Event Listener Tab
– Performance Analyser

Ettendre les outils de développements (1/2)
●
DevTools
●
Disponible sur AMO
– https://addons.mozilla.org
– Axe DevTools
– WAVE Evolution
– Tanaguru
– A11y
– Ainspector
– WCAG color
– Webhint
– ...
A11Y

WebExtension
●
Construisez votre outil
●
Utilisation :
– Taper dans la barre de navigation
●
About:debugging extension devtools

Documentation des outils utilisateurs
●
How to
●
https://firefox-source-docs.mozilla.org/devtools-user/pag
e_inspector/how_to/
●
Travailler avec Firefox
– https://firefox-source-docs.mozilla.org/contributing/
index.html
●
Compatibilité entre les navigateurs
– https://devtoolstips.org/

Prochainement dans Firefox

Containers
●
Inspiré de l’extension
●
Natif dans Nightly
●
Tester les différents profils
– Pour les CMS / Frameworks

Box models
●
Afficher et modifier la boite d’un élément
HTML
●
About:config
– devtools.layout.boxmodel.highlightProperty
→ True

Web console sidebar Toogle
●
Changement placement
– unlock, dock to bottom...
●
About:config
– devtools.webconsole.sidebarToggle
→ True

Et… (1/2)
●
Débogueur WebExtension Amélioré
– popups, rechargement, lancement à partir d'une
commande
●
Introduction de la barre d'outils du navigateur
multiprocessus
– Détection des processus parent de Firefox
uniquement (rapide)
– Tous les processus firefox (plus lent)
●
Un Outreachy (débogage REST)

Et… (1/2)
●
WebDrivers BIDI :
– protocole de test d'automatisation inter-navigateurs
●
Navigation dans les pages
●
Evénements du journal
●
Exécution de scripts
●
Amélioration des performances
– Panneau de la console virtualisé
– Support de nombreuses sources dans le débogueur

Enfin...
●
Écrivez le code CSS et JS directement dans le navigateur
→ Visualisez les résultats en temps réel.
●
Pas accès à un appareil?
→ Simulez-le!
●
Avez-vous déjà fait une page?
→ Déboguez-le avec le navigateur.
●
Bien sur, assurez-vous que votre site fonctionne
→ dans plusieurs navigateurs.
●
Utilisez la version développeur ou Nightly
→ pour connaître les modifications apportées sur le Web.

Plus loin
●
Firefox DevTools (MDN)
– https://developer.mozilla.org/fr/docs/Mozilla/Add-ons/WebExtensions/API/devtools
– https://developer.mozilla.org/en-US/docs/Tools/Settings
●
Documentation
– Utilisateurs
●
https://firefox-source-docs.mozilla.org/devtools-user
– Développeurs
●
https://docs.firefox-dev.tools/
●
Forum
– https://discourse.mozilla.org/c/devtools
●
Mozilla hacks
– https://hacks.mozilla.org/
●
Vidéo
– https://www.youtube.com/channel/UCh5UlGiu9d6LegIeUCW4N1w/

Merci
@hellosct1
@hellosct1@mamot.fr
Sources :
●
Miguel Useche
●
Harald Kirschner
●
Jan Honza Odvarko

La boîte à outils de développements dans Firefox

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a La boîte à outils de développements dans Firefox

Semelhante a La boîte à outils de développements dans Firefox (20)

Mais de Christophe Villeneuve

Mais de Christophe Villeneuve (20)

La boîte à outils de développements dans Firefox