Devtools - la boîte à outils de développements dans Firefox

Christophe Villeneuve @hellosct1 @[email protected] 27 février 2025 La boîte à
outils de développements Dans Firefox @hellosct1.bsky.social

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é Christophe Villeneuve • Consultant Open Source • Dresseur animaux

@hellosct1 Aujourd’hui • Les problèmes de développement • Fonctionnalités standards
• Mode avancé

@hellosct1 • Les problèmes de développement • Fonctionnalités standards •
Mode avancé

@hellosct1 Supprimer les frictions !!! • Offrir des expériences –
qui fonctionnent parfaitement dans Firefox

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

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

@hellosct1 Problème développements ? • Nombreuses bibliothèques JS existantes

@hellosct1 Quel est le plus gros problème ? • Les
problèmes de connexion

@hellosct1 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

@hellosct1 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

@hellosct1 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

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

@hellosct1 Solution • Votre navigateur peut vous aider → sur
ces scénarios

@hellosct1 Un Navigateur

@hellosct1 Firefox: Developer Edition / Nightly https://www.mozilla.org/fr/firefox/developer/ https://www.mozilla.org/fr/firefox/channel/desktop/

@hellosct1 • Le Web : Les problèmes de développement •
Fonctionnalités standards • Mode avancé

@hellosct1 Un Profil différent • Dans le navigateur – About:profiles
• Dans un terminal – Linux $ ./firefox -p https://support.mozilla.org/fr/kb/gestionnaire-profils-creer-supprimer-changer-profils-firefox

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

@hellosct1 Quelques fonctionnalités • Inspecteur • 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

@hellosct1 Outil principal • L'inspecteur – Ctrl + Maj +
I – Clic droit \ Inspecter l’élément • L’inspecteur accessibilité – Clic droit \ Inspecter les propriétés d’accessibilité

@hellosct1 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

@hellosct1 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

@hellosct1 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

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

@hellosct1 Rendre lisible un fichier Javascript • Utilisation : –
Onglet débogueur – Choisir le fichier JS –

@hellosct1 Outils de développement de Firefox https://hacks.mozilla.org/2019/10/firefox-70-a-bountiful-release-for-all/#developertools

@hellosct1 Editeur CSS • Utilisation – Editeur de style –
L’icone + pour ajouter une nouvelle CSS

@hellosct1 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/

@hellosct1 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

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

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

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

@hellosct1 Accessibilité (1/2) • Inspecteur →Activer l’option

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

@hellosct1 • Le Web : Les problèmes de développement •
Fonctionnalités standards • Mode avancé

@hellosct1 Expert • Designer • Webmaster • Dev. Back /
Front • Performance • ...

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

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

@hellosct1 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

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

@hellosct1 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

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

@hellosct1 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

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

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

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

@hellosct1 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

@hellosct1 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

@hellosct1 Points de surveillance • Utilisation – Débogueur – Clic
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.

@hellosct1 Visualiser contenu JSON • Utilisation – Ouvrir le fichier
JSON dans la barre de navigation

@hellosct1 CMS / Framework • Construction d’un nouveau thème →
Avec les DevTools

@hellosct1 Etendre les outils de développements • 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

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

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

@hellosct1 Documentation des outils utilisateurs • How to • https://firefox-source-docs.mozilla.org/devtools-user/page_insp
ector/how_to/ • Travailler avec Firefox – https://firefox-source-docs.mozilla.org/contributing/index.ht ml • Compatibilité entre les navigateurs – https://devtoolstips.org/

@hellosct1 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.

@hellosct1 Plus loin • Firefox DevTools – 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/ • https://mozilla.github.io/standards-positions/ • Forum – https://discourse.mozilla.org/c/devtools • Mozilla hacks – https://hacks.mozilla.org/

@hellosct1 Merci Christophe Villeneuve Sources : • Miguel Useche •
Harald Kirschner • Jan Honza Odvarko @hellosct1 @[email protected] @hellosct1.bsky.social

Devtools - la boîte à outils de développements ...

Devtools - la boîte à outils de développements dans Firefox

More Decks by hellosct1

Other Decks in Technology

Featured

Transcript