Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

la boite à outils de développements dans firefox devtools

422 vues

Publié le

Présentation effectuée au Capitole du Libre (17 novembre 2019) par Christophe Villeneuve sur "la boite à outils de développements dans firefox (devtools)".
Un atelier pour apprendre et voir les possibilités de la barre Devtools dans Firefox

Publié dans : Technologie
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Soyez le premier à aimer ceci

la boite à outils de développements dans firefox devtools

  1. 1. La boîte à outils de développements dans Firefox Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Capitole du Libre 2019
  2. 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 ● Dresseur animaux Free Software
  3. 3. @hellosct1 – Capitole Du Libre 2019 Aujourd’hui ● Les problèmes de développement Web. ● Outils de développement ● On y va… par les exemples
  4. 4. @hellosct1 – Capitole Du Libre 2019 ● Les problèmes de développement Web. ● Outils de développement ● On y va… par les exemples
  5. 5. @hellosct1 – Capitole Du Libre 2019 Supprimer les frictions !!! ● Offrir des expériences – qui fonctionnent parfaitement dans Firefox
  6. 6. @hellosct1 – Capitole Du Libre 2019 Problème numéro 1 : Le matériel ● Nombreux – Tablette – Smartphone – Ordinateur portable ● Différentes tailles d'écran ● Des navigateurs différents
  7. 7. @hellosct1 – Capitole Du Libre 2019 Quelques sont les problèmes actuels ? ● Lors d’un développement Web ● Éditeurs à retard technologique ● Peu d’interactions avec le navigateur
  8. 8. @hellosct1 – Capitole Du Libre 2019 Problème développements ? ● Nombreuses bibliothèques JS existantes
  9. 9. @hellosct1 – Capitole Du Libre 2019 Quel est le plus gros problème ? ● Les problèmes de connexion
  10. 10. @hellosct1 – Capitole Du Libre 2019 Autres problèmes répétitifs... ● L'application est lente ● Mon appareil semble lourd → lorsque vous utilisez votre application ● L'application ne fonctionne pas → pour un utilisateur spécifique
  11. 11. @hellosct1 – Capitole Du Libre 2019 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. 12. @hellosct1 – Capitole Du Libre 2019 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. 13. @hellosct1 – Capitole Du Libre 2019 Avez-vous connu ces problèmes? Avez-vous connu ces problèmes ?
  14. 14. @hellosct1 – Capitole Du Libre 2019 Solution ● Votre navigateur peut vous aider → sur ces scénarios
  15. 15. @hellosct1 – Capitole Du Libre 2019 ● Les problèmes de développement Web. ● Outils de développement ● On y va… par les exemples
  16. 16. @hellosct1 – Capitole Du Libre 2019 Firefox: Developer Edition / Nightly
  17. 17. @hellosct1 – Capitole Du Libre 2019 La barre d’outils ● Choisir l’emplacement de la barre ● Utilisation : – Raccourci (F12) – Choisir la position de l’ancre
  18. 18. @hellosct1 – Capitole Du Libre 2019 Outil principal  ● L'inspecteur – Ctrl + Maj + I – Clic droit et Examiner l’élément
  19. 19. @hellosct1 – Capitole Du Libre 2019 Quelques fonctionnalités ● Inpecteur ● Console web ● Débogueur Javascript ● Réseau ● Performances ● Vue adaptive ● Accessibilité ● Mémoire ● Stockage ● DOM ● Pipette ● Editeurs – Texte, styles – Shaders, Web audio – Capture https://developer.mozilla.org/fr/docs/Outils
  20. 20. @hellosct1 – Capitole Du Libre 2019 ● Les problèmes de développement Web. ● Outils de développement ● On y va… par les exemples
  21. 21. @hellosct1 – Capitole Du Libre 2019 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
  22. 22. @hellosct1 – Capitole Du Libre 2019 Capture écran ● Utilisation : – Activer dans paramètres ● Prendre une capture écran de la page entière ● Sélectionner un noeud
  23. 23. @hellosct1 – Capitole Du Libre 2019 La performance ● Utilisation  – Onglet Performances – Activer l’option (si pas activé) – Afficher une page et regarder
  24. 24. @hellosct1 – Capitole Du Libre 2019 Consommation mémoire ● Utilisation : – Activer dans les options → Onglet mémoire ● Différentes vues possible → de la consommation
  25. 25. @hellosct1 – Capitole Du Libre 2019 Afficher une règle ● Utilisation – Paramètres – Cocher la case → Mesurer une zone de la page – Une règle apparaît
  26. 26. @hellosct1 – Capitole Du Libre 2019 Mesurer un objet dans un écran ● Utilisation – Paramètres – Cocher la case → Mesurer une zone de la page – Un icône apparaît
  27. 27. @hellosct1 – Capitole Du Libre 2019 Editeur Javascript ● Utilisation – Onglet console – En bas : 1 ligne spécifique ● Editeur de javascript dans DevTools
  28. 28. @hellosct1 – Capitole Du Libre 2019 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
  29. 29. @hellosct1 – Capitole Du Libre 2019 Rendre lisible un fichier Javascript ● Utilisation : – Onglet débogueur – Choisir le fichier JS –
  30. 30. @hellosct1 – Capitole Du Libre 2019 Pipette ● Connaître la couleur d’un point de l’écran ● Utilisation : – A partir du menu ● Développement web → Pipette – Naviguer dans la page web ● Pour connaître la valeur d’un point
  31. 31. @hellosct1 – Capitole Du Libre 2019 About:debugging ● Mode avancé ● Utilisation : – Taper dans la barre de navigation ● About:debugging extension devtools
  32. 32. @hellosct1 – Capitole Du Libre 2019 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. 33. @hellosct1 – Capitole Du Libre 2019 Accessibilité ● Inspecteur →Activer l’option ● Plus loin avec une extension : – Addon webhint : https://addons.mozilla.org/firefox/addon/webhint
  34. 34. @hellosct1 – Capitole Du Libre 2019 Editeur CSS ● Utilisation  – Editeur de style – L’icone + pour ajouter une nouvelle CSS
  35. 35. @hellosct1 – Capitole Du Libre 2019 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
  36. 36. @hellosct1 – Capitole Du Libre 2019 Créer des animations CSS ● Choisir élément CSS – Créer ces règles https://developer.mozilla.org/fr/docs/Web/CSS/animation
  37. 37. @hellosct1 – Capitole Du Libre 2019 CSS grid ● Utilisation – Onglet inspecteur https://developer.mozilla.org/fr/docs/Outils/Inspecteur/Comment/Examine_grid_layouts
  38. 38. @hellosct1 – Capitole Du Libre 2019 CSS inactif ● 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
  39. 39. @hellosct1 – Capitole Du Libre 2019 Déboguer DOM ● Faire une pause dans les scripts → modifient le DOM ● Utilisation : – Inspecter ● Onglet DOM https://developer.mozilla.org/fr/docs/Outils/DOM_Property_Viewer
  40. 40. @hellosct1 – Capitole Du Libre 2019 WebSockets ● De retour pour remplacer WebSocket Monitor →Ne fonctionne plus depuis Firefox 57 ● Cas pratique : – Filtrer par WS dans le panneau Réseau – Résultat ● Backlog – Visualiser de messages binaires, exportation HAR
  41. 41. @hellosct1 – Capitole Du Libre 2019 Détecter les espaces blancs indésirables ● Détecter les nœuds 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. 42. @hellosct1 – Capitole Du Libre 2019 CMS / Framework ● Construction d’un nouveau thème → Avec les DevTools
  43. 43. @hellosct1 – Capitole Du Libre 2019 Ettendre les outils de développements (devtools) ● Disponible sur AMO – https://addons.mozilla.org – AngularJS Inspector – Ember Inspector – DevTools Tweaks – DevTools Prototyper – React DevTools – Axe DevTools (Accessibility) – WAVE Accessibility Extension – FireQuery – Event Listener Tab – Performance Analyser
  44. 44. @hellosct1 – Capitole Du Libre 2019 Prochainement dans Firefox
  45. 45. @hellosct1 – Capitole Du Libre 2019 Prochainement : Points de surveillance ● Activer devtools.debugger.features.watchpoints dans Nightly (about:config) ● 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.
  46. 46. @hellosct1 – Capitole Du Libre 2019 Prochainement : MDN Compatibility panel ● Détectez les problèmes potentiels de compatibilité – Problemes entre CSS et HTML – lors de l'inspection de la page – Aide avec MDN. ● Actuellement – XPI depuis Github, – sideload depuis about:debugging
  47. 47. @hellosct1 – Capitole Du Libre 2019 Prochainement : Panneau d'application ● 2 nouveaux inspecteurs : – Inspection des travailleurs de service, – Inspection et stockage des manifestes d'applications Web - inspiré de Chrome. ● Utilisation à partir de devtools.activée activée ● L'inspection du manifeste fournit les bases et sera bientôt plus utile pour guider les applications Web installables. ● Les améliorations du Service Worker ont été bloquées par le refactoring de la plate-forme ● Démo sur – https://platform-status.mozilla.org/ – https://tuner.cloud/ ● Migration du panneau de stockage (XUL to React).
  48. 48. @hellosct1 – Capitole Du Libre 2019 Prochainement : Mobile viewport meta-tags ● Plusieurs corrections en cours → Améliorer la précision du rendu du mode de conception réactif.
  49. 49. @hellosct1 – Capitole Du Libre 2019 Prochainement : 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
  50. 50. @hellosct1 – Capitole Du Libre 2019 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.
  51. 51. @hellosct1 – Capitole Du Libre 2019 Plus loin ● Firefox DevTools (MDN) – https://developer.mozilla.org/fr/docs/MDN/Doc_status/DevTools – https://developer.mozilla.org/en-US/docs/Tools/Settings ● Documentation – Utilisateurs ● https://developer.mozilla.org/en-US/docs/Tools – 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/
  52. 52. @hellosct1 – Capitole Du Libre 2019 Merci Christophe Villeneuve @hellosct1 @hellosct1@mamot.fr Sources : ● Miguel Useche ● Harald Kirschner

×