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

Contenu connexe

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

Firefox comme navigateur alternatif
Firefox comme navigateur alternatifFirefox comme navigateur alternatif
Firefox comme navigateur alternatif
Christophe Villeneuve
 
Les WebExtensions et Firefox - JDLL 2017
Les WebExtensions et Firefox - JDLL 2017Les WebExtensions et Firefox - JDLL 2017
Les WebExtensions et Firefox - JDLL 2017
Christophe Villeneuve
 
Accessibilite web wcag rgaa
Accessibilite web wcag rgaaAccessibilite web wcag rgaa
Accessibilite web wcag rgaa
Christophe Villeneuve
 
Les écrans animés dans les navigateurs
Les écrans animés dans les navigateursLes écrans animés dans les navigateurs
Les écrans animés dans les navigateurs
Christophe Villeneuve
 
Le Kit du Parfait Petit Intégrateur (PW2009)
Le Kit du Parfait Petit Intégrateur (PW2009)Le Kit du Parfait Petit Intégrateur (PW2009)
Le Kit du Parfait Petit Intégrateur (PW2009)
Thierry Régagnon
 
Les performances Web mobile
Les performances Web mobileLes performances Web mobile
Les performances Web mobile
Jean-Pierre Vincent
 
Utiliser et ameliorer firefox avec les webextensions
Utiliser et ameliorer firefox avec les webextensionsUtiliser et ameliorer firefox avec les webextensions
Utiliser et ameliorer firefox avec les webextensions
Christophe Villeneuve
 
WebExtensions : Où en est-on ? /// Where we are ?
WebExtensions : Où en est-on ? /// Where we are ?WebExtensions : Où en est-on ? /// Where we are ?
WebExtensions : Où en est-on ? /// Where we are ?
Christophe Villeneuve
 
controler vos donnees éthiques dans le web
controler vos donnees éthiques dans le webcontroler vos donnees éthiques dans le web
controler vos donnees éthiques dans le web
Christophe Villeneuve
 
Infrastructure as code drupal
Infrastructure as code drupalInfrastructure as code drupal
Infrastructure as code drupal
Christophe Villeneuve
 
Techniques d'accélération des pages web
Techniques d'accélération des pages webTechniques d'accélération des pages web
Techniques d'accélération des pages web
Jean-Pierre Vincent
 
20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK
20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK
20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK
GreenIvory
 
XebiCon'18 - Deno, le nouveau NodeJS qui inverse la tendance ?
XebiCon'18 - Deno, le nouveau NodeJS qui inverse la tendance ?XebiCon'18 - Deno, le nouveau NodeJS qui inverse la tendance ?
XebiCon'18 - Deno, le nouveau NodeJS qui inverse la tendance ?
Publicis Sapient Engineering
 
HTML5 maintenant partie 1 : la sémantique
HTML5 maintenant partie 1 : la sémantiqueHTML5 maintenant partie 1 : la sémantique
HTML5 maintenant partie 1 : la sémantique
Jean-Pierre Vincent
 
Serveur nomade dans l'nternet des Objets
Serveur nomade dans l'nternet des ObjetsServeur nomade dans l'nternet des Objets
Serveur nomade dans l'nternet des Objets
Christophe Villeneuve
 
WebExtensions - it's now / c'est maintenant
WebExtensions - it's now / c'est maintenantWebExtensions - it's now / c'est maintenant
WebExtensions - it's now / c'est maintenant
Christophe Villeneuve
 
Embarquer le web dans un smartphone Firefox OS - RMLL 2015
Embarquer le web dans un smartphone Firefox OS - RMLL 2015Embarquer le web dans un smartphone Firefox OS - RMLL 2015
Embarquer le web dans un smartphone Firefox OS - RMLL 2015
Christophe Villeneuve
 

Similaire à La boîte à outils de développements dans Firefox (20)

Firefox comme navigateur alternatif
Firefox comme navigateur alternatifFirefox comme navigateur alternatif
Firefox comme navigateur alternatif
 
Les WebExtensions et Firefox - JDLL 2017
Les WebExtensions et Firefox - JDLL 2017Les WebExtensions et Firefox - JDLL 2017
Les WebExtensions et Firefox - JDLL 2017
 
