Publicité

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

10 Oct 2022
Publicité

Contenu connexe

Publicité

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

  1. La boîte à outils de développements dans Firefox Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr 8 octobre 2022
  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
  3. @hellosct1 – Paris Web 2022 Aujourd’hui ● Le Web : Les problèmes de développement ● Outillages ● Les exemples en réels ● Mode avancé
  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é
  5. @hellosct1 – Paris Web 2022 Supprimer les frictions !!! ● Offrir des expériences – qui fonctionnent parfaitement dans Firefox
  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
  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
  8. @hellosct1 – Paris Web 2022 Problème développements ? ● Nombreuses bibliothèques JS existantes
  9. @hellosct1 – Paris Web 2022 Quel est le plus gros problème ? ● Les problèmes de connexion
  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
  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
  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
  13. @hellosct1 – Paris Web 2022 Avez-vous connu ces problèmes? Avez-vous connu ces problèmes ?
  14. @hellosct1 – Paris Web 2022 Solution ● Votre navigateur peut vous aider → sur ces scénarios
  15. @hellosct1 – Paris Web 2022 ● Les problèmes de développement Web. ● Outillages ● On y va… par les exemples ● Mode avancé
  16. @hellosct1 – Paris Web 2022 Un Navigateur
  17. @hellosct1 – Paris Web 2022 Firefox: Developer Edition / Nightly
  18. @hellosct1 – Paris Web 2022 La barre d’outils ● Choisir l’emplacement de la barre ● Utilisation : – Raccourci (F12) – Choisir la position de l’ancre
  19. @hellosct1 – Paris Web 2022 Outil principal ● L'inspecteur – Ctrl + Maj + I – Clic droit et Examiner l’élément
  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
  21. @hellosct1 – Paris Web 2022 ● Les problèmes de développement Web. ● Outils de développement ● On y va… par les exemples ● Mode avancé
  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
  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
  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
  25. @hellosct1 – Paris Web 2022 Editeur Javascript ● Utilisation – Onglet console – En bas : 1 ligne spécifique ● Editeur de javascript dans DevTools
  26. @hellosct1 – Paris Web 2022 Rendre lisible un fichier Javascript ● Utilisation : – Onglet débogueur – Choisir le fichier JS –
  27. @hellosct1 – Paris Web 2022 Editeur CSS ● Utilisation – Editeur de style – L’icone + pour ajouter une nouvelle CSS
  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/
  29. @hellosct1 – Paris Web 2022 Consommation mémoire ● Utilisation : – Activer dans les options → Onglet mémoire ● Différentes vues possible → de la consommation
  30. @hellosct1 – Paris Web 2022 Réseaux ● Utilisation : – Onglet Réseau ● Inspecter les différents types de stockage – page Web peut utiliser
  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
  32. @hellosct1 – Paris Web 2022 Accessibilité (1/2) ● Inspecteur →Activer l’option
  33. @hellosct1 - Accessibilité Exemple (2/2) Constraste Message d’alerte Ordre tabulation
  34. @hellosct1 – Paris Web 2022 ● Les problèmes de développement Web. ● Outils de développement ● On y va… par les exemples ● Mode avancé
  35. @hellosct1 – Paris Web 2022 Expert ● Designer ● Webmaster ● Dev. Back / Front ● Performance ● ...
  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)
  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
  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
  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
  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
  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
  42. @hellosct1 – Paris Web 2022 CSS (1/2) ● Utilisation – Onglet inspecteur https://developer.mozilla.org/fr/docs/Outils/Inspecteur/Comment/Examine_grid_layouts
  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
  44. @hellosct1 – Paris Web 2022 CSS : Transition animation ● Utilisation – Onglet CSS https://devtoolstips.org/tips/en/visualize-css-transforms/
  45. @hellosct1 – Paris Web 2022 Sauter un attribut d’un label ● Choisir élément – Cliquer sur le label – Arriver sur le input directement
  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
  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
  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
  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.
  50. @hellosct1 – Paris Web 2022 Visualiser contenu JSON ● Utilisation – Ouvrir le fichier JSON dans la barre de navigation
  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
  52. @hellosct1 – Paris Web 2022 Barre de défilements indésirables ● Utilisation – ScrollBars apparaissent sur une page Web à des endroits non voulu ● Debug
  53. @hellosct1 – Paris Web 2022 CMS / Framework ● Construction d’un nouveau thème → Avec les DevTools
  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
  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
  56. @hellosct1 – Paris Web 2022 WebExtension ● Construisez votre outil ● Utilisation : – Taper dans la barre de navigation ● About:debugging extension devtools
  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/
  58. @hellosct1 – Paris Web 2022 Prochainement dans Firefox
  59. @hellosct1 – Paris Web 2022 Containers ● Inspiré de l’extension ● Natif dans Nightly ● Tester les différents profils – Pour les CMS / Frameworks
  60. @hellosct1 – Paris Web 2022 Box models ● Afficher et modifier la boite d’un élément HTML ● About:config – devtools.layout.boxmodel.highlightProperty → True
  61. @hellosct1 – Paris Web 2022 Web console sidebar Toogle ● Changement placement – unlock, dock to bottom... ● About:config – devtools.webconsole.sidebarToggle → True
  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)
  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
  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.
  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/
  66. @hellosct1 – Paris Web 2022 Merci Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Sources : ● Miguel Useche ● Harald Kirschner ● Jan Honza Odvarko
Publicité