Présentation effectuée à Paris Web par Christophe Villeneuve sur "La boîte à outils de développements dans Firefox".
Cette présentation a pour but d'aider les développeurs à améliorer leur projet en respectant les normes et standard de W3C
@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 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 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 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 Stockage ● Utilisation : – Activer dans les options → Onglet mémoire ● Inspecter les différents types de stockage – page Web peut utiliser
@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 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 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 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 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 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 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.