Inspector
Inspect and edit HTML and CSS, work with the box model, and visualize CSS Grid, Flexbox, fonts, transforms and animations.
Firefox Developer Tools & Web Platform Documentation
Debug HTML, CSS and JavaScript with Firefox DevTools, inspect network and storage behavior, test responsive layouts, profile performance and memory, then use MDN to verify Web APIs, Baseline status and browser compatibility.
Get Firefox Developer EditionFirefox Developer Edition is a pre-release browser channel for developers. Firefox DevTools are the debugging tools; MDN is the broader Web platform reference.
Firefox Developer Edition
A pre-release Firefox channel tuned for web development
Developer Edition includes the latest Firefox developer tools from the Beta channel, including features such as the Multi-line Console Editor and WebSocket Inspector.
It uses a separate profile and installation path, so you can run it alongside Firefox Release or Beta for testing.
Developer-oriented defaults include browser and remote debugging, a dark theme and the DevTools toolbar button.
Inspect. Debug. Measure. Test.
Firefox DevTools for day-to-day web debugging
Web Console
Run JavaScript, inspect logged values, and surface CSS, security and runtime messages while you debug the current page.
JavaScript Debugger
Set breakpoints, step through JavaScript, inspect scopes and variables, and debug modern front-end application code.
Network Monitor
Inspect Fetch, XHR, documents, scripts, images, WebSockets and other requests, including headers, timing, caching and payloads.
Storage Inspector
Inspect cookies, Cache Storage, IndexedDB, localStorage and sessionStorage used by the current page and its frames.
Responsive Design Mode
Test layouts across simulated screen sizes, pixel densities, touch settings, user agents and approximate network conditions.
CSS & visual tools
Debug inactive CSS and use layout visualizations to understand why Grid, Flexbox, spacing or animation rules behave differently than expected.
Performance
Record page activity to investigate rendering, scripting and responsiveness bottlenecks in real application workflows.
Memory
Analyze memory allocation and investigate leaks or unexpectedly retained objects in long-running web applications.
Style Editor
View, edit, create and manage stylesheets directly in Firefox while testing CSS changes in the browser.
Use Firefox DevTools by debugging workflow
Start from the problem you are trying to solve: layout, API requests, JavaScript behavior, or responsive rendering.
Debug HTML, CSS, Grid and Flexbox
Use the Inspector to edit DOM and CSS live, inspect the box model, and visualize Grid and Flexbox when layouts do not behave as expected.
Inspect Fetch, XHR and API traffic
Use the Network Monitor to inspect requests, status codes, headers, payloads, caching, timing, WebSockets and server-sent events.
Debug JavaScript and runtime performance
Use breakpoints and scope inspection in the Debugger, then profile runtime work with Performance and Memory tools when code becomes slow or unstable.
Test responsive layouts and device behavior
Use Responsive Design Mode to emulate viewport size, device pixel ratio, touch behavior, user agents and approximate network conditions.
Use MDN for Web APIs, Baseline and browser compatibility
Firefox DevTools help you debug what is happening in the browser. MDN helps you understand the Web platform itself, including HTML, CSS, JavaScript, Web APIs, specifications, Baseline status and cross-browser support.
HTML, CSS and JavaScript references
Look up syntax, platform behavior, examples and implementation notes for the core technologies used in front-end development.
Web APIs and permissions
Check browser APIs for storage, networking, media, workers, security, navigation and other platform capabilities before you ship.
Baseline and browser compatibility
Use Baseline and MDN browser compatibility data to see whether a feature is widely available, newly available or still limited across major browsers.
Official references: MDN Web Docs ยท Firefox DevTools User Docs
Web platform examples to inspect in DevTools
Use small standards-based examples to test layout, page lifecycle, native semantics and network behavior, then verify compatibility on MDN before relying on a feature in production.
CSS
Inspect a container query and responsive component layout
.card-grid {
container-type: inline-size;
}
@container (min-width: 720px) {
.card-item {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
}JavaScript
Observe page visibility before scheduling deferred work
document.addEventListener('visibilitychange', () => {
if (document.hidden) return;
requestIdleCallback(() => {
loadDeferredWidgets();
});
});Accessibility
Prefer native button semantics for interactive controls
<button
type="button"
aria-expanded="false"
aria-controls="faq-panel">
View details
</button>Network
Inspect a Fetch request and handle HTTP failures
async function loadProfile() {
const response = await fetch('/api/profile');
if (!response.ok) throw new Error('Request failed');
return response.json();
}Firefox DevTools and MDN FAQ
Answers to common searches about opening Firefox DevTools, debugging CSS and JavaScript, inspecting API requests, using Developer Edition and understanding what MDN covers.
How do I open Firefox Developer Tools?+
Open the Firefox menu and choose More tools > Web Developer Tools, or use the keyboard shortcut F12 / Ctrl+Shift+I on Windows and Linux. On macOS, Command+Option+I opens the Toolbox. You can also open individual tools such as the Web Console or Responsive Design Mode with their own shortcuts.
How do I debug CSS Grid, Flexbox and layout issues in Firefox?+
Open the Inspector and select the element you want to debug. Firefox DevTools can show the box model, computed styles and layout visualizations for Grid and Flexbox. It also flags some inactive CSS declarations, which can help explain why a property is not affecting the page.
How do I debug JavaScript with breakpoints in Firefox?+
Use the JavaScript Debugger to open source files, set breakpoints, pause execution, step through code and inspect variables and scopes. The Web Console is useful alongside it for evaluating expressions and checking runtime messages.
How do I inspect Fetch, XHR and API requests in Firefox?+
Open the Network Monitor before reproducing the request. It records network traffic while the DevTools Toolbox is open and lets you inspect request and response headers, status codes, timing, payloads, caching, Fetch/XHR traffic, WebSockets and other network activity.
What is the difference between Firefox Developer Edition and regular Firefox?+
Firefox Developer Edition is a pre-release Firefox channel designed for web development. It ships developer-focused defaults and the latest DevTools from the Beta channel, and it uses a separate profile and installation path so it can run alongside Firefox Release or Beta. Regular Firefox also includes Firefox DevTools.
Is MDN only documentation for Firefox?+
No. MDN documents the Web platform across browsers, including HTML, CSS, JavaScript and Web APIs. Its browser compatibility data and Baseline information cover major browsers such as Firefox, Chrome, Edge and Safari, so it should not be treated as Firefox-only documentation.
Debug with Firefox DevTools, verify support with MDN
Use DevTools to inspect the page in front of you, then use MDN and browser compatibility data to decide whether the Web platform feature is ready for your production audience.