Firefox Developer Edition : Zoom sur ses fonctionnalités

L'outil de développement

FDE_Outil de developpement

Voici les principales fonctionnalités que nous propose cette version de Firefox.

L’inspecteur de code

L’inspecteur de code vous permet de pointer facilement un élément de votre page Web. Le pointage des éléments permet de connaitre d’un coup d’œil son « style » (que l’on peut appeler aussi son « design »)  et également de connaitre les événements JavaScript qui leur sont attachés. Ce dernier point est vraiment très pratique pour déboguer une page Web et il s’agit, selon moi, de la nouveauté la plus intéressante.

 

 

La vue adaptative

Consiste à modifier la taille de la fenêtre de votre site afin de simuler une taille différente (pour voir comment le site s’affiche sur des écrans plus grands ou plus petits, de tester votre code « responsive »). Je dis intéressant car pour moi il manque encore quelque chose : Simuler le « user-agent ». Le user-agent est le nom du navigateur que vous utilisez et qui est transmis aux sites où vous vous rendez (au passage il s’agit d’une information personnelle). Le site peut alors décider de vous afficher le site autrement suivant votre navigateur. Cette fonctionnalité manquante à Firefox est déjà disponible dans Google Chrome depuis quelques temps et c’est donc dommage de ne pas l’avoir intégré dans Firefox.

 

 

La console Web

 

La console Web vous permet (liste non exhaustive) :

  • De consulter des messages du navigateur (par exemple si vous utilisez des choses obsolètes ou bien si vous faites des erreurs dans le code) ;

 

  • De pouvoir exécuter du code JavaScript pour réaliser vos tests en live sur votre page ;

 

  • D’afficher des messages de débogage de façon simple et dans une fenêtre précise (sans avoir besoin de polluer l’écran principal du site).

 

 

Déboguer votre JavaScript

Le débogueur de JavaScript vous permet de voir tout le JavaScript chargé dans votre page et de pouvoir dérouler son exécution pas à pas. C’est-à-dire que vous pouvez demander à votre navigateur de faire une pause quand il arrive à une ligne de code (JavaScript) précise et ensuite vous avez la main pour suivre votre code et voir ce qu’il se passe (et trouver des bugs).

 

 

L’éditeur de style

Cette éditeur permet de consulter la partie « design » de votre site. On appelle « style » des instructions pour votre navigateur pour le rendu graphique de chaque élément (vous voulez un titre en gros de couleur rouge). L’éditeur vous permet de consulter mais également de les modifier en live afin d’y voir le résultat. Il faudra ensuite appliquer vos modification dans votre fichier du site car un rechargement de la page effacera vos modifications.

 

 

Et d’autres encore…

 

Vous pourrez également trouver comme autres fonctionnalités :

  • Analyser les performances du code JavaScript pour trouver les endroits qui ralentissent ;

 

  • De consulter le chargements (ordre, temps) des différents morceaux d’une page web (page, images, styles, etc..).