Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

hellosct1
October 08, 2022

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

Présentation effectuée à Paris Web par Christophe Villeneuve sur "La boîte à outils de développements dans Firefox".
Cette présentation a pour but d'aider les développeurs à améliorer leur projet en respectant les normes et standard de W3C

hellosct1

October 08, 2022
Tweet

More Decks by hellosct1

Other Decks in Programming

Transcript

  1. La boîte à outils de développements dans Firefox
    Christophe Villeneuve
    @hellosct1
    @[email protected]
    8 octobre 2022

    View Slide

  2. 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

    View Slide

  3. @hellosct1 – Paris Web 2022
    Aujourd’hui

    Le Web : Les problèmes de développement

    Outillages

    Les exemples en réels

    Mode avancé

    View Slide

  4. @hellosct1 – Paris Web 2022

    Le Web : Les
    problèmes de
    développement

    Outils de
    développement

    On y va…
    par les exemples

    Mode avancé

    View Slide

  5. @hellosct1 – Paris Web 2022
    Supprimer les frictions !!!

    Offrir des expériences
    – qui fonctionnent parfaitement dans Firefox

    View Slide

  6. @hellosct1 – Paris Web 2022
    Problème numéro 1 : Le matériel

    Nombreux
    – Tablette
    – Smartphone
    – Ordinateur portable

    Différentes tailles d'écran

    Des navigateurs différents

    View Slide

  7. @hellosct1 – Paris Web 2022
    Quels sont les problèmes actuels ?

    Lors d’un développement Web

    Éditeurs à retard technologique

    Peu d’interactions avec le navigateur

    View Slide

  8. @hellosct1 – Paris Web 2022
    Problème développements ?

    Nombreuses bibliothèques JS existantes

    View Slide

  9. @hellosct1 – Paris Web 2022
    Quel est le plus gros problème ?

    Les problèmes de connexion

    View Slide

  10. @hellosct1 – Paris Web 2022
    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

    View Slide

  11. @hellosct1 – Paris Web 2022
    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

    View Slide

  12. @hellosct1 – Paris Web 2022
    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

    View Slide

  13. @hellosct1 – Paris Web 2022
    Avez-vous connu ces problèmes?
    Avez-vous connu ces problèmes ?

    View Slide

  14. @hellosct1 – Paris Web 2022
    Solution

    Votre navigateur peut vous aider
    → sur ces scénarios

    View Slide

  15. @hellosct1 – Paris Web 2022

    Les problèmes de
    développement Web.

    Outillages

    On y va…
    par les exemples

    Mode avancé

    View Slide

  16. @hellosct1 – Paris Web 2022
    Un Navigateur

    View Slide

  17. @hellosct1 – Paris Web 2022
    Firefox: Developer Edition / Nightly

    View Slide

  18. @hellosct1 – Paris Web 2022
    La barre d’outils

    Choisir l’emplacement de la barre

    Utilisation :
    – Raccourci (F12)
    – Choisir la position de l’ancre

    View Slide

  19. @hellosct1 – Paris Web 2022
    Outil principal

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

    View Slide

  20. @hellosct1 – Paris Web 2022
    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

    View Slide

  21. @hellosct1 – Paris Web 2022

    Les problèmes de
    développement Web.

    Outils de
    développement

    On y va…
    par les exemples

    Mode avancé

    View Slide

  22. @hellosct1 – Paris Web 2022
    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

    View Slide

  23. @hellosct1 – Paris Web 2022
    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

    View Slide

  24. @hellosct1 – Paris Web 2022
    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

    View Slide

  25. @hellosct1 – Paris Web 2022
    Editeur Javascript

    Utilisation
    – Onglet console
    – En bas : 1 ligne spécifique

    Editeur de javascript dans DevTools

    View Slide

  26. @hellosct1 – Paris Web 2022
    Rendre lisible un fichier Javascript

    Utilisation :
    – Onglet débogueur
    – Choisir le fichier JS

    View Slide

  27. @hellosct1 – Paris Web 2022
    Editeur CSS

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

    View Slide

  28. @hellosct1 – Paris Web 2022
    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/

    View Slide

  29. @hellosct1 – Paris Web 2022
    Consommation mémoire

    Utilisation :
    – Activer dans les options
    → Onglet mémoire

    Différentes vues possible
    → de la consommation

    View Slide

  30. @hellosct1 – Paris Web 2022
    Réseaux

    Utilisation :
    – Onglet Réseau

    Inspecter les différents types de stockage
    – page Web peut utiliser

    View Slide

  31. @hellosct1 – Paris Web 2022
    Stockage

    Utilisation :
    – Activer dans les options
    → Onglet mémoire

    Inspecter les différents types de stockage
    – page Web peut utiliser

    View Slide

  32. @hellosct1 – Paris Web 2022
    Accessibilité (1/2)

    Inspecteur
    →Activer l’option

    View Slide

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

    View Slide

  34. @hellosct1 – Paris Web 2022

    Les problèmes de
    développement Web.

    Outils de
    développement

    On y va…
    par les exemples

    Mode avancé

    View Slide

  35. @hellosct1 – Paris Web 2022
    Expert

    Designer

    Webmaster

    Dev. Back / Front

    Performance

    ...

    View Slide

  36. @hellosct1 – Paris Web 2022
    Capture écran

    Utilisation :
    – Activer dans paramètres

    Prendre une capture écran de la page entière

    CTRL-Shift-S (MacOS : CMD-Shift-S)

    View Slide

  37. @hellosct1 – Paris Web 2022
    Afficher une règle

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

    View Slide

  38. @hellosct1 – Paris Web 2022
    Mesurer un objet dans un écran

    Utilisation
    – Paramètres
    – Cocher la case
    → Mesurer une zone de la page
    – Un icône apparaît

    View Slide

  39. @hellosct1 – Paris Web 2022
    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

    View Slide

  40. @hellosct1 – Paris Web 2022
    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

    View Slide

  41. @hellosct1 – Paris Web 2022
    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

    View Slide

  42. @hellosct1 – Paris Web 2022
    CSS (1/2)

    Utilisation
    – Onglet inspecteur
    https://developer.mozilla.org/fr/docs/Outils/Inspecteur/Comment/Examine_grid_layouts

    View Slide

  43. @hellosct1 – Paris Web 2022
    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

    View Slide

  44. @hellosct1 – Paris Web 2022
    CSS : Transition animation

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

    View Slide

  45. @hellosct1 – Paris Web 2022
    Sauter un attribut d’un label

    Choisir élément
    – Cliquer sur le label
    – Arriver sur le input directement

    View Slide

  46. @hellosct1 – Paris Web 2022
    Créer des animations CSS

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

    View Slide

  47. @hellosct1 – Paris Web 2022
    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

    View Slide

  48. @hellosct1 – Paris Web 2022
    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

    View Slide

  49. @hellosct1 – Paris Web 2022
    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.

    View Slide

  50. @hellosct1 – Paris Web 2022
    Visualiser contenu JSON

    Utilisation
    – Ouvrir le fichier JSON dans la barre de navigation

    View Slide

  51. @hellosct1 – Paris Web 2022
    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

    View Slide

  52. @hellosct1 – Paris Web 2022
    Barre de défilements indésirables

    Utilisation
    – ScrollBars apparaissent sur une page Web à des
    endroits non voulu

    Debug

    View Slide

  53. @hellosct1 – Paris Web 2022
    CMS / Framework

    Construction d’un nouveau thème
    → Avec les DevTools

    View Slide

  54. @hellosct1 – Paris Web 2022
    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

    View Slide

  55. @hellosct1 – Paris Web 2022
    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

    View Slide

  56. @hellosct1 – Paris Web 2022
    WebExtension

    Construisez votre outil

    Utilisation :
    – Taper dans la barre de navigation

    About:debugging extension devtools

    View Slide

  57. @hellosct1 – Paris Web 2022
    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/

    View Slide

  58. @hellosct1 – Paris Web 2022
    Prochainement dans Firefox

    View Slide

  59. @hellosct1 – Paris Web 2022
    Containers

    Inspiré de l’extension

    Natif dans Nightly

    Tester les différents profils
    – Pour les CMS / Frameworks

    View Slide

  60. @hellosct1 – Paris Web 2022
    Box models

    Afficher et modifier la boite d’un élément
    HTML

    About:config
    – devtools.layout.boxmodel.highlightProperty
    → True

    View Slide

  61. @hellosct1 – Paris Web 2022
    Web console sidebar Toogle

    Changement placement
    – unlock, dock to bottom...

    About:config
    – devtools.webconsole.sidebarToggle
    → True

    View Slide

  62. @hellosct1 – Paris Web 2022
    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)

    View Slide

  63. @hellosct1 – Paris Web 2022
    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

    View Slide

  64. @hellosct1 – Paris Web 2022
    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.

    View Slide

  65. @hellosct1 – Paris Web 2022
    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/

    View Slide

  66. @hellosct1 – Paris Web 2022
    Merci
    Christophe Villeneuve
    @hellosct1
    @[email protected]
    Sources :

    Miguel Useche

    Harald Kirschner

    Jan Honza Odvarko

    View Slide