Explore Our Help Articles. Dig into the knowledge base, tips and tricks, troubleshooting, and so much more. Firefox Browser; Firefox Private Network. How can I get the xpath of an element in developer tools as firebug is not supported in latest ff. Earlier I was using firebug for this purpose and now I am not able to use that as it is not supporting latest firefox.

We didn’t have a chance to blog when Firefox Developer Edition 53 came out, so now that 54 is out too, let’s discover what new features and bugs fixes made it into these new releases.

There is a lot to cover so we will get right to it.

Inspector

One of those is Final Fantasy XV: Windows Edition, and now developer Square Enix has released a special version of the game’s benchmark that demonstrates how DLSS looks and performs in their graphically-advanced, performance-intensive, open-world role-playing action game. This group of checkboxes determines which tools get an icon in the Toolbox's toolbar. As of Firefox 62, if the option to 'Select an iframe as the currently targeted document' is checked, the icon will appear in the toolbar while the Settings tab is displayed, even if the current page doesn't include any iframes.

The inspector now fully supports CSS color level 4, which means that new color syntax like hsl(120deg 100% 50%) is recognized in the CSS Rules panel.

Ff Developer Edition Pc

People love our screenshot feature. In Developer Edition 53 we added a setting that, when turned on, will copy screenshots to your clipboard directly, so you can paste those images directly in other applications.

Firebug users used to be able to copy the full CSS path of any node in the inspector. This feature has now also been added to Firefox DevTools, as demonstrated here:

When nodes are collapsed in the inspector, it’s not possible to know whether they have children or not. A visual hint is displayed between the opening and closing tags as shown below:

A lot of work was done to make the inspector faster and more reliable. In particular, the DOM tree now initializes with the DOMContentLoaded event.

The CSS Grid inspector, that can be toggled from the CSS rules panel, is now displayed for cases like display:inline-grid or display:grid !important.

Asynchronous Panning and Zooming (APZ for short) is the technology in Firefox that makes scrolling long pages super fast and smooth. Now, all the overlays that the inspector displays on web pages (like the box-model or the CSS grid lines) also benefit from it and scroll smoothly with the page.

In some situations, it may be hard to know that part of a property is overridden in a CSS rule. For instance, when only a longhand part of a shorthand property (e.g. margin-bottom in margin) gets overridden, the CSS rules panel didn’t show this unless you expand the shorthand property. This has changed, and the CSS rules panel now looks like this:

Right-clicking on an attribute in the inspector now gives you a menu item that lets you copy attribute values. (This is in addition to editing, adding, and deleting, which were already available.):

Debugger

Our awesome new debugger front-end (available to our Nightly and Developer Edition users for now) gained a ton of new features in Firefox 54.

You can now add watch expressions in the right sidebar, which will be evaluated when you pause:

A lot of the UI state is saved between sessions now: Opened tabs, whether the sidebar is collapsed, the selected source, whether you want to pause on exceptions, etc., making it easier and much more intuitive to start debugging again.

The debugger now also supports collapsing the layout to a vertical mode when there isn’t enough space:

Code search is also much improved: Outlines are shown around matches, the total number of results is also displayed in the search bar, and a brand new function search option is now available:

The pretty-printing feature has been implemented, so you can now make those minified files much easier to read. Pretty-printing a source file opens the pretty version in another tab:

Finally, hovering over a variable in the source now pops-up a preview tooltip for this variable, and lets you see its value:

Storage

First a reminder: If you don’t see the Storage panel in DevTools, you’ll need to enable it first in the settings panel. (We will soon be working on a new way to open new tools.)

In the cookies section, multiple cookies with the same name are now shown correctly.

Local data stored by Web Extensions are now also displayed in the storage panel.

The IndexedDB storage type can now be seen in a new column. You can learn more about storage types on MDN.

Last, but definitely not least, the storage panel is now a lot faster when your Firefox browser profile has a lot of IndexedDB data in it.

Network Monitor

