Suport technique et veille technologique
Aujourd’hui, les grandes entreprises et administrations publiques hésitent entre continuer à utiliser des logiciels propriétaires ou basculer vers les Logiciels Libres. Pourtant, la plupart des logiciels libres sont capables de bien traiter les données issues des logiciels propriétaire, et parfois avec une meilleur compatibilité.
C’est alors la barrière de la prise en main qui fait peur, et pourtant...
Les logiciels libres
L’aspect « Logiciel Libre » permet une évolution rapide et une plus grande participation des utilisateurs. Les aides et tutoriels foisonnent sur Internet ou sont directement inclus dans le logiciel lui-même.
Enfin, les concepteurs sont plus proches des utilisateurs, ce qui rend les logiciels libres plus agréable à utiliser et conviviaux.
Grâce à la disponibilité des logiciels libres, vous trouverez facilement des services de support techniques et la licence n’est plus un frein à l’utilisation de ces logiciels par votre personnel.
Notre support technique concerne essentiellement les logiciels libres, que ce soit sous forme de services ponctuels ou de tutoriels.
- Janvier 2016 -
Ce billet est une traduction du billet de Patrick Brosset : Revisiting Firefox’s DevTools. Merci à marine et Banban pour la traduction et à Maxime pour celle des articles MDN sur les outils de développement !
Si vous faites du développement web, vous savez combien les outils sont importants et vous appréciez trouver des outils qui vous simplifient la vie. Cependant, développer et tester des nouvelles fonctionnalités pour les navigateurs prend du temps. Entre le moment où un outil intéressant apparaît dans une version expérimentale et le moment où il est mis à disposition pour tous dans Firefox, de l’eau a coulé sous les ponts.
C’est pour cela que Mozilla a sorti la version Developer Edition de Firefox en novembre 2014, une version de Firefox recommandée pour les développeurs. La mise à jour des nouvelles fonctionnalités est plus rapide et vous pouvez ainsi utiliser les derniers outils. Bien entendu, il est toujours aussi nécessaire de tester les sites avec la version grand public. Firefox Developer Edition vous permet donc de lancer les deux programmes en même temps. Enfin, Firefox Developer Edition est assorti d’un nouveau thème assorti aux outils.
Un peu d’histoire
Dès 2001, un débogueur appelé « Venkman » était disponible pour la version 7 de Netscape Navigator. L’entreprise Netscape utilisait un système pour les interfaces utilisateurs : XML User Interface Language (XUL). Elle adorait également le « SOS Fantômes » et le personnage démoniaque Zuul (qui est la prononciation de XUL). Rob Ginder, le concepteur de ce premier système, avait donc quatre options pour choisir le nom de son nouveau débogueur : Venkman, Stantz, Spengler et Zeddemore. C’est le premier qui a gagné.
Venkman, le débogueur JavaScript
Venkmann était uniquement un débogueur JavaScript. Il ne pouvait pas inspecter le DOM ou afficher le trafic réseau. Netscape avait une console intégrée, mais c’était tout.
La pièce suivante du puzzle a été l’inspecteur de DOM, sorti vers 2004-2005. Cependant, il n’était pas très adapté pour les développeurs web et il s’agissait de déboguer du HTML mais aussi XUL.
Le module pour inspecter le DOM
Début 2006 donc, Firefox avait trois morceaux de puzzle : une console intégrée, un débogueur et un inspecteur de DOM. Tous étaient indépendants et n’étaient pas intégrés entre eux. Fin 2006, Joe Hewitt, qui travaillait sur les premières versions de Firefox, a sorti Firebug version 1.0. Firebug a représenté une grande avancée en permettant aux développeurs de voir le DOM, d’utiliser une console JavaScript, un débogueur et un inspecteur DOM au sein d’un même outil !
Firebug, un outil complet pour les développeurs
Mais Firebug n’a jamais été un projet officiel de Mozilla, et après le départ de Joe chez Parakey puis Facebook, le développement de Firebug a été repris par un groupe de volontaires mené par John J. Barton. Mozilla a contribué au projet en soutenant Honza Odvarko, qui a dirigé le projet suite au départ de John.
En 2011, Mozilla a décidé qu’il fallait fournir davantage d’efforts pour les outils à destination des développeurs. Mozilla démarra à partir de zéro afin de construire des outils puissants tout en continuant à supporter la maintenance de Firebug.
Un des défis que représentent les outils de développeurs est qu’ils doivent s’intégrer dans les profondeurs de la plate-forme pour comprendre comment le système fonctionne. Ils doivent faire partie du navigateur et il n’est pas simple de les proposer en tant que modules.
Ainsi, au fur et à mesure des évolutions de Firefox, le fonctionnement de Firebug en tant que module séparé devenait de plus en plus complexe. La mise à jour de l’API du débogueur, à laquelle Firebug devait coller, était un travail important. C’est pourquoi, quand Mozilla a annoncé qu’il allait séparer le processus du navigateur de celui/ceux utilisé(s) pour les contenus a été annoncée dans Firefox, Mozilla a décidé de reconstruire Firebug au-dessus des outils natifs.
Une base solide de fonctionnalités standard
Les outils de développement de Firefox ont subi de multiples transformations depuis leur création, comblant rapidement l’écart entre Firebug et les outils de développement des autres navigateurs. Ils intègrent désormais tous les outils que vous êtes en droit d’attendre d’un navigateur. Découvrez quelques-uns de ces principaux outils
L’inspecteur de page possède plusieurs fonctionnalités pour étudier le modèle de boîte, éditer les règles CSS, analyser les styles calculés, lire les polices, la disposition, les styles calculés, le support des pseudo-éléments. Il dispose également d’un outil de recherche.
L’inspecteur
La console web affiche les journaux pour JavaScript, CSS, les échanges réseau et la sécurité. Elle permet d’utiliser des mises en forme personnalisées, de prévisualiser ou d’inspecter des nœuds DOM, des objets, des tableaux, éventuellement en les filtrant.
La console web
Le débogueur JavaScript permet d’interrompre l’exécution d’un script, de naviguer dans la pile d’appels et d’inspecter les variables. Il supporte les source maps, l’affichage et la réindentation des sources minifiées. On peut également placer les fichiers des bibliothèques utilisées dans des boîtes noires et analyser les scripts chargés dynamiquement.
Le débogueur JavaScript
Le moniteur réseau liste l’ensemble des requêtes effectuées par Firefox pour charger une page web. Il affiche les en-têtes, les réponses et les cookies. Il permet de rechercher parmi ces éléments et peut afficher une analyse des performances pour le chargement de la page.
La liste des requêtes avec le moniteur réseau
L’analyse de performances avec le moniteur réseau
L’outil des performances permet de déchiffrer les performances d’un site web par rapport à JavaScript et à l’affichage. Pour cela , l’outil enregistre l’activité du navigateur sur une période de temps et restitue le taux de rafraîchissement, l’utilisation de la mémoire, les appels JavaScript et les événements affectant le rendu de la page comme le recalcul des styles, la modification de la disposition et les « peintures » nécessaires.
Le graphe en cascade de l’outil des performances
Le graphique en flammes pour JavaScript via l’outil des performances
Quelques différenciateurs essentiels
En plus des outils habituels que nous venons de présenter, Firefox possède plusieurs fonctionnalités intéressantes pour simplifier la tâche d’un développeur ou d’un designer. Nous allons en voir quelques-unes ici mais n’hésitez pas à télécharger Firefox Developer Edition et à les essayer vous-même.
Manipuler les animations
Les animations et les transitions CSS sont très utiles pour améliorer l’ergonomie d’un site web. Cela dit, il est souvent difficile de les construire correctement alors qu’on souhaite aider l’utilisateur plutôt que de le gêner. Si vous voulez que vos animations s’inscrivent sans accroc sur la page, vous aurez besoin de régler finement les étapes, les durées et les fonctions de minutages. Pour tout ça, Firefox dispose d’outils pour vous aider. Présentons-en quelques-uns.
Les fonctions de minutage
Une fonction de minutage définit la manière dont une animation ou une transition va progresser au cours du temps. Ces fonctions sont souvent décrites à l’aide de courbes de Bézier. Trouver la courbe parfaite n’est pas trivial et les outils de développement de Firefox permettent d’utiliser une bulle d’information qui permet de modifier la courbe visuellement ou bien de choisir parmi un ensemble de courbes préparamétrées.
Les animations CSS sont décrites par un ensemble de règles @keyframe. Firefox affiche ces règles parmi les règles CSS lorsque l’élément sélectionné est animé, ainsi, vous pouvez directement les éditer. Vous pouvez aussi éditer les propriétés des keyframes lorsqu’une animation est en cours.
L’inspecteur d’animation
L’inspecteur d’animation vous permet de voir chacune des animations d’une page, de détecter lorsqu’elles sont ajoutées ou retirées, de les suspendre, de les ralentir ou de les accélérer. Pour observer les animations en détail, c’est un outil très adapté.
Tester sur plusieurs appareils, plusieurs navigateurs, plusieurs écrans
C’est aujourd’hui beaucoup plus complexe de vérifier qu’un site web s’affiche correctement pour tout le monde. Il faut désormais gérer les différents ratios des différents écrans, les densités de pixels, différents navigateurs pour différents systèmes d’exploitation et appareils. Heureusement, Firefox possède des outils pour ça.
La vue adaptative
La vue adaptative permet de voir, simplement et rapidement, le rendu du site web pour différentes tailles d’écran. Vous pouvez sélectionner une taille parmi celles prédéfinies ou saisir les dimensions (grâce à Jérémie :)) que vous souhaitez pour obtenir la taille visée, vous pouvez également étirer la zone de viewport. La vue adaptative peut être activée depuis le clavier (Command + Alt + M ou Ctrl + Shift + M) ou via l’icône correspondante dans la barre d’outils des outils de développement.
Valence
Valence est un module complémentaire qui est installé avec WebIDE dans Firefox. WebIDE vous permet de connecter les outils de développement de Firefox à n’importe quel site ou application sur Firefox OS ou Firefox pour Android. Avec Valence, vous pouvez désormais connecter les outils à Chrome (pour Android ou ordinateur) et à Safari (pour iOS et Mac OS X). Valence vous fournit donc tous les atouts nécessaires pour tester les différents navigateurs, sans avoir à quitter les outils auxquels vous êtes habitué.
La barre de développement
La barre de développement permet d’utiliser différentes commandes dont une qui permet d’émuler le type de média. Cela permet notamment de tester le CSS pour l’impression.
Découvrir, utiliser et comprendre les fonctionnalités complexes de CSS
CSS peut s’avérer complexe. Certains éléments de syntaxe sont difficiles à mémoriser, certains peuvent vous être inconnus et ceux que vous connaissez peuvent avoir des conséquences difficiles à saisir. Les outils de développement de Firefox font partie du navigateur et sont donc au premier rang pour vous fournir les informations nécessaires. Voyons quelques exemples.
Les bulles d’informations pour les propriétés CSS
Les bulles d’informations pour les propriétés CSS peuvent être utilisées pour consulter les différentes valeurs et syntaxes qu’une propriété peut avoir. Firefox vous permet d’accéder à la documentation de la propriété directement depuis le navigateur, en utilisant les informations de MDN. Pour l’utiliser, effectuez un clic droit sur le nom d’une propriété dans l’éditeur de règles CSS pour obtenir la documentation.
La prévisualisation des transformations CSS
La prévisualisation des transformations CSS vous permet de comprendre comment un ensemble de fonctions de transformation modifient un élément. La propriété transform fait partie de ces propriétés CSS dont il est difficile de comprendre tous les effets uniquement grâce au code, un rendu visuel est généralement plus utile. L’outil de prévisualisation met l’élément en surbrillance pour identifier son état initial et l’état après la transformation. De cette façon, vous pouvez visualiser simplement l’effet de la transformation.
La bulle d’information pour les filtres CSS
Les filtres sont une fonctionnalité CSS relativement récente et très puissante. Grâce à eux, vous pouvez ajouter des ombres, des flous ou échanger les couleurs d’un élément. Écrire une fonction de filtre CSS valide n’est pas chose aisée et on peut enchaîner plusieurs fonctions les unes à la suite des autres. Les outils de développement Firefox vous permettent d’utiliser une bulle où vous pouvez créer des filtres, graphiquement et simplement.
Divers trucs et astuces
Besoin de prendre une capture d’écran d’une page ou d’un élément ? Capturer le rendu d’une page web ou d’un fragment de la page dans une image permet de montrer le design d’un site, de remonter des anomalies. Pour le faire dans Firefox, rien de plus simple, il suffit de cliquer droit sur n’importe quel nœud dans l’inspecteur ou d’utiliser le bouton de capture de la page présent dans la barre d’outils (sous réserve qu’il soit bien activé depuis le panneau des options).
La pipette
La pipette permet de sélectionner n’importe quelle couleur utilisée sur une page. Si vous souhaitez copier la couleur d’un fragment d’une page web ou que vous souhaitez modifier la couleur d’une propriété CSS, vous pouvez utiliser la pipette. Pour cela, vous pouvez aller dans l’onglet des règles CSS de l’inspecteur et cliquer sur le cercle de couleur d’une propriété pour la modifier. Vous pouvez également activer l’option « Sélectionner une couleur depuis la page » depuis les options des outils de développement.
Identifier tous les éléments qui correspondent à un sélecteur en cliquant sur l’icône du sélecteur depuis le panneau des règles CSS.
La barre de recherche des règles CSS
Vous pouvez filtrer les différentes mises en forme en utilisant la barre de recherche de l’onglet des règles CSS. Cela peut s’avérer utile si vous ne savez plus si telle propriété a surchargé telle autre.
Le mot de la fin
Les outils de développement Firefox ont rapidement évolué ces dernières années. De nouvelles fonctionnalités sont ajoutées dans les versions toutes les six semaines. Ce projet est celui d’une communauté active, dont vous pouvez faire partie !
N’hésitez pas à télécharger Firefox Developer Edition afin d’essayer les dernières versions de ces outils et restez à l’affût des nouvelles fonctionnalités en lisant le blog Mozilla Hacks.
(rb, jb, al)
