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. 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
  2. @hellosct1 – Paris Web 2022 Aujourd’hui • Le Web :

    Les problèmes de développement • Outillages • Les exemples en réels • Mode avancé
  3. @hellosct1 – Paris Web 2022 • Le Web : Les

    problèmes de développement • Outils de développement • On y va… par les exemples • Mode avancé
  4. @hellosct1 – Paris Web 2022 Supprimer les frictions !!! •

    Offrir des expériences – qui fonctionnent parfaitement dans Firefox
  5. @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
  6. @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
  7. @hellosct1 – Paris Web 2022 Quel est le plus gros

    problème ? • Les problèmes de connexion
  8. @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
  9. @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
  10. @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
  11. @hellosct1 – Paris Web 2022 • Les problèmes de développement

    Web. • Outillages • On y va… par les exemples • Mode avancé
  12. @hellosct1 – Paris Web 2022 La barre d’outils • Choisir

    l’emplacement de la barre • Utilisation : – Raccourci (F12) – Choisir la position de l’ancre
  13. @hellosct1 – Paris Web 2022 Outil principal • L'inspecteur –

    Ctrl + Maj + I – Clic droit et Examiner l’élément
  14. @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
  15. @hellosct1 – Paris Web 2022 • Les problèmes de développement

    Web. • Outils de développement • On y va… par les exemples • Mode avancé
  16. @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
  17. @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
  18. @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
  19. @hellosct1 – Paris Web 2022 Editeur Javascript • Utilisation –

    Onglet console – En bas : 1 ligne spécifique • Editeur de javascript dans DevTools
  20. @hellosct1 – Paris Web 2022 Rendre lisible un fichier Javascript

    • Utilisation : – Onglet débogueur – Choisir le fichier JS –
  21. @hellosct1 – Paris Web 2022 Editeur CSS • Utilisation –

    Editeur de style – L’icone + pour ajouter une nouvelle CSS
  22. @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/
  23. @hellosct1 – Paris Web 2022 Consommation mémoire • Utilisation :

    – Activer dans les options → Onglet mémoire • Différentes vues possible → de la consommation
  24. @hellosct1 – Paris Web 2022 Réseaux • Utilisation : –

    Onglet Réseau • Inspecter les différents types de stockage – page Web peut utiliser
  25. @hellosct1 – Paris Web 2022 Stockage • Utilisation : –

    Activer dans les options → Onglet mémoire • Inspecter les différents types de stockage – page Web peut utiliser
  26. @hellosct1 – Paris Web 2022 • Les problèmes de développement

    Web. • Outils de développement • On y va… par les exemples • Mode avancé
  27. @hellosct1 – Paris Web 2022 Expert • Designer • Webmaster

    • Dev. Back / Front • Performance • ...
  28. @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)
  29. @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
  30. @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
  31. @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
  32. @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
  33. @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
  34. @hellosct1 – Paris Web 2022 CSS (1/2) • Utilisation –

    Onglet inspecteur https://developer.mozilla.org/fr/docs/Outils/Inspecteur/Comment/Examine_grid_layouts
  35. @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
  36. @hellosct1 – Paris Web 2022 CSS : Transition animation •

    Utilisation – Onglet CSS https://devtoolstips.org/tips/en/visualize-css-transforms/
  37. @hellosct1 – Paris Web 2022 Sauter un attribut d’un label

    • Choisir élément – Cliquer sur le label – Arriver sur le input directement
  38. @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
  39. @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
  40. @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
  41. @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.
  42. @hellosct1 – Paris Web 2022 Visualiser contenu JSON • Utilisation

    – Ouvrir le fichier JSON dans la barre de navigation
  43. @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
  44. @hellosct1 – Paris Web 2022 Barre de défilements indésirables •

    Utilisation – ScrollBars apparaissent sur une page Web à des endroits non voulu • Debug
  45. @hellosct1 – Paris Web 2022 CMS / Framework • Construction

    d’un nouveau thème → Avec les DevTools
  46. @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
  47. @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
  48. @hellosct1 – Paris Web 2022 WebExtension • Construisez votre outil

    • Utilisation : – Taper dans la barre de navigation • About:debugging extension devtools
  49. @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/
  50. @hellosct1 – Paris Web 2022 Containers • Inspiré de l’extension

    • Natif dans Nightly • Tester les différents profils – Pour les CMS / Frameworks
  51. @hellosct1 – Paris Web 2022 Box models • Afficher et

    modifier la boite d’un élément HTML • About:config – devtools.layout.boxmodel.highlightProperty → True
  52. @hellosct1 – Paris Web 2022 Web console sidebar Toogle •

    Changement placement – unlock, dock to bottom... • About:config – devtools.webconsole.sidebarToggle → True
  53. @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)
  54. @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
  55. @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.
  56. @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/
  57. @hellosct1 – Paris Web 2022 Merci Christophe Villeneuve @hellosct1 @[email protected]

    Sources : • Miguel Useche • Harald Kirschner • Jan Honza Odvarko