Présentation effectuée à Paris Web par Christophe Villeneuve sur "DevTools : La boîte à outils de développements".
Cette présentation a pour but d'aider les développeurs à améliorer leur projet en respectant les normes et standard de W3C
@hellosct1 – Programmez #24 - Quels sont les problèmes actuels ? ● Lors d’un développement Web ● Éditeurs à retard technologique ● Peu d’interactions avec le navigateur
@hellosct1 – Programmez #24 - 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 – Programmez #24 - 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 – Programmez #24 - 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 – Programmez #24 - Un Profil différent ● Dans le navigateur – About:profiles ● Dans une console $ profile -p https://support.mozilla.org/fr/kb/gestionnaire-profils-creer-supprimer-changer-profils-firefox
@hellosct1 – Programmez #24 - 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 – Programmez #24 - 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 – Programmez #24 - Stockage ● Utilisation : – Activer dans les options → Onglet mémoire ● Inspecter les différents types de stockage – page Web peut utiliser
@hellosct1 – Programmez #24 - Mesurer un objet dans un écran ● Utilisation – Paramètres – Cocher la case → Mesurer une zone de la page – Un icône apparaît
@hellosct1 – Programmez #24 - 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 – Programmez #24 - Gestion de polices ● Modification des tailles – Tailles de la police de caractères ● Utilisation – Sélectionner un bloc de la page web (ex : Div) – Inspecteur – Onglet Polices
@hellosct1 – Programmez #24 - 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 – Programmez #24 - 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 – Programmez #24 - 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 – Programmez #24 - 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 – Programmez #24 - 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 – Programmez #24 - 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 – Programmez #24 - 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 – Programmez #24 - 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 – Programmez #24 - Documentation des outils utilisateurs ● How to ● https://firefox-source-docs.mozilla.org/devtools-user/page_insp ector/how_to/ ● Travailler avec Firefox – https://firefox-source-docs.mozilla.org/contributing/index.ht ml ● Compatibilité entre les navigateurs – https://devtoolstips.org/
@hellosct1 – Programmez #24 - 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
nrryuya
nishiuma
finengine
oracle4engineer
smt7174
ytaisei
hirosatogamo
kohbis
soracom
unclejoe
kmwebnet
devopstaiwan
erikaheidi
jasonvnalue
mraible
iamctodd
tammielis
jonrohan
eileencodes
sachag
danielanewman
caitiem20
paulrobertlloyd
marktimemedia