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