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

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

Avatar for hellosct1 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

Avatar for hellosct1

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