Accessibilite web wcag rgaa
Accessibilite web wcag rgaaAccessibilite web wcag rgaa
Accessibilite web wcag rgaa
 
Les écrans animés dans les navigateurs
Les écrans animés dans les navigateursLes écrans animés dans les navigateurs
Les écrans animés dans les navigateurs
 
Le Kit du Parfait Petit Intégrateur (PW2009)
Le Kit du Parfait Petit Intégrateur (PW2009)Le Kit du Parfait Petit Intégrateur (PW2009)
Le Kit du Parfait Petit Intégrateur (PW2009)
 
Les performances Web mobile
Les performances Web mobileLes performances Web mobile
Les performances Web mobile
 
Utiliser et ameliorer firefox avec les webextensions
Utiliser et ameliorer firefox avec les webextensionsUtiliser et ameliorer firefox avec les webextensions
Utiliser et ameliorer firefox avec les webextensions
 
Html5 now light
Html5 now lightHtml5 now light
Html5 now light
 
WebExtensions : Où en est-on ? /// Where we are ?
WebExtensions : Où en est-on ? /// Where we are ?WebExtensions : Où en est-on ? /// Where we are ?
WebExtensions : Où en est-on ? /// Where we are ?
 
controler vos donnees éthiques dans le web
controler vos donnees éthiques dans le webcontroler vos donnees éthiques dans le web
controler vos donnees éthiques dans le web
 
Infrastructure as code drupal
Infrastructure as code drupalInfrastructure as code drupal
Infrastructure as code drupal
 
Techniques d'accélération des pages web
Techniques d'accélération des pages webTechniques d'accélération des pages web
Techniques d'accélération des pages web
 
20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK
20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK
20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK
 
XebiCon'18 - Deno, le nouveau NodeJS qui inverse la tendance ?
XebiCon'18 - Deno, le nouveau NodeJS qui inverse la tendance ?XebiCon'18 - Deno, le nouveau NodeJS qui inverse la tendance ?
XebiCon'18 - Deno, le nouveau NodeJS qui inverse la tendance ?
 
Hello xcode 4 v2
Hello xcode 4 v2Hello xcode 4 v2
Hello xcode 4 v2
 
Hello Xcode 4 v2
Hello Xcode 4 v2Hello Xcode 4 v2
Hello Xcode 4 v2
 
HTML5 maintenant partie 1 : la sémantique
HTML5 maintenant partie 1 : la sémantiqueHTML5 maintenant partie 1 : la sémantique
HTML5 maintenant partie 1 : la sémantique
 
Serveur nomade dans l'nternet des Objets
Serveur nomade dans l'nternet des ObjetsServeur nomade dans l'nternet des Objets
Serveur nomade dans l'nternet des Objets
 
WebExtensions - it's now / c'est maintenant
WebExtensions - it's now / c'est maintenantWebExtensions - it's now / c'est maintenant
WebExtensions - it's now / c'est maintenant
 
Embarquer le web dans un smartphone Firefox OS - RMLL 2015
Embarquer le web dans un smartphone Firefox OS - RMLL 2015Embarquer le web dans un smartphone Firefox OS - RMLL 2015
Embarquer le web dans un smartphone Firefox OS - RMLL 2015
 

Plus de Christophe Villeneuve

MariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQLMariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQL
Christophe Villeneuve
 
pister les pisteurs
pister les pisteurspister les pisteurs
pister les pisteurs
Christophe Villeneuve
 
Mariadb une base de données NewSQL
Mariadb une base de données NewSQLMariadb une base de données NewSQL
Mariadb une base de données NewSQL
Christophe Villeneuve
 
Open Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnanteOpen Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnante
Christophe Villeneuve
 
Pentest bus pirate
Pentest bus piratePentest bus pirate
Pentest bus pirate
Christophe Villeneuve
 
Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?
Christophe Villeneuve
 
La sécurité applicative par le design
La sécurité applicative par le designLa sécurité applicative par le design
La sécurité applicative par le design
Christophe Villeneuve
 
