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.
hellosct1
quramy
kdai
tomokusaba
peterfriese
subomi
teamhimeh
skanehira
ogiwarat
poteboy
shibe23
hschwentner
eileencodes
geeforr
frogandcode
hursman
notwaldorf
chriscoyier
bermonpainter
jcasabona
stephaniewalter
michaelherold
62gerente
thoeni