You might know that we spent a lot of last year migrating our tools away from XUL markup and Firefox-only JavaScript to standard HTML, CSS and JavaScript. (I blogged about this in January). Well, I’m really pleased to report that the Network Monitor is now part of that revamped tool set. It should be much easier to work on the panel if you have some HTML, CSS, and React experience.

We have also added some MDN documentation goodness in the Network Monitor. In particular, both HTTP status codes and HTTP response headers get [Learn More] links that will open relevant documentation pages on MDN:

There is now a new “transferred” size in the monitor’s toolbar that indicates how much data was really transferred over the wire (useful when data is compressed). As before, clicking on this label brings up the performance summary view, but now this view also includes the transferred size:

Responsive Design Mode

The dimension controls have been moved above the viewport so they’re easier to see and use:

We also added the ability for users to enter their own custom devices to the list of pre-defined devices:

JSON Viewer

The JSON Viewer has been around on our Nightly and Developer Edition channels for a while.
With Firefox 53, we enabled it on all channels. This means that if you run the standard release of Firefox, very soon JSON responses in tabs will be much easier to read and explore:

The JSON Viewer is now displayed for files with the application/manifest+json mime-type.

New Web Extensions API for DevTools

WebExtensions are Firefox’s new way to write extensions for the browser that are compatible to a large extent with Google Chrome and Opera.

Firefox now supports new DevTools-related WebExtensions APIs, which means that Chrome DevTools extensions are going to start working with Firefox too!

In particular, it is now possible to create new DevTools panels with the devtools.panels.create API, or even execute code in the content window with the devtools.inspectedWindow.eval API.

We created a GitHub repository that provides examples of how to build WebExtensions using the DevTools API.

Right-to-Left Layout Improvements

Many RTL (right-to-left) improvements were made in these last couple of releases.

The settings panel now fully supports RTL, the computed styles panel in the inspector also works better with RTL, the JSONViewer now supports it, the DOM panel also received some RTL love, and finally RTL support also came to the font panel in the inspector.

More Bug Fixes

The Firebug theme received a variety of fixes and now works much better for our Mac and Linux users (in particular font-size, some padding, breadcrumbs, and various colors were fixed).

The icon for the new Responsive Design Mode in the toolbar was changed. It was confusingly similar to the docking icon, and is now easier to find: Kerbal space program 1.0 2 free download.

Finally, all the buttons shown in the toolbar now display the corresponding keyboard shortcuts on hover!

Thank You!

Many volunteer contributors have helped fix bugs and implement new features in these releases, so warm thank yous to all (in no particular order)!:

• Kimberly Pennington
• Yann Gravrand
• Tomer Cohen
• Micah Tigley
• Jaideep Bhoosreddy
• Tooru Fujisawa
• Thomas Dräbing
• Adrien Enault
• Iulian Radu
• Ruturaj Vartak
• Rahul Chaudhary
• Oliver Scheiwiller
• Tim Nguyen
• Bao Quan
• Nick Fox
• Eduardo Bouças
• Leonardo Couto
• Kerem Kat
• Ken Lee
• Cosm
• Jarda Snajdr
• Florian Apolloner
• Fabien Casters
• Deepjyoti Mondal
• Dalimil Hajek
• Nicolas Chevobbe
• Taylor Alexander Brown
• Michael Brennan
• André Bargull
• Sébastien Blin
• Ajay Krishna
• Ahmed Towkir

You can see the full list of bugs if you’re interested.

As always, let us know what you think about this. You can add a comment right here, file a bug if you notice something wrong, or discuss new ideas or ask for help on our Discourse forum.

About Patrick Brosset

Patrick manages the DevTools engineering team at Mozilla

Opening Settings

Beginning with Firefox 62, the icon to open Developer Tools settings has been moved into a menu accessed by clicking/touching .. (the ellipsis) on the right of the tab.

The menu includes settings to control the location of the Developer Tools. You can choose between the default setting at the bottom of the windows, or move the tools to the left or right side of the screen. These settings are particularly useful if you have a widescreen monitor. You can also choose to open the tools in a separate window.

