la boite à outils de développements dans firefox devtools

La boîte à outils de développements dans Firefox
Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
Capitole du Libre 2019

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

@hellosct1 – Capitole Du Libre 2019
Aujourd’hui
●
Les problèmes de développement Web.
●
Outils de développement
●
On y va… par les exemples

●
Les problèmes de
développement Web.
●
Outils de
développement
●
On y va…
par les exemples

Supprimer les frictions !!!
●
Offrir des expériences
– qui fonctionnent parfaitement dans Firefox

Problème numéro 1 : Le matériel
●
Nombreux
– Tablette
– Smartphone
– Ordinateur portable
●
Différentes tailles d'écran
●
Des navigateurs différents

Quelques sont les problèmes actuels ?
●
Lors d’un développement Web
●
Éditeurs à retard technologique
●
Peu d’interactions avec le navigateur

Problème développements ?
●
Nombreuses bibliothèques JS existantes

Quel est le plus gros problème ?
●
Les problèmes de connexion

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

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

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

Avez-vous connu ces problèmes?
Avez-vous connu ces problèmes ?

Solution
●
Votre navigateur peut vous aider
→ sur ces scénarios

Firefox: Developer Edition / Nightly

La barre d’outils
●
Choisir l’emplacement de la barre
●
Utilisation :
– Raccourci (F12)
– Choisir la position de l’ancre

Outil principal
●
L'inspecteur
– Ctrl + Maj + I
– Clic droit et Examiner l’élément

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

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

Capture écran
●
Utilisation :
– Activer dans paramètres
●
Prendre une capture écran de la page entière
●
Sélectionner un noeud

La performance
●
Utilisation
– Onglet Performances
– Activer l’option (si pas activé)
– Afficher une page et regarder

Consommation mémoire
●
Utilisation :
– Activer dans les options
→ Onglet mémoire
●
Différentes vues possible
→ de la consommation

Afficher une règle
●
Utilisation
– Paramètres
– Cocher la case
→ Mesurer une zone de la page
– Une règle apparaît

Mesurer un objet dans un écran
●
Utilisation
– Paramètres
– Cocher la case
→ Mesurer une zone de la page
– Un icône apparaît

Editeur Javascript
●
Utilisation
– Onglet console
– En bas : 1 ligne spécifique
●
Editeur de javascript dans DevTools

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

Rendre lisible un fichier Javascript
●
Utilisation :
– Onglet débogueur
– Choisir le fichier JS
–

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

About:debugging
●
Mode avancé
●
Utilisation :
– Taper dans la barre de navigation
●
About:debugging
extension devtools

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

Accessibilité
●
Inspecteur
→Activer l’option
●
Plus loin avec une extension :
– Addon webhint : https://addons.mozilla.org/firefox/addon/webhint

Editeur CSS
●
Utilisation
– Editeur de style
– L’icone + pour ajouter une nouvelle CSS

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

Créer des animations CSS
●
Choisir élément CSS
– Créer ces règles
https://developer.mozilla.org/fr/docs/Web/CSS/animation

CSS grid
●
Utilisation
– Onglet inspecteur
https://developer.mozilla.org/fr/docs/Outils/Inspecteur/Comment/Examine_grid_layouts

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

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

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

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

CMS / Framework
●
Construction d’un nouveau thème
→ Avec les DevTools

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

Prochainement dans Firefox

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.

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

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).

Prochainement : Mobile viewport meta-tags
●
Plusieurs corrections en cours
→ Améliorer la précision du rendu
du mode de conception réactif.

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

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.

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/

Merci
Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
Sources :
●
Miguel Useche
●
Harald Kirschner

la boite à outils de développements dans firefox devtools

Recommandé

Recommandé

Contenu connexe

Similaire à la boite à outils de développements dans firefox devtools

Similaire à la boite à outils de développements dans firefox devtools (20)

Plus de Christophe Villeneuve

Plus de Christophe Villeneuve (20)

la boite à outils de développements dans firefox devtools