Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Pendant la migration de Firebug vers les outils de développement de Firefox, vous vous demanderez certainement ou sont vos fonctionnalités adorés. Et bien, cette liste est faite pour vous.


 

Pour avoir la dernière version des outils de développement, il y a : Firefox Developer Edition

Télécharger Firefox Developer Edition

 

Général

Activation

L'activation de Firebug est basé sur des URL respectant la "same origin policy". Cela signifie que si vous ouvrez  une page de la même origine dans un onglet  différent, Firefbug s'ouvre automatiquement. Et lorsque une page d'une origine différente dans le même onglet, il se ferme automatiquement. L'activation des devtools sont eux basé sur les onglets. Par exemple, si vous ouvrez les devtools dans onglet, ils restent ouvert même si vous naviguez vers d'autres sites. Lorsque vous ouvrez un nouvel onglet, les devtools se ferment.

Ouvrir les outils

Firebug peut être ouvert avec F12. Pour l'ouvrir pour inspecter un élément il est possible d'utiliser le raccourci clavier  Ctrl+Maj+C / Cmd+Opt+C. Les DevTools partagent les mêmes raccourcis, mais fournissent également des raccourcis pour les différent panneaux. Le Moniteur Réseau peut être ouvert avec  Ctrl+Maj+Q / Cmd+Opt+Q, la Console via Ctrl+Maj+K / Cmd+Opt+K et le Déboguer avec Ctrl+Maj+S / Cmd+Opt+S.

Console

La Console est l'équivalent du panneau Console de Firebug. Elle affiche les log associé à une page web et permet d'exécuter des expressions JavaScript via sa ligne de commande. L'affichage est différent. Le bug 1269730 changera peut être cela.

Filtrer les log

Firebug offre deux façons de filtrer les messages de log, via le menu des options et via les boutons des filtres dans la barre d'outils. La Console des devtools offre une fonctionnalité similaire via les buttons de filtre dans sa barre d'outils — le tout centralisé à un seul endroit.

API de ligne de commande

L'API de ligne de commande dans Firebug fournit des fonction spéciales pour votre confort. La ligne de commande des outils de développement, à quelques fonctions en commun, mais possède également des fonction supplémentaires et n'a pas certaines fonction de Firefbug.

API de la Console

Pour loguer des choses dans la consoles depuis une page web, Firebug rend disponible une API Console dans la page. Les outils de développement partagent la même API, donc vos expressions "console.* continueront de fonctionner.

Logs persistants

Dans Firebug, il est possible de cliquer sur bouton "Persist" dans la barre d'outils pour garder les messages de log entre différent navigations de pages et entre les rechargements. Dans les outils de développemnt, cette option est appelée Activer les journaux persistants et est disponible dans les options de la boîte à outils.

Logs de serveur

Les extension Firebug tels que FirePHP permettent d'afficher des messages du serveur dans la console Firefbug. Cette fonctionnalité est déja intégrée dans les outils de développement en utilisant le protocole ChromeLogger et ne nécessite pas d'autres extensions pour être installé.

Historique de commande

L'historique de commande disponible grâce à un bouton dans la ligne de commande de Firebug est disponible en utilisant les touches / dans la ligne de commande de la Console

Inspecter les propriétés des objets

En cliquant sur objet logué dans la console, il est possible d'inspecter les propriétés de l'objet grâce au panneau DOM. Dans les outils de développement de Firefox, il est aussi possible d'inspecter les objets. La différence est qu'ils montrent les propriétés et les méthodes dans un panneau annexe dans la Console.

Afficher les requêtes réseau

Le panneau Console dans Firebug permet d'afficher les requêtes AJAX (aka XMLHttpRequests). Cette option est également disponible dans la Console des outils de developpement, grâce au filtre XHR. De plus, la Console permet d'afficher tous les autres types de requêtes résseau grace au filtre Requêtes.

Afficher les structures JSON et XML

Pour afficher les réponses JSON et XML des requêtes AJAX, Firebug a des onglets spéciaux lors de l'expension d'une requête dans son panneau Console. La Cosnsole des outils de developpement affiche ces structures directement dans l'onglet "Réponses".

Multi-line command line

La Console Firebug a une ligne de commande multi-ligne appelée Command Editor. Les outils de développment n'ont pas un panneau comme le Command Editor (ce qui a déja été demandé dans le bug 1133849), mais possède en revanche un outil séparé nommé Ardoise JavaScript, qui peut être ajouté comme panneau dans la boite à outils ou ouvert dans une fenêtre séparée, via le menu Firefox > Développement web > Ardoise, ou avec Maj + F4. Il est également bon à savoir que la ligne de commande normale ajoutte intélligement des retour à la ligne lorsqu'elle reconait une commande incomplete, document. et ensuite appuyer sur Entrée. Il est également possible de faire un retour à la ligne manuel avec Maj + Entrée.

Prévisualisation de réponse

Il y a un onglet Preview lors de l'expensin d'une requête réseau affiché dans Firebug. La Console web affiche une prévisualisation dasn l'onget Réponse. Pour le moment, la prévisualisation pour le HTML, le XML et le SVG, est cependant manquant. Vous pouvez suivre l'historque dans le bug 1353319 et le bug 1262796. Mais lors d'un clic sur l'URL de la requête, les outils de développement passent au Moniteur Réseau, qui lui a un onglet Preview.

Inspecteur

Firebug a un panneau HTML, qui permet d'éditer le HTML/XML/SVG et le CSS en relation. Dans les outils de développement, cette fonctionalitée est assurée par l'Inspecteur.

Editer l'HTML

Dans l'Inspecteur, les attributs des balises et leur contenu peuvent être édités, tout comme dans Firebug. Il permet en plus d'éditer également les balises elles-même.

Il est également possible d'éditer l'HTML directement. Dans Firebug, il faut faire clic-droit sur un noeud puis cliquer sur Edit HTML... dans le menu contextuel. Dans les outils de développement la même option est également dispobible dans le menu contextuel. Elle est nommée Éditer en tant qu'HTML. Seul la prévisualtisation des changements en temps réel est maquante, voir bug 1067318 et bug 815464.

Copier l'HTML et les informations en relation

Le panneau HTML de Firebug permet de copier l'interieur ou l'exterieur d'un élément HTML, ainsi que le CSS et le XPath via le menu contextuel d'un élément. L'inspecteur fournit les même fonctionalités, sauf pour la copie des XPaths. Voir bug 987877.

Éditer le CSS

Les deux outils permètent de voir et d'éditer les règles CSS des éléments sélectionnés dans la vue du noeud de façon similaire. Firebug possède le panneau Style pour ça, les outils de developpement eux ont le panneau Règles.

Dans Firebug il est possible d'ajouter des règles en effectuant un clic-droit puis en sélectionant Add Rule... dans le menu contextuel. Les outils de developpement eux ont une option dans le menu contextuelle nommée Ajouter une règle ainsi qu'un bouton + dans la barre d'outils de l'onglet Règles.

Pour éditer le style des élements (les propriétés CSS de l'attribut style d'un élément), dans Firebug il faut faire un clic-droit dans l'onglet Style et sélectionner Edit Element Style... dans le menu contextuel. Les outils de développement affichent une règle element {} pour ceci. Ainsi un simple clic sur cette règle permet de commencer à éditer les propriétés.

Auto-completion du CSS

Tout comme dans Firebug, l'onglet des règles fournit de l'auto-complétion pour les propriétés CSS et leurs valeurs. Quelques propriétés ne sont pas complétés, elles sont listés dans le bug 1337918.

Copier & coller du CSS

L'onglet Style de Firebug ainsi que l'onglet Règles des outils de developpement fournissent tous deux l'option dans leurs menu contextuels de copier/coller les règles CSS. Les outils de développement fournissent en plus une option pour copier le sélecteur d'une règle et de copier les règles désactivé comme du code commenté. Il manque par contre les options por copier la déclaration de style entière. Cependant cela peut être fait en sélectionant les règles dans l'onglet et copier la sélection avec Ctrl + C ou via le menu contextuel.

L'onglet des règles des outils de developpement est plus intélligent quand il s'agit de coller du CSS dedans. Il est possible de coller des déclarations de style entière dans des règles existantes. Et les règles commenté sont directement désactivées.

Toggle pseudo-classes

Firebug lets you toggle the CSS pseudo-classes :hover, :active and :focus for an element via the options menu of the Style side panel. In the DevTools there are two ways to do the same. The first one is to toggle them via the pseudo-class panel within the Rules side panel. The second one is to right-click and element within the node view and toggle the pseudo-classes via the context menu.

Examine CSS shorthand properties

CSS shorthand properties can be split into their related longhand properties by setting the option Expand Shorthand Properties within the Style side panel. The DevTools' Rules panel is a bit smarter and allows you to expand individual shorthand properties by clicking the twisty besides them.

Only show applied styles

The Style side panel in Firebug has an option to display only the properties of a CSS rule that are applied to the selected element and hide all overwritten styles. There is no such feature in the Rules side panel of the DevTools, but it is requested in bug 1335327.

Inspect box model

In Firebug the box model can be inspected via the Layout side panel. In the DevTools the box model is part of the Computed side panel. Both tools highlight the different parts of the box model within the page when hovering them in the box model view. Also, both tools allow you to edit the different values inline via a click on them.

Inspect computed styles

The computed values of CSS properties are displayed within the DevTools' Computed side panel like within Firebug's Computed side panel. The difference is that in the DevTools the properties are always listed alphabetically and not grouped (see bug 977128) and there is no option to hide the Mozilla specific styles, therefore there is an input field allowing to filter the properties.

Inspect events

Events assigned to an element are displayed in the Events side panel in Firebug. In the DevTools they are shown when clicking the small 'ev' icon besides an element within the node view. Both tools allow to display wrapped event listeners (e.g. listeners wrapped in jQuery functions). To improve the UI of the DevTools, there is also a request to add an Events side panel to them like the one in Firebug (see bug 1226640).

Stop script execution on DOM mutation

In Firebug you can break on DOM mutations, that means that when an element is changed, the script execution is stopped at the related line within the JavaScript file, which caused the change. This feature can globally be enabled via the Break On Mutate button, or individually for each element and for different types of changes like attribute changes, content changes or element removal. Unfortunately, the DevTools do not have this feature yet (see bug 1004678). To stop the script execution there, you need to set a breakpoint on the line with the modification within the Debugger panel.

Search for elements via CSS selectors or XPaths

Firebug allows to search for elements within the HTML panel via CSS selectors or XPaths. Also the DevTools' Inspector panel allows to search for CSS selectors. It even displays a list with matching IDs or classes. Searching by XPaths is not supported though (see bug 963933.

Debugger

What's the Script panel in Firebug, is the Debugger panel in the DevTools. Both allow you to debug JavaScript code executed on a website.

Switch between sources

Firebug has a Script Location Menu listing all JavaScript sources related to the website. Those sources can be static, i.e. files, or they can be dynamically generated (i.e. scripts executed via event handlers, eval(), new Function(), etc.). In the DevTools' Debugger panel the scripts are listed at the left side within the Sources side panel. Dynamically generated scripts are only listed there when they are named via a //# sourceURL comment.

Managing breakpoints

In Firebug you can set different types of breakpoints, which are all listed within the Breakpoints side panel. In the DevTools the breakpoints are shown below each script source within the Sources side panel. Those panels allow you to enable and disable single or all breakpoints and to remove single breakpoints or all of them at once. They do currently only allow to set script breakpoints. XHR, DOM, Cookie and Error breakpoints are not supported yet (see bug 821610, bug 1004678, bug 895893 and bug 1165010). While there are no breakpoints for single JavaScript errors, there is a setting Pause on Exceptions within the Debugger panel options.

Step through code

Once the script execution is stopped, you can step through the code using the Continue (F8), Step Over (F10), Step Into (F11) and Step Out (Shift+F11) options. They work the same in both tools.

Examine call stack

When the script execution is paused, Firebug displays the function call stack within its Stack side panel. In there the functions are listed together with their call parameters. In the DevTools the function call stack is shown within the Call Stack side panel. To see the call parameters in the DevTools, you need to have a look at the Variables side panel.

Examine variables

The Watch side panel in Firebug displays the window object (the global scope) by default. With the script execution halted it shows the different variable scopes available within the current call stack frame. Furthermore, it allows you to add and manipulate watch expressions. The DevTools have a Variables side panel, which works basically the same. The main difference is that it is empty when the script execution is not stopped, i.e. it doesn't display the window object. Though you can inspect that object either via the DOM property viewer or via the Web Console.

Style Editor

The Style Editor in the Firefox DevTools allows you to examine and edit the different CSS style sheets of a page like Firebug's CSS panel does it. In addition to that it allows to create new style sheets and to import existing style sheets and apply them to the page. It also allows you to toggle individual style sheets.

Switch between sources

The CSS panel of Firebug allows to switch between different CSS sources using the CSS Location Menu. The Style Editor has a sidebar for this purpose.

Edit a style sheet

Firebug's CSS panel offers three different ways for editing style sheets. The default one is to edit them inline like within the Style side panel. Furthermore it has a Source and a Live Edit mode, which allow to edit the selected style sheet like within a text editor. The Style Editor of the DevTools only has one way to edit style sheets, which corresponds to Firebug's Live Edit mode.

Try out CSS selectors

Firebug's Selectors side panel provides a way to validate a CSS selector. It lists all elements matching the entered selector. The DevTools don't have this feature yet, but it's requested in bug 1323746.

Searching within the style sheets

Firebug allows to search within the style sheets via the search field. The Style Editor in the DevTools also provides a way to search within a style sheet, though there is currently no option to search within multiple sheets (see bug 889571) and also not via a regular expression (see bug 1362030.

Performance Tool

Firebug allows to profile JavaScript performance via the "Profile" button within the Console panel or the console.profile() and console.profileEnd() commands. The DevTools provide advanced tooling regarding performance profiling. A profile can be created via console.profile() and console.profileEnd() like in Firebug or via the "Start Recording Performance" button in the Performance Tool. The output of the Call Tree is the one that comes nearest to the output in Firebug, but the Performance panel provides much more information than just the JavaScript performance. E.g. it also provides information about HTML parsing or layout.

This is the part where Firebug and the DevTools differ the most, because the outputs are completely different. While Firebug focuses on JavaScript performance and provides detailed information about JavaScript function calls during the profiling session, the Performance Tool in the DevTools offers a broad spectrum of information regarding a website's performance but doesn't go into detail regarding JavaScript function calls.

View JavaScript call performance

What comes nearest to Firebug's profiler output is the Call Tree view in the Performance panel. Like in Firebug it lists the total execution time of each function call under Total Time as well as the number of calls under Samples, the time spent within the function under Self Time and the related percentages in reference to the total execution time.

Note: The times and percentages listed in the DevTools' Call Tree view is not equivalent to the ones shown in Firebug, because it uses different APIs sampling the execution of the JavaScript code.

Jump to function declaration

Like in Firebug's profiler output the Call Tree view of the DevTools' Performance Tool allows to jump to the line of code where the called JavaScript function is defined. In Firebug the source link to the function is located at the right side of the Console panel output while within the DevTools the link is placed on the right side within the Call Tree View.

Network Monitor

To monitor network requests Firebug provides a Net panel. The Firefox DevTools allow to inspect the network traffic using the Network Monitor. Both tools provide similar information including a timeline showing the request and response times of the network requests.

Inspect request information

Both Firebug and the Firefox DevTools' Network Monitor allow you to inspect the information about a request by clicking on it. The only difference is that Firebug shows the information below the request while the Network Monitor displays it within a side panel.

In both tools there are different tabs containing different kinds of information for the selected request. They contain a Headers, Params, Response and Cookies panel. A preview of the response is shown within specifically named panels like HTML. The Network Monitor has a Preview panel for this purpose. It doesn't provide information about the cached data yet (see bug 859051), but provides a Security tab in addition to Firebug's information and a Timings tab showing detailed information about the network timings.

View request timings

Firebug offers detailed information about the network timings related to a request by hovering the Timeline column within its Net panel. The Network Monitor shows this information within a Timings side panel when you select a request.

View remote address

The remote address of a request is shown within the Remote IP column within Firebug. In the Network Monitor the address is shown at Remote Address in the Headers tab when a request is selected.

Search within requests

The search field within Firebug allows to search within the requests. The search field in the Firefox DevTools filters the requests by the entered string.

Firebug allowed to search within the response body of the network requests by checking Response Bodies within its search field options. This feature is not available yet within the Network Monitor, but it's requested in bug 1334408. While response bodies can't be searched yet, the Network Monitor allows to filter by different request properties.

Storage Inspector

The Cookies panel in Firebug displays information related to the cookies created by a page and allows to manipulate the information they store. Within the DevTools this functionality is located within the Storage Inspector. In contrast to Firebug the Storage Inspector not only allows to inspect cookies but also other kinds of storages like the local and session storage, the cache and IndexedDB databases.

Inspect cookies

All cookies related to a website are listed inside the Cookies panel in Firebug. Inside the DevTools, the cookies are grouped by domain under the Cookies section within the Storage Inspector. Both show pretty much the same information per cookie, i.e. the name, value, domain, path, expiration date and whether the cookie is HTTP-only.

The DevTools don't show by default whether a cookie is secure, but this can be enabled by right-clicking the table header and checking Secure from the context menu. Additionally, the DevTools allow to display the creation date of a cookie as well as when it was last accessed and whether it is host-only.

Edit cookies

To edit a cookie in Firebug you have to right-click the cookie and choose Edit from the context menu. Then a dialog pops up allowing you to edit the data of the cookie and save it. Inside the Storage Inspector you just have to double-click the data you want to edit. Then an inline editor allows you to edit the value.

Delete cookies

Firebug's Cookies panel allows you to delete all cookies of a website via the menu option Cookies > Remove Cookies or by pressing Ctrl+Shift+O. It also allows you to only remove session cookies via Cookies > Remove Session Cookies and to remove single cookies by right-clicking them and choosing Delete. The DevTools Storage Inspector allows to remove all cookies and a single one by right-clicking on a cookie and choosing Delete All resp. Delete "<cookie name>". Additionally, it allows to delete all cookies from a specific domain via the context menu option Delete All From "<domain name>". It currently does not allow to only delete session cookies (see bug 1336934).

Developer Toolbar

Display of error count

When there are JavaScript errors on a page, the Firebug Start Button shows a badge with their number. The DevTools show the number of errors in the Developer Toolbar.

Command API

Firebug offers a great variety of commands, which can be executed within its command line. The Developer Toolbar also provides an API with a lot of different commands to control the DevTools and execute different tasks.

Feedback

We are always happy to respond to feedback and questions. If you have any queries or points of view, feel free to share them on our DevTools Discourse Forum.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : maximelore
 Dernière mise à jour par : maximelore,