la boite à outils de développements dans firefox devtools

A51a19db1e861ad9e007de8a955d5141?s=47 hellosct1
November 17, 2019

la boite à outils de développements dans firefox devtools

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

A51a19db1e861ad9e007de8a955d5141?s=128

hellosct1

November 17, 2019
Tweet

Transcript

  1. La boîte à outils de développements dans Firefox Christophe Villeneuve

    @hellosct1 @hellosct1@mamot.fr Capitole du Libre 2019
  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. @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. @hellosct1 – Capitole Du Libre 2019 • Les problèmes de

    développement Web. • Outils de développement • On y va… par les exemples
  5. @hellosct1 – Capitole Du Libre 2019 Supprimer les frictions !!!

    • Offrir des expériences – qui fonctionnent parfaitement dans Firefox
  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. @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. @hellosct1 – Capitole Du Libre 2019 Problème développements ? •

    Nombreuses bibliothèques JS existantes
  9. @hellosct1 – Capitole Du Libre 2019 Quel est le plus

    gros problème ? • Les problèmes de connexion
  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. @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. @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. @hellosct1 – Capitole Du Libre 2019 Avez-vous connu ces problèmes?

    Avez-vous connu ces problèmes ?
  14. @hellosct1 – Capitole Du Libre 2019 Solution • Votre navigateur

    peut vous aider → sur ces scénarios
  15. @hellosct1 – Capitole Du Libre 2019 • Les problèmes de

    développement Web. • Outils de développement • On y va… par les exemples
  16. @hellosct1 – Capitole Du Libre 2019 Firefox: Developer Edition /

    Nightly
  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. @hellosct1 – Capitole Du Libre 2019 Outil principal • L'inspecteur

    – Ctrl + Maj + I – Clic droit et Examiner l’élément
  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. @hellosct1 – Capitole Du Libre 2019 • Les problèmes de

    développement Web. • Outils de développement • On y va… par les exemples
  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. @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. @hellosct1 – Capitole Du Libre 2019 La performance • Utilisation

    – Onglet Performances – Activer l’option (si pas activé) – Afficher une page et regarder
  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. @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. @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. @hellosct1 – Capitole Du Libre 2019 Editeur Javascript • Utilisation

    – Onglet console – En bas : 1 ligne spécifique • Editeur de javascript dans DevTools
  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. @hellosct1 – Capitole Du Libre 2019 Rendre lisible un fichier

    Javascript • Utilisation : – Onglet débogueur – Choisir le fichier JS –
  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. @hellosct1 – Capitole Du Libre 2019 About:debugging • Mode avancé

    • Utilisation : – Taper dans la barre de navigation • About:debugging extension devtools
  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. @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. @hellosct1 – Capitole Du Libre 2019 Editeur CSS • Utilisation

    – Editeur de style – L’icone + pour ajouter une nouvelle CSS
  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. @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. @hellosct1 – Capitole Du Libre 2019 CSS grid • Utilisation

    – Onglet inspecteur https://developer.mozilla.org/fr/docs/Outils/Inspecteur/Comment/Examine_grid_layouts
  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. @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. @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. @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. @hellosct1 – Capitole Du Libre 2019 CMS / Framework •

    Construction d’un nouveau thème → Avec les DevTools
  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. @hellosct1 – Capitole Du Libre 2019 Prochainement dans Firefox

  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. @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. @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. @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. @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. @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. @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. @hellosct1 – Capitole Du Libre 2019 Merci Christophe Villeneuve @hellosct1

    @hellosct1@mamot.fr Sources : • Miguel Useche • Harald Kirschner