Release notes

Firefox 51

No change.

All devtools bugs fixed between Firefox 50 and Firefox 51.

Firefox 50

• The box model panel was moved into the Computed side panel (bug 1247729).

All devtools bugs fixed between Firefox 49 and Firefox 50.

Firefox 49

• JavaScript errors logged into the console now provide a [Learn more] link for additional debugging help (bug 1179876).
• CSS autocomplete: show more suggestions in autocomplete popup (bug 1260419).
• The Animation Inspector now exposes animation performance information in DevTools (bug 1254408).
• The Inspector's context menu has been reorganized to be cleaner and easier to use (bug 1211613).
• The Inspector now supports #RRGGBBAA and #RGBA syntax for color values (bug 1271191).
• The developer tools no longer display self-closing tags (such as <br> and <img> as if they have a closing tag on HTML pages; the behavior is unchanged for XHTML pages (bug 820926).
• Accessibility improvements!
  • The toolbox does a better job of ensuring that keyboard focus is more visible (bug 1242851).
  • Accessibility labels have been added to unlabeled controls (bug 1242715).
  • Added proper tree view semantics and keyboard navigation to the Inspector's markup view (bug 1242694).
• The Network Monitor now shows a Cause column, which provides an indication of what caused each particular network request (bug 1134073).
• In the about:debugging Add-ons page, the Reload button is only enabled for temporary add-ons. It will be disabled for all other add-ons (bug 1273184).
• In the about:debugging Workers page, a warning message will be displayed in the Service Workers section if service workers are incompatible with the current browser configuration (bug 1266415).
• about:debugging now has a new Tabs page available, which provides a complete list of all the debuggable tabs open in the current Firefox instance (bug 1266128).
• The Disable Cache option in the Toolbox Advanced settings has been renamed to Disable HTTP Cache, to make it clearer that this affects the HTTP cache, and not Service Workers/the Cache API (bug(1253018)).
• The Storage Inspector now allows IndexedDB databases to be deleted via their own context menus (bug 1205123), and will display warning messages if the IndexedDB cannot be deleted for some reason (if there are still active connections, for example) (bug 1268460).

All devtools bugs fixed between Firefox 48 and Firefox 49.

Firefox 48

Highlights:

• Edit stored items in the Storage Inspector
• Memory tool treemap view
• Reposition elements by dragging them around the page
• See HTTP request details in the Web Console
• Animation inspector updates for Web Animations API
• Firebug theme
• DOM Property Viewer

All devtools bugs fixed between Firefox 47 and Firefox 48.

Firefox 47

Highlights:

• Debug registered Service Workers
• Cache storage is now visible in the Storage Inspector
• Dominators view shows retaining paths
• Prevent panels from hiding automatically, to aid browser and add-on debugging
• 3D view (Tilt) has been removed
• Set a custom User Agent string in Responsive Design Mode
• Font Inspector is now disabled by default
• Console detects incomplete input and switches to multiline mode
• Devtools Reload lets you hack the devtools without rebuilding Firefox

All devtools bugs fixed between Firefox 46 and Firefox 47.

Firefox 46

Highlights:

• Dominators view in the Memory tool
• Allocations view in the Performance tool
• One click to apply @media rule conditions in the Style Editor

All devtools bugs fixed between Firefox 45 and Firefox 46.

Firefox 45

Highlights:

• Full-text search in the Page Inspector
• Heap snapshot diffing in the Memory tool
• DomContentLoaded and load events shown in the Network Monitor
• Animation inspector improvements

All devtools bugs fixed between Firefox 44 and Firefox 45.

Firefox 44

Highlights:

• Memory tool
• Animation inspector improvements
• New Waterfall markers: DomContentLoaded, load, worker messages

All devtools bugs fixed between Firefox 43 and Firefox 44.

Firefox 43

Highlights:

• New animation inspector UI
• Server logging in the Web Console
• Quickly find the rule that overrode a CSS declaration
• "Use in Console" context menu item in Inspector
• "Strict" option for filtering in the Rules view
• Network entries in the Console now link to the Network Monitor
• New sidebar UI for WebIDE

All devtools bugs fixed between Firefox 42 and Firefox 43.

Firefox 42

Highlights:

• Debugging Firefox for Android over Wifi
• Firefox OS Simulator configuration in WebIDE
• CSS filter presets

All devtools bugs fixed between Firefox 41 and Firefox 42.

Firefox 41

Highlights:

• Take a screenshot of a DOM node
• Copy as HAR/save as HAR
• "Add Rule" button in the Rules view
• View source in a tab
• More options to copy CSS rules
• Copy image as data: URI in the Rules view

All devtools bugs fixed between Firefox 40 and Firefox 41. Note that many of these bugs, especially those relating to the performance tools, were uplifted to Firefox 40.

Firefox 40

Highlights:

• Improvements to the Animations view
• Get help from MDN for CSS property syntax
• Edit filters in the Page Inspector
• Web Console now shows messages from workers
• Filter requests by URL in the Network Monitor
• Many new context menu options in the Network Monitor
• Show when network resources are fetched from the browser cache
• Filter rules in the Page Inspector

More:

• Break at debugger; statements in unnamed eval sources
• Copy URL/Open in New Tab context menu items for Debugger source list pane
• console.dirxml support in the Web Console
• Style Editor: "Open Link In New Tab" item added to stylesheet list
• Inspector selector search now includes class/id results even without css prefix
• Tooltips in box-model view saying which CSS rule caused the value
• Switch between color unit format in the Inspector using Shift+click
• Implement "Scroll Into View" menu item for the Inspector
• Linkify url/id/resource attributes in the Inspector
• IP address tooltip in the Network Monitor

Everything: all devtools bugs fixed between Firefox 39 and Firefox 40.

Firefox 39

Highlights:

• WebIDE now supports debugging Firefox OS devices over Wi-Fi
• WebIDE now supports Cordova projects
• Animations view: rewind, fast-forward, and jump to a specific time
• The cubic Bézier curve editor now includes 31 presets
• Drag and drop elements in the Page Inspector
• Web console command history is now persisted across sessions
• $_ console command to print the last result evaluated
• Better box model highlighting for inline elements

All devtools bugs fixed between Firefox 38 and Firefox 39.

Firefox 38

Highlights:

• Bypass audio nodes in Web Audio Editor
• "copy" command in Web Console
• Highlight and filter XmlHttpRequests in Web Console
• See optimized-out variables in the Debugger
• See security warnings in the Network Monitor
• See transferred sizes in the Network Monitor
• Play/pause all animations in the page

All devtools bugs fixed between Firefox 37 and Firefox 38.

Firefox 37

Highlights:

• Security panel in the Network Monitor
• Animations panel in the Page Inspector
• Support for running a custom build step in WebIDE

All devtools bugs fixed between Firefox 36 and Firefox 37.

Firefox 36

Highlights:

• eval sources now appear in the Debugger
• Simpler process for connecting to Firefox for Android
• Box Model Highlighter works on remote targets
• "Invert the call tree" option in the Profiler
• Inspect DOM promises in the console
• Extra "Paste" commands in the Inspector

All devtools bugs fixed between Firefox 35 and Firefox 36.

Firefox 35

Highlights:

• See ::before and ::after pseudo elements in the Page Inspector
• CSS source maps are now enabled by default
• "Show DOM Properties" from the Page Inspector

All devtools bugs fixed between Firefox 34 and Firefox 35.

Firefox 34

Highlights:

• Storage Inspector: a new tool enabling you to view data stored by web pages
• Performance tool: revamped Profiler UI and frame rate timeline
• Frame switching: point the developer tools at a specific iframe in the page
• console.table support
• jQuery events are visible in the Page Inspector

All devtools bugs fixed between Firefox 33 and Firefox 34.

Firefox 33

Highlights:

• WebIDE: a new environment for developing and debugging web apps
• You can edit animation @keyframes and timing functions
• Event listeners are now visible in the Inspector
• There's a sidebar listing @media rules in the Style Editor
• You can add new CSS rules and edit selectors in the Inspector
• There are three new developer toolbar commands: folder, highlight, and inject

More details:

• The Disable Cache setting now persists when the devtools are reopened
• transform visualization is now shown in the page, not a tooltip
• Preferences for the source editor are exposed in the Settings page
• The viewport size is directly editable in Responsive Design View
• The Debugger now automatically black boxes source files with a "min.js" extension

All devtools bugs fixed between Firefox 32 and Firefox 33.

Firefox 32

Highlights:

• Web Audio Editor
• Code completion and inline documentation in Scratchpad
• User agent styles in the Inspector's Rules view
• Element picker button has moved
• Node dimensions added to the Inspector's infobar
• Full page screenshot button added

More details:

• HiDPI images added to the tools
• Nodes that have display:none are shown differently in the Inspector

All devtools bugs fixed between Firefox 31 and Firefox 32.

Firefox 31

Highlights:

• Eyedropper tool to select colors in web pages
• full stack traces for console error messages
• editable Box Model View
• %c formatting to style console messages
• "copy as cURL" command in Network Monitor
• Sublime Text keybindings in the source editor

More details:

• Option to make Network Monitor logs persistent
• JavaScript warnings on by default in the Web Console
• Alt+click to expand all descendants of a node

All devtools bugs fixed between Firefox 30 and Firefox 31.

Firefox 30

Highlights:

• Box model highlighting in the Page Inspector
• Web Console support for executing JS in frames
• Web Console display improvements: code highlighting, node highlighting and inspection
• Network Monitor theme improvements, image thumbnails, image preview, HTML preview
• Browser Console input must now be enabled in Settings
• Icons for Scratchpad and other tools now hidden by default

More details:

• Support for console.count()
• New shortcut key to focus on web console command line
• Font family tooltip in the Inspector
• Firefox OS HUD features: memory tracking and jank monitor

All devtools bugs fixed between Firefox 29 and Firefox 30.

Firefox 29

Firefox 29 Hacks post. Highlights:

• Theme improvements, including major updates to the light theme
• Network Monitor performance analysis tool
• CSS source maps
• Changes in the way node selection works in the Inspector
• Classic call stack for the Debugger, and added the ability to highlight and inspect nodes
• Emacs and Vim keybindings in the source editor

Firefox 28

Firefox 28 Hacks post. Highlights:

• The App Manager has an integrated manifest editor
• The Split Console feature enables you to use the Web Console and another developer tool side by side
• Pretty-print minified JavaScript in the Debugger
• Color picker tooltip in the Inspector
• Browser Toolbox for debugging platform or add-on code

Firefox 27

Firefox 27 Hacks post. Highlights:

• The Shader Editor lets you view and edit WebGL shaders
• Instruct the debugger to break on DOM events to which you're listening
• Edit HTML in the Inspector
• See color swatches and background images in the Inspector's Rules view
• The Web Console now logs reflow events
• CodeMirror is now used as the source editor in many tools