Menu
Examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile.
If you are looking for information on using the web developer tools available in Firefox, you've come to the right place — this page provides links to detailed information on all of the core tools and additional tools, and further information such as how to connect to and debug Firefox for Android, how to extend the devtools, and how to debug the browser as a whole.
In this Article:Firefox for Windows Firefox for Mac Installing Add-ons Firefox for Android Community Q&A. Firefox is a popular web browser that can be downloaded for free. If you want to download Firefox in another language, or for a different operating system, click the Systems & Language link. Install Firebug for Firefox. Firebug is a web inspector add-on for Firefox. Click the Firefox Menu button (☰) and select 'Add-ons.' Click 'Get Add-ons' and then click the 'Get more add-ons!' Search for 'Firebug' and then click the 'Add to Firefox' button next to it.
Please explore the links found in the sidebar, and further down the page. If you have any feedback or questions about the devtools, send us messages on our mailing list or IRC channel (see the community links near the bottom of the page). If you have any feedback or questions specifically about the documentation, the MDN discourse is a good place to post.
Note: If you are just getting started with web development and using developer tools, our learning web development docs will help you — see Getting started with the Web and What are browser developer tools? for good starting points.
The Core Tools
You can open the Firefox Developer Tools from the menu by selecting Tools > Web Developer > Toggle Tools or use the keyboard shortcut Ctrl + Shift + I or F12 on Windows and Linux, or Cmd + Opt + I on macOS.
The ellipsis menu on the right-hand side of Developer Tools, contains several commands that let you perform actions or change tool settings.
This button only appears when there are multiple iframes on a page. Click it to display a list of the iframes on the current page and select the one with which you want to work. |
Click this button to take a screenshot of the current page. (Note: This feature is not turned on by default and must be enabled in settings before the icon will appear.) |
Toggles Responsive Design Mode. |
Opens the menu that includes docking options, the ability to show or hide the split console, and Developer Tools settings. The menu also includes links to the documentation for Firefox Web Tools and the Mozilla Community. |
Closes the Developer Tools |
Page Inspector
View and edit page content and layout. Visualise many aspects of the page including the box model, animations, and grid layouts.
Web Console
See messages logged by a web page and interact with the page using JavaScript.
JavaScript Debugger
Stop, step through, examine, and modify the JavaScript running in a page.
Network Monitor
See the network requests made when a page is loaded.
Performance Tools
Analyze your site's general responsiveness, JavaScript, and layout performance.
Responsive Design Mode
See how your website or app will look and behave on different devices and network types.
Accessibility inspector
Provides a means to access the page's accessibility tree, allowing you to check what's missing or otherwise needs attention.
Note: The collective term for the UI inside which the DevTools all live is the Toolbox.
More Tools
These developer tools are also built into Firefox. Unlike the 'Core Tools' above, you might not use them every day.
- Memory
- Figure out which objects are keeping memory in use.
- Storage Inspector
- Inspect cookies, local storage, indexedDB, and session storage present in a page.
- DOM Property Viewer
- Inspect the page's DOM properties, functions, etc.
- Eyedropper
- Select a color from the page.
- Scratchpad
- A text editor built into Firefox that lets you write and execute JavaScript.
- Style Editor
- View and edit CSS styles for the current page.
- Taking screenshots
- Take a screenshot of the entire page or of a single element.
- Measure a portion of the page
- Measure a specific area of a web page.
- Rulers
- Overlay horizontal and vertical rulers on a web page
For the latest developer tools and features, try Firefox Developer Edition.
![Install Firebug For Firefox In Mac Install Firebug For Firefox In Mac](https://www.octoparse.com/media/1837/2.png)
Connecting the Developer Tools
If you open the developer tools using keyboard shortcuts or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.
- about:debugging
- Debug add-ons, content tabs, and workers running in the browser.
- Connecting to Firefox for Android
- Connect the developer tools to an instance of Firefox running on an Android device.
- Connecting to iframes
- Connect the developer tools to a specific iframe in the current page.
- Connecting to other browsers
- Connect the developer tools to Chrome on Android and Safari on iOS.
Debugging the browser
By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.
- Browser Console
- See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.
- Browser Toolbox
- Attach the Developer Tools to the browser itself.
Extending the devtools
For information on extending the Firefox DevTools, see Extending the developer tools over in the Browser Extensions section of MDN.
Migrating from Firebug
Firebug has come to the end of its lifespan (see Firebug lives on in Firefox DevTools for details of why), and we appreciate that some people will find migrating to another less familiar set of DevTools to be challenging. To ease a transition from Firebug to the Firefox developer tools, we have written a handy guide — Migrating from Firebug.
Contribute
If you want to help improve the developer tools, these resources will get you started.
- Get Involved
- Our developer documentation explains how to get involved.
- bugs.firefox-dev.tools
- A tool helping to find bugs to work on.
Firefox continues to impress reviewers and experts, who point out the browsers' efficiency, attention to detail, and impressive privacy options. That said, Firefox, just like every other browser, can experience a range of issues, from slow browsing all the way to regular crashes and everything in between.
Today we want to highlight the most common Firefox problems and provide you with simple fixes that anyone can use to get Firefox back to its best.
Firefox Slow & Freezes
A fox should not be slow, and fire should not freeze. So when Firefox is lagging and hanging, frustration sets in pretty quickly. Force quit is the go-to move, but that is a temporary relief that won’t solve an underlying Firefox issue.
Before we get to some specific solutions, make sure you’ve followed these basic principles:
Close unnecessary tabs and windows – Because each one, even if not being used, will take up system resources and slow your Mac down. Bookmark what you don’t need to come back to later.
Update Firefox – Updates contain bug fixes and performance improvements.
Recognize your Mac is getting old – Have you had your Mac for several years? Is everything slow, not just Firefox? Sometimes you have to acknowledge when age has caught up with it.
Now it’s time to go over some specific solutions to help Firefox problems on Mac. These will help even if your Mac is an old-timer.
Clean up Firefox (and your macOS)
If Firefox keeps freezing or is just generally sluggish, it could be the result of a browser that has too much history, cache, and other “temporary” files clinging to the ankles of your once mighty Fox. Luckily, getting rid of this extra burden is simple. Even if it doesn’t completely fix your browser speed, it will still be great for your system.
To manually clear your search history, Firefox caches and other unneeded browser files:
- Navigate to History > Clear Recent History
- Click on Details to reveal the full list
- Check what you want to remove
- Make sure “Time range” is set to Everything
- Click Clear Now
Another way to speed up Firefox along and your macOS, in general, is to use CleanMyMac X. In a couple of quick clicks the app will find and, with your approval, remove unneeded system files from all over your macOS - including your Firefox cache and browser history.
To clean up Firefox caches, and other browser junk the easy way:
- Download CleanMyMac X for free and run it
- Select System Junk tab
- Click Scan
- Click Clean
Firefox Crashing
Foxes are elegant and agile creatures, which is to say that when there is an obstacle, they should evade it smoothly, not crash into the thing.
When Firefox doesn’t load or crashes, this makes us incredibly sad. Thankfully, we have some solutions to get Firefox back on its feet.
Identify problematic Firefox add-ons
In a terrible murder mystery, the cliché is that “the butler did it.” Well, when Firefox is crashing regularly, it’s tempting to say “the add-on did it.”
Plugins and extensions add so much to our browser experience, but they are also a common cause of problems. To start with, make sure each extension and plugin is up-to-date. Firefox even has an official plugin checker.
If everything checks out but Firefox keeps crashing, we recommend running it in Safe Mode. This will load Firefox without any add-ons.
To start Firefox in Safe Mode:
- Click the Firefox menu button
- Click Help
- Select Restart with Add-ons Disabled
You can also launch Firefox while holding the Shift key to start in Safe Mode.
If the crashes go away in Firefox Safe Mode, then you know the butler add-on did it.
So we know that an add-on is causing the crashes, now what?
You should disable all your ad-ons and turn them back on one at a time. This way you can methodically find the guilty add-on.
To manage your Firefox add-ons follow these steps:
- Click the Firefox menu button
- Select Add-ons > Extensions or Appearance
- Disable or enable as you like
- Restart Firefox
Firefox crashes on startup
Uh-oh. Firefox won’t even start?
Don’t worry; it may seem like “the worst thing that could have ever happened to anyone” but the solution is often easier than you’d expect. Begin by holding the Shift key when launching Firefox to start in Safe Mode.
If this works then chances are you have a dodgy extension. Follow the steps from Identify problematic Firefox add-ons.
However, if Safe Mode isn’t working either, you’re going to have to uninstall and reinstall Firefox.
To manually reinstall Firefox:
- Make sure the application is closed
- Drag the application to your Trash
- Empty your Trash
- Download the latest version of Firefox for Mac
- Install Firefox
This will repair Firefox will keeping your profile including bookmarks and settings.
An easier and safer option is to use CleanMyMac’s Uninstaller to repair Firefox with a reset:
- Launch CleanMyMac and click on Uninstaller
- Click on Mozilla Firefox
- Click on a small arrow next to Firefox icon
- Click Application Reset
Firefox not loading pages
You had one job, Firefox!
When web pages don’t open, it’s more than a little annoying, considering that’s the main task of a browser. But let’s not jump to conclusions, maybe Firefox isn’t to blame.
The first step is to open a new tab and try other sites. If they aren’t loading either, the second step would be to try another browser like Safari and see if the web pages load there.
If they do then the problem is with Firefox.
Let’s Firefix it!
Proxy problems
If you’re using a proxy server to browse the web, it could be the problem that’s stopping Firefox from loading pages. It’s easy to check, simply follow these steps:
- Click on the Firefox menu
- Navigate to Options > Advanced > Network
- Click on Settings under Connection
- Select No Proxy
- Close options and reload web pages
Clear cookies and cache
In Clean up Firefox (and your MacOS) we covered how to clear your cache and once again it could be the solution to your Firefox problem. Also, this time we suggest also cleaning Cookies, whether using the manual methods or the easier CleanMyMac methods.
Firefox setup tips
We wanted to share a few tips to help you get even more out of your Firefox experience.
Keep your privacy intact
If you go to Preferences > Privacy > History you can use “Custom settings for history” from the dropdown. Now you can personally decide exactly what Firefox remembers.
Ask for permission
We’ve talked a lot about the problems with add-ons. A great tip is to navigate to Tools > Add-ons and from the dropdown next to each add-on, select “ask to activate”. Some people won’t like the extra step; others will love knowing exactly what their add-ons are up to.
Monitor Mozilla
If your Firefox performance is important, you could try turning on Enable Firefox Health Report by going to Option > Advanced > Data Choices. Now when you click Learn More you will see an overview of your browser’s stability and performance.
Find Text
All browsers have an option to find text on a web page but Firefox has a setting (Options > Advanced> Search for text when I start typing) that allows you to immediately type and find matching text.
Firefox Firefixed!
There you have it. Your Firefox should now be jumping, skipping, spinning…okay, I honestly have no idea what foxes do. But I do know that by using the manual solutions and quick fixes from CleanMyMac X, your Firefox browser should be stable and performing better than ever.
To keep it that way, bookmark this page for reference and be sure to follow best practices like clearing cache, closing unneeded tabs, and checking for updates.
Do all this, and your fox will remain on fire for a long time to come.