Foxfooding semaine 3
Foxfooding semaine 3Foxfooding semaine 3
Foxfooding semaine 3
Christophe Villeneuve
 
Foxfooding
FoxfoodingFoxfooding
Mozilla french speaking community activites
Mozilla french speaking community activitesMozilla french speaking community activites
Mozilla french speaking community activites
Christophe Villeneuve
 
Monitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et MicrosoftMonitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et Microsoft
Christophe Villeneuve
 
Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?
Christophe Villeneuve
 
Le futur de l'authentification webAuthn
Le futur de l'authentification webAuthnLe futur de l'authentification webAuthn
Le futur de l'authentification webAuthn
Christophe Villeneuve
 
Send large files with addons
Send large files with addonsSend large files with addons
Send large files with addons
Christophe Villeneuve
 
Tests d'accessibilite par la pratique
Tests d'accessibilite par la pratiqueTests d'accessibilite par la pratique
Tests d'accessibilite par la pratique
Christophe Villeneuve
 
Donnez la voix aux machines
Donnez la voix aux machinesDonnez la voix aux machines
Donnez la voix aux machines
Christophe Villeneuve
 
la réalité mélangée de A a Z
la réalité mélangée de A a Zla réalité mélangée de A a Z
la réalité mélangée de A a Z
Christophe Villeneuve
 
La réalité melangée dans vos applications
La réalité melangée dans vos applicationsLa réalité melangée dans vos applications
La réalité melangée dans vos applications
Christophe Villeneuve
 
Souverainte des données
Souverainte des donnéesSouverainte des données
Souverainte des données
Christophe Villeneuve
 
La sécurité applicative par le design
La sécurité applicative par le designLa sécurité applicative par le design
La sécurité applicative par le design
Christophe Villeneuve
 

Plus de Christophe Villeneuve (20)

MariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQLMariaDB une base de donnees NewSQL
MariaDB une base de donnees NewSQL
 
pister les pisteurs
pister les pisteurspister les pisteurs
pister les pisteurs
 
Mariadb une base de données NewSQL
Mariadb une base de données NewSQLMariadb une base de données NewSQL
Mariadb une base de données NewSQL
 
Open Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnanteOpen Source et contribution : Une association gagnante
Open Source et contribution : Une association gagnante
 
Pentest bus pirate
Pentest bus piratePentest bus pirate
Pentest bus pirate
 
Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?Peur de la migration vers l’open source ?
Peur de la migration vers l’open source ?
 
La sécurité applicative par le design
La sécurité applicative par le designLa sécurité applicative par le design
La sécurité applicative par le design
 
Foxfooding semaine 3
Foxfooding semaine 3Foxfooding semaine 3
Foxfooding semaine 3
 
Foxfooding
FoxfoodingFoxfooding
Foxfooding
 
Mozilla french speaking community activites
Mozilla french speaking community activitesMozilla french speaking community activites
Mozilla french speaking community activites
 
Monitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et MicrosoftMonitoring dynamique : Grafana et Microsoft
Monitoring dynamique : Grafana et Microsoft
 
Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?Etes vous-pret pour php8 ?
Etes vous-pret pour php8 ?
 
Le futur de l'authentification webAuthn
Le futur de l'authentification webAuthnLe futur de l'authentification webAuthn
Le futur de l'authentification webAuthn
 
Send large files with addons
Send large files with addonsSend large files with addons
Send large files with addons
 
Tests d'accessibilite par la pratique
Tests d'accessibilite par la pratiqueTests d'accessibilite par la pratique
Tests d'accessibilite par la pratique
 
Donnez la voix aux machines
Donnez la voix aux machinesDonnez la voix aux machines
Donnez la voix aux machines
 
la réalité mélangée de A a Z
la réalité mélangée de A a Zla réalité mélangée de A a Z
la réalité mélangée de A a Z
 
La réalité melangée dans vos applications
La réalité melangée dans vos applicationsLa réalité melangée dans vos applications
La réalité melangée dans vos applications
 
Souverainte des données
Souverainte des donnéesSouverainte des données
Souverainte des données
 
La sécurité applicative par le design
La sécurité applicative par le designLa sécurité applicative par le design
La sécurité applicative par le design
 

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