You can now split the Rules view out into its own pane, separate from the other tabs on the CSS pane. See Page inspector 3-pane mode for more details.
- In the CSS Pane rules view (see Examine and edit CSS), the keyboard shortcuts for precise value increments (increase/decrease by 0.1) have changed from Alt + Up/Down to Ctrl + Up/Down on Linux and Windows, to avoid clashes with default OS-level shortcuts (see bug 1413314).
- Also in the CSS Pane rules view, CSS variable names will now auto-complete (bug 1422635). If you enter
var(into a property value and then type a dash (
-), any variables you have declared in your CSS will then appear in an autocomplete list.
- In Responsive Design Mode, a Reload when... dropdown has been added to allow users to enable/disable automatic page reloads when touch simulation is toggled, or simulated user agent is changed. See Controlling page reload behavior for more details (bug 1428816).
view_source.tabpreference has been removed so you can no longer toggle View Source mode between appearing in a new tab or new window. Page sources will always appear in new tabs from now on (bug 1418403).
- The Network Monitor Response tab now shows a preview of the rendered HTML — if the response is HTML (bug 1353319).
- Cookie information shown in the Storage Inspector (see Cookies) now includes a sameSite column showing what the same-site status of each cookie is (bug 1298370).
- The Rulers tool now includes a readout showing the current dimensions of the viewport (bug 1402633).
- In Responsive Design Mode, you can now set the screen dimensions using the cursor keys (bug 1421663). See the Setting screen size section for more details.
- The Raw headers display in the Network Monitor Headers tab now includes the response's status code (bug 1419401).
- The Shape Path Editor has been enabled by default for shapes generated via
- The Network Monitor now has a button to pause/play recording of network traffic (bug 1005755).
- In the Network Monitor the "Flash" filter button is no longer available, and Flash requests are included in the "Others" filter (bug 1413540).
- The code for the old Responsive Design Mode (enabled by default pre-Firefox 52) has now been removed from the Devtools (bug 1305777). See Responsive Design Mode for information on the new tools.
- The option to view MDN docs from the CSS pane of the page inspector has been removed (bug 1382171) (was disabled since 55, bug 1352801).
- Display Negative Line Numbers in CSS Grid Inspector (bug 1369942).
- The new CSS Grid Layout Panel is now available, allowing much better CSS Grid debugging facilities (bug 1181227). See Powerful New Additions to the CSS Grid Inspector in Firefox Nightly for more details.
- Added filtering of network requests by column values and other properties (bug 1041895, bug 1354508, bug 1354507) and by using regular expressions (bug 1354495).
- Made it possible to show and hide columns within the Network Monitor (bug 862855).
- Added remote IP (bug 1344523), protocol (bug 1345489), scheme (bug 1356867), cookies and set cookies columns (bug 1356869) to Network Monitor.
SourceMapHTTP header is now supported (prior versions supported the deprecated
X-SourceMapheader, see bug 1346936).
- See React event listeners in the Inspector.
- Copy screenshots to the clipboard.
- JSON Viewer is enabled in Firefox Beta and Release versions.
- Completely revamped Responsive Design Mode, including UA selection and network throttling.
- The Animation Inspector now displays timing functions.
- The Page Inspector now includes a CSS grid highlighter.
- about:debugging now shows service worker state.
- The Page Inspector includes an easy way to highlight the selected element.
- The Page Inspector displays whitespace-only text nodes.
- The Web Console now understands source maps.
- The Storage Inspector now lets you delete items from IndexedDB object stores.
- The Memory tool is enabled by default.
- The Box model view is moved into the Computed view.
- The Web Console now displays stack traces for XHR or Fetch() network requests.
- The Animation Inspector now shows performance information.
- The Inspector's context menu has been reorganized.
- The Network Monitor now shows the cause of each network request.
- The Storage Inspector lets you delete IndexedDB databases.
- about:debugging now has a new Tabs page, to debug any open tab.
- 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
- 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
- Dominators view in the Memory tool
- Allocations view in the Performance tool
- One click to apply
@mediarule conditions in the Style Editor
- 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
- Memory tool
- Animation inspector improvements
- New Waterfall markers: DomContentLoaded, load, worker messages
- 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
- Debugging Firefox for Android over Wifi
- Firefox OS Simulator configuration in WebIDE
- CSS filter presets
- 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.
- 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
- 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
- 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
- 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
- Security panel in the Network Monitor
- Animations panel in the Page Inspector
- Support for running a custom build step in WebIDE
- 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
- 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
- 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
- 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
- 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
- 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
- HiDPI images added to the tools
- Nodes that have
display:noneare shown differently in the Inspector
- 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
- Option to make Network Monitor logs persistent
- Alt+click to expand all descendants of a node
- 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
- 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
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 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
- Color picker tooltip in the Inspector
- Browser Toolbox for debugging platform or add-on code
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