Show split console adds a section at the bottom of the tools showing the console. It makes visible the command line and one or two lines of the console output.

The rest of the settings are on the Developer Tools Settings Pane. To see the settings, open any of the Developer Tools, and then:

• click the 'Settings' command in the menu:
• or press F1 to toggle between the active tool and the Settings pane

The Settings pane looks something like this:

Categories

Default Firefox Developer Tools

This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.

Available Toolbox Buttons

This group of checkboxes determines which tools get an icon in the Toolbox's toolbar.

As of Firefox 62, if the option to 'Select an iframe as the currently targeted document' is checked, the icon will appear in the toolbar while the Settings tab is displayed, even if the current page doesn't include any iframes.

Note that in Firefox 52 we removed the checkbox to toggle the 'Select element' button. The 'Select element' button is now always shown.

Ff Developer Edition Mods

Themes

This enables you to choose one of two themes.

• There's a light theme, which is the default:

• A dark theme (the default on Firefox Developer Edition):

Common preferences

Settings that apply to more than one tool. There's just one of these:

Enable persistent logs

A setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.

If Common Preferences is not included in the Settings, Web Console logs can be persisted by using the 'about:config' url in browser address bar, searching for: 'devtools.webconsole.persistlog' then toggling this value to true

Inspector

Show browser styles

A setting to control whether styles applied by the browser (user-agent styles) should be displayed in the Inspector's Rules view. Note that this setting is independent of the 'Browser styles' checkbox in the Inspector's Computed view.

Truncate DOM attributes

By default, the Inspector truncates DOM attributes that are more than 120 characters long. Uncheck this box to prevent this behavior. This setting works by toggling the about:config preference 'devtools.markup.collapseAttributes'. To change the threshold at which attributes are truncated, you can edit the about:config preference 'devtools.markup.collapseAttributeLength'.

Default color unit

A setting to control how colors are represented in the inspector:

• Hex
• HSL(A)
• RGB(A)
• color name
• As authored.

Enable layout panel

Enable the experimental layout panel. This setting only exists in Firefox Nightly.

Web Console

Debugger

Style Editor

Screenshot Behavior

Editor Preferences

Preferences for the CodeMirror source editor, which is included in Firefox and used by several developer tools, including Scratchpad and the Style Editor.

Detect indentation

Auto-indent new lines based on the current indentation.

Autoclose brackets

Determines whether typing an opening character like [ or { will cause the editor to insert the matching closing character ] or } for you.

Indent using spaces

When checked, indentation will be performed using spaces, when off, the editor will use tabs instead.

Tab size

The frequency of tab stops in the editor. Select 2, 4, or 8.

Keybindings

Choose the default CodeMirror keybindings or keybindings from one of several popular editors:

• Vim
• Emacs
• Sublime Text

Advanced settings

Show Gecko platform data

A setting to control whether or not profiles should include Gecko platform symbols.

Disable HTTP Cache

Disable the browser HTTP cache to simulate first-load performance in all tabs that have the Toolbox open. This setting persists, meaning that if it is set, caching will be disabled whenever you reopen the devtools. Caching is re-enabled when the devtools are closed. Note that service workers are not affected by this option.

Ff Developer Edition Download

Disable JavaScript

Reload the current tab with JavaScript disabled.

Enable Service Workers over HTTP

Enable Service Worker registrations from insecure websites.

Enable browser chrome and add-on debugging toolboxes

Enable you to use developer tools in the context of the browser itself, and not only web content.

Enable remote debugging

Enable the developer tools to debug remote Firefox instances.

Enable worker debugging

Ff Developer Tools

Enable a panel within the debugger to debug workers.

Ff Developer Edition Online

Note: This option got removed from the UI in Firefox 56, because this version ships with a new Debugger UI, but it can still be enabled for the old UI by setting the preference devtools.debugger.workers to true.