How to use firefox’s web developer tools

How to use firefox’s web developer toolsBy Rahul December 31, 2015 1 Min Read Updated: February 15, 2017

Firefox Developer Edition is also known as Firefox Aurora. Firefox Developer Edition is very useful for web developers. This edition of Firefox is available for most of operating systems like Windows, Linux, and MAC OS

1. Download Firefox Developer Edition

First, visit Mozilla Firefox official website and download latest developer edition of Mozilla.

2. Extract Archive File

Now extract downloaded firefox developer edition archive file on /opt or /usr/local directory. For example I have extracted all files under directory firefox_dev in /usr/local .

3. Create Desktop Menu

After copying all files at /usr/local/firefox_dev folder. Lets create file

/.local/share/applications/firefox_dev.desktop to create launcher on your system for Firefox developer edition. These enties may be changed as per your desktop edition.

4. Launch Firefox Developer

Finally launch your Firefox developer edition by clicking launcher icon or your can start it directly with binary script.

How to use firefox’s web developer tools

And you have successfully installed firefox developer edition on your system. Let’s enjoy development with developer version.

Firefox Developer Tools is a set of web developer tools built into Firefox. You can use them to examine, edit, and debug HTML, CSS, and JavaScript.

This section contains detailed guides to all of the tools as well as information on how to debug Firefox for Android, how to extend DevTools, and how to debug the browser as a whole.

If you have any feedback on DevTools or want to contribute to the project, you can join the DevTools community.

Note: If you are just getting started with web development and using developer tools, our learning 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 > Web Developer 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.

How to use firefox’s web developer tools

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. Visualize 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.

How to use firefox’s web developer tools

JavaScript Debugger

Stop, step through, and examine the JavaScript running on a page.

How to use firefox’s web developer tools

Network Monitor

See the network requests made when a page is loaded.

How to use firefox’s web developer tools

Performance Tools

Analyze your site’s general responsiveness, JavaScript, and layout performance.

How to use firefox’s web developer tools

Responsive Design Mode

See how your website or app will look and behave on different devices and network types.

How to use firefox’s web developer tools

Accessibility inspector

Provides a means to access the page’s accessibility tree, allowing you to check what’s missing or otherwise needs attention.

How to use firefox’s web developer tools

Application panel

Provides tools for inspecting and debugging modern web apps (also known as Progressive Web Apps). This includes inspection of service workers and web app manifests.

How to use firefox’s web developer tools

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.

For the latest developer tools and features, try Firefox Developer Edition.

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.

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.

Extending 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.

Firefox Developer Tools is a set of web developer tools built into Firefox. You can use them to examine, edit, and debug HTML, CSS, and JavaScript.

This section contains detailed guides to all of the tools as well as information on how to debug Firefox for Android, how to extend DevTools, and how to debug the browser as a whole.

If you have any feedback on DevTools or want to contribute to the project, you can join the DevTools community.

Note: If you are just getting started with web development and using developer tools, our learning 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 > Web Developer 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.

How to use firefox’s web developer tools

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. Visualize 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.

How to use firefox’s web developer tools

JavaScript Debugger

Stop, step through, and examine the JavaScript running on a page.

How to use firefox’s web developer tools

Network Monitor

See the network requests made when a page is loaded.

How to use firefox’s web developer tools

Performance Tools

Analyze your site’s general responsiveness, JavaScript, and layout performance.

How to use firefox’s web developer tools

Responsive Design Mode

See how your website or app will look and behave on different devices and network types.

How to use firefox’s web developer tools

Accessibility inspector

Provides a means to access the page’s accessibility tree, allowing you to check what’s missing or otherwise needs attention.

How to use firefox’s web developer tools

Application panel

Provides tools for inspecting and debugging modern web apps (also known as Progressive Web Apps). This includes inspection of service workers and web app manifests.

How to use firefox’s web developer tools

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.

For the latest developer tools and features, try Firefox Developer Edition.

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.

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.

Extending 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.

How to use firefox’s web developer tools

Fire up Firefox and visit any/your site. From Firefox’s hamburger menu (on the top right by default), choose “Web Developer -> Style Editor” or press the Shift + F7 combination on your keyboard. Firefox’s Web Developer panel will appear on one side of its window – usually at the bottom part.

How do I edit a website in Firefox?

Press the Page Hacker button (or hit Ctrl+F2) to edit the currently viewed page, as in a text editor. A floating toolbar appears to change the text format. It can be used to remove unnecessary content from a web page before printing it, make a hoax, or even use Firefox as a text editor by using it an a blank tab.

How do I edit HTML in Chrome dev tools?

By right-clicking on the HTML in the “Elements” tab and selecting “Edit as HTML,” you can make live edits to the markup of a webpage that Chrome will immediately render once you’re done editing. Telling DevTools that you are done editing can be tricky.

How do I use Firefox developer 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.

How do I edit developer tools?

Right-click the selected text and choose Inspect Element in the contextual menu. The developer tools will open in the lower half of your browser and the corresponding DOM element will be selected. Double-click the selected node and it will switch to edit mode.

How do you permanently edit a website?

Visit a web page that you want to make permanent changes on. Switch to the Sources panel in the Developer Tools. Click on the icon with the two arrows pointing to the left, and select Overrides from the menu. Select “setup overrides” and pick a local folder that you want to store the overrides in.

How do I edit my website?

Go to the page on your website you want to modify. Click on the ‘edit page’ symbol in the bottom right hand corner. If you can’t see it, refresh the page. (“CMD + R” on Mac or “CTRL + R” on PC).

How do I edit HTML in notepad?

  1. Step 1: Open Notepad (PC) Windows 8 or later: .
  2. Step 1: Open TextEdit (Mac) Open Finder > Applications > TextEdit. .
  3. Step 2: Write Some HTML. Write or copy the following HTML code into Notepad: .
  4. Step 3: Save the HTML Page. Save the file on your computer. .
  5. Step 4: View the HTML Page in Your Browser.

How do you change the background on Google Chrome?

Sign in to your Google Account in the top right corner of the Google homepage. Click Change background image at the bottom of the Google homepage. Once you’ve chosen your image, click Select at the bottom of the window. It may take a moment before your new Google homepage background appears.

Which browser has best developer tools?

Among developers, Firefox is probably the world’s most popular browser. On it’s own, Firefox is a pretty powerful browser. Deemed a lot faster than the average web browser, Firefox helps you to track down information and create stunning websites in a fraction of the time of something like Edge.

How do I debug developer tools?

  1. Step 1: Reproduce the bug.
  2. Step 2: Get familiar with the Sources panel UI.
  3. Step 3: Pause the code with a breakpoint.
  4. Step 4: Step through the code.
  5. Step 5: Set a line-of-code breakpoint.
  6. Step 6: Check variable values. Method 1: The Scope pane. Method 2: Watch Expressions. Method 3: The Console.
  7. Step 7: Apply a fix.
  8. Next steps.

What is the difference between Firefox and Firefox Developer Edition?

Developer Edition is 12 weeks ahead of the regular version of Firefox with adding support for the latest additions to web standards. You can use the lead time to test out new features, and update sites to take advantage of them in advance.

Chris Hoffman
How to use firefox’s web developer toolsChris Hoffman
Editor-in-Chief

Chris Hoffman is Editor-in-Chief of How-To Geek. He’s written about technology for over a decade and was a PCWorld columnist for two years. Chris has written for The New York Times, been interviewed as a technology expert on TV stations like Miami’s NBC 6, and had his work covered by news outlets like the BBC. Since 2011, Chris has written over 2,000 articles that have been read nearly one billion times—and that’s just here at How-To Geek. Read more.

How to use firefox’s web developer tools

Firefox 11 added two new web developer tools to Firefox’s already impressive arsenal. The Tilt feature visualizes website structures in 3D, while the Style Editor can edit CSS stylesheets on the fly.

The 3D feature, known as Tilt, is a way of visualizing a website’s DOM. It integrates with the existing Document Inspector and uses WebGL to display rich 3D graphics in your browser.

Tilt – 3D Website Visualization

You can access Tilt from within Firefox’s Page Inspector. To get started, open the Page Inspector by selecting “Inspect” from the Web Developer menu. You can also right-click in the current page and select “Inspect Element” to start the inspector at a specific element.

How to use firefox’s web developer tools

Click the “3D” button on the inspector toolbar.

How to use firefox’s web developer tools

You’ll see the page’s structure after activating 3D mode, but it will look flat until you rotate it.

How to use firefox’s web developer tools

Rotate the model by left-clicking, move the image around by right-clicking, and zoom in and out using the mouse wheel.How to use firefox’s web developer tools

This view is integrated with the other tools in the inspector. If you have the HTML or Style panels open, you can click an element on hte page to view that element’S HTML code or CSS properties.

How to use firefox’s web developer tools

More 3D Features

The 3D visualization feature was based off the Tilt extension, but it doesn’t have all the features of the Tilt extension. if you want to customize the colors or even export the visualization as a 3D model file for use with a 3D editing program, you’ll need to install the Tilt 3D add-on. Once you have, you’ll get a new “Tilt” option in the Web Developer menu.

How to use firefox’s web developer tools

Click the Cancel button to use the old version of Tilt when prompted.

How to use firefox’s web developer tools

You’ll find controls to customize the visualization at the left side of the window and other options, including the export feature, at the top of the page.

How to use firefox’s web developer tools

CSS Style Editor

To view and edit a page’s CSS style sheets, open the Style Editor from the Web Developer menu.

How to use firefox’s web developer tools

The Style editor lists the stylesheets on the current page. Toggle a stylesheet on or off by clicking the eye icon to the left of the stylesheet’s name. Edit a stylesheet by selecting it and modifying the code.

How to use firefox’s web developer tools

Changes are reflected on the page immediately. If you toggle a stylesheet off, the page will lose its style information. If you edit a stylesheet, you’ll see the edits appear on the page while you type.

How to use firefox’s web developer tools

You can save a copy of one of the stylesheets to your computer, import an existing stylesheet from your computer, or add a new, blank stylesheet with the Save, Import, or New links in the Style Editor window.

The 3D visualization feature watches for changes on the current page and notices when changes occur. When you use the Style Editor with the 3D inspector open, your changes will be reflected immediately in the 3D view. This also works with third-party extensions that modify web pages, such as Firebug.

  • › You Can Finally Move WhatsApp Chats From iPhone to Android
  • › How to Print Double-Sided on Windows 11
  • › Samsung Galaxy Phones Are Getting Grammarly Installed by Default
  • › How to Enable Cookies in Google Chrome
  • › How to Remove Extra Spaces in Your Google Sheets Data

How to use firefox’s web developer tools Chris Hoffman
Chris Hoffman is Editor-in-Chief of How-To Geek. He’s written about technology for over a decade and was a PCWorld columnist for two years. Chris has written for The New York Times, been interviewed as a technology expert on TV stations like Miami’s NBC 6, and had his work covered by news outlets like the BBC. Since 2011, Chris has written over 2,000 articles that have been read nearly one billion times—and that’s just here at How-To Geek.
Read Full Bio »

Mozilla Firefox’s Web Developer menu has tools for inspecting internet pages, running JavaScript code, and viewing HTTP requests and other relevant messages. In this tutorial you’ll learn about Firefox’s all-new Inspector tool and updated Scratchpad.

How to use firefox’s web developer tools

Mozilla Firefox’s new web developer features, combined with top of the line Firefox web developer addons like Firebug and Web Developer Toolbar, make Mozilla Firefox the ideal internet browser for web developers. All of these tools are available absolutely for free under Web Developer in Firefox’s menu.

Page Inspector

You can inspect a specific element’s code by right-clicking it and selecting Inspect (or by pressing Q on your keyboard). You can also launch the Inspector right from the Web Developer menu.

How to use firefox’s web developer tools

You will then see a toolbar at the bottom of the webpage, which you can then use to control the Inspector and check out all the elements on the page. Your selected element will be highlighted and other elements on the webpage will be dimmed out.

How to use firefox’s web developer tools

If you want to select a new element on the page, click the Inspect button on the toolbar, hover your mouse over the page and click you element. Mozilla Firefox will then highlight the element under your cursor as you maneuver it across the page.

How to use firefox’s web developer tools

You can also go back and forth between parent and child code elements by clicking the breadcrumbs on the Inspector toolbar.

HTML Inspector

Click on the HTML button to view the HTML code of your selected element.

How to use firefox’s web developer tools

The HTML Inspector will allow you to expand and collapse the HTML tags, making it easy to visualize your changes right on the page – very similar to WYSIWYG software like Adobe Dreamweaver.

If you want to see the webpage’s HTML in a flat file, you can also select View Page Source from the Web Developer Menu. (Remember to bring up the Web Developer Menu just use your cursor to right-click anywhere on the webpage).

How to use firefox’s web developer tools

CSS Inspector

Click on the Style button to see the CSS rules that are being applied to the selected element and there’s also a CSS Computed panel.

How to use firefox’s web developer tools

You can switch between Rules and Computed by clicking the Rules and Computed buttons. To help you find specific CSS properties, the computed panel includes a search box.

How to use firefox’s web developer tools

You can also edit the element’s CSS straight from the Rule panel. Uncheck any of the check boxes to temporarily deactivate the rule, click the text to change a rule, or add your own rules to the element at the top of the panel. Here, we’ve added the font-weight: bold CSS rule, making the element’s text bold.

How to use firefox’s web developer tools

JavaScript Scratchpad

The Scratchpad also saw an update with recent versions of Firefox, and it now contains syntax highlighting. You can type in JavaScript code to run on the current webpage.

How to use firefox’s web developer tools

As soon as you have, click the Execute menu and then select Run. The code runs in the current tab.

How to use firefox’s web developer tools

Web Console

The new Firefox Web Console replaced the old Error Console, which has been belittled by users and removed by Mozilla developers in the latest versions of Firefox.

How to use firefox’s web developer tools

The Web Console displays 4 different types of messages, which you can then toggle the visibility of – network request, CSS error messages, JavaScript error messages and web developer messages.

A web developer message is a notification printed to the window.console object. For example, you could run the window.console.log (“Hello World”); Javascript code in the Scratchpad to print a developer message to the console. Web developers can integrate these messages into their JavaScript code to help with debugging.

How to use firefox’s web developer tools

Refresh the webpage and you then see the generated network requests and other related messages.

How to use firefox’s web developer tools

Use the search box to filter the messages; click a request if you want to see more details.

How to use firefox’s web developer tools

With recent versions of Firefox, the Web Console can work in tandem with the Page Inspector. The $0 variable stands for the currently selected object in the Firefox Inspector. So, for example, if we wanted to hide the currently selected object, you could run $0.style.display=”none” in the console.

How to use firefox’s web developer tools

If you are interested in learning more about using the Web Console and its various built-in functions, check out the Web Console page on Mozilla’s Developer Network website.

How to use firefox’s web developer tools

Would your site look better if the logo was moved five pixels to the right or had a blue background? Would adding a border or shadows to the images in your featured posts make them pop more? Modern browsers like Firefox come with Web Developer Tools that allow you to inspect a site’s inner workings and make live edits, watching the results in real-time.

In this tutorial you’ll learn how to make use of Firefox’s Web Developer Tools to live-edit any site.

Note: This tutorial applies for most browsers, including Chrome, Opera and Safari.

Also read: Web Code Playground Tools You Should Try

Meet the Web Developer Tools

Firefox’s Web Developer Tools is a comprehensive set of tools, from displaying all DOM elements to being able to measure its speed. For this tutorial you only need the “Inspector” and “Style Editor” tools.

Fire up Firefox and visit any/your site. From Firefox’s hamburger menu (on the top right by default), choose “Web Developer -> Style Editor” or press the Shift + F7 combination on your keyboard.

How to use firefox’s web developer tools

Firefox’s Web Developer panel will appear on one side of its window – usually at the bottom part. You can change its position by clicking on the three-dots button on the top right of the panel and choosing “Dock to Right/Left” or “Separate Window.”

How to use firefox’s web developer tools

Note: This tutorial is not showing you how to code HTML and CSS. You can learn the basics here.

Inspecting the element

To be able to affect how an element looks, you have to be able to identify it. Click on the very first button on its toolbar or press Ctrl + Shift + C on your keyboard to enable the element-picker mode.

How to use firefox’s web developer tools

Move your mouse around the site to see different elements of the webpage highlighted. Next to them you will see their primary identifier hovering in a pop-up.

When you click on an element, it will be selected in the Inspector tab of the Developer Tools.

How to use firefox’s web developer tools

When you find the element you wish to tweak, right-click on its entry in the Developer Tools Inspector and select from the pop-up window that appears – “Copy -> CSS Selector.”

How to use firefox’s web developer tools

Also read: 5 of the Best Firefox Quantum Add-ons for Web Developers

Start Your Live Edit

With your element’s CSS Selector copied to the clipboard, move back to the Style Editor tab in the Developer Tools window. Click on the “+” button on the top left to “Create and append a new stylesheet to the document.”

How to use firefox’s web developer tools

Paste your CSS Selector inside the new, blank stylesheet. Add a space, followed by a set of opening and closing curly brackets.

How to use firefox’s web developer tools

In CSS, an element’s looks is defined by first “targeting it” using an identifier like that CSS Selector, then adding some rules that affect its appearance, grouped inside curly brackets. Everything placed between the opening and closing curly brackets affects the “targeted element.”

For example, if you add the rule below:

This will hide from view the element where it is used. It is probably the easiest way to know that you’re targeting the correct element on your page. If it disappears, it was, indeed, the one you want, and you can delete this rule to try out others. If it didn’t disappear, it’s time to go back to the Inspector and select something different.

How to use firefox’s web developer tools

We won’t be showing you how to code CSS here, but you can play around with some of the popular rules like:

You will notice that the site’s element changes as you add rules to the CSS stylesheet.

As a closing note, remember that nothing is saved. If you like how your tweaks look, copy your code somewhere – in a TXT file or your favorite note-taking application – so that you or a designer/developer will be able to add it to your sites’s stylesheet to make the changes permanent. If you need to learn about CSS, check out some online games to help you master the skill.

OK’s real life started at around 10, when he got his first computer – a Commodore 128. Since then, he’s been melting keycaps by typing 24/7, trying to spread The Word Of Tech to anyone interested enough to listen. Or, rather, read.

The Browser Console is like the Web Console, but applied to the whole browser rather than a single content tab.

So it logs the same sorts of information as the Web Console – network requests, JavaScript, CSS, and security errors and warnings, and messages explicitly logged by JavaScript code. However, rather than logging this information for a single content tab, it logs information for all content tabs, for add-ons, and for the browser’s own code.

If you also want to use the other web developer tools in the regular Web Toolbox with add-on or browser code, consider using the Browser Toolbox.

Similarly, you can execute JavaScript expressions using the Browser Console. But while the Web Console executes code in the page window scope, the Browser Console executes them in the scope of the browser’s chrome window. This means you can interact with all the browser’s tabs using the gBrowser global, and even with the XUL used to specify the browser’s user interface.

NB: The Browser Console command line (to execute JavaScript expressions) is disabled by default. To enable it set the devtools.chrome.enabled preference to true in about:config, or set the “Enable browser chrome and add-on debugging toolboxes” (Firefox 40 and later) option in the developer tool settings.

Opening the Browser Console

You can open the Browser Console in one of two ways:

  1. from the menu: select “Browser Console” from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on macOS).
  2. from the keyboard: press Ctrl + Shift + J (or Cmd + Shift + J on a Mac).

You can also start the Browser Console by launching Firefox from the command line and passing the -jsconsole argument:

The Browser Console looks like this:

How to use firefox’s web developer tools

You can see that the Browser Console looks and behaves very much like the Web Console:

  • most of the window is occupied by a pane that display messages.
  • at the top, a toolbar enables you to filter the messages that appear.
  • at the bottom, a command line interpreter enables you to evaluate JavaScript expressions.

Beginning with Firefox 68, the Browser Console allows you to show or hide messages from the content process (i.e. the messages from scripts in all the opened pages) by setting or clearing the checkbox labeled Show Content Messages. The following image shows the browser console focused on the same page as above after clicking on the Show Content Messages checkbox.

How to use firefox’s web developer tools

Browser Console logging

The Browser console logs the same sorts of messages as the Web Console:

However, it displays such messages from:

  • web content hosted by all browser tabs
  • the browser’s own code
  • add-ons

Messages from add-ons

The Browser Console displays messages logged by all Firefox add-ons.

Console.jsm

To use the console API from a traditional or bootstrapped add-on, get it from the Console module.

One exported symbol from Console.jsm is console . Below is an example of how to access it, which adds a message to the Browser Console.

HUDService

There is also the HUDService which allows access to the Browse Console. The module is available at Mozilla DXR. We see we can not only access the Browser Console but also Web Console.

Here is an example on how to clear the contents of the Browser console:

If you would like to access the content document of the Browser Console this can be done with the HUDService. This example here makes it so that when you mouse over the “Clear” button it will clear the Browser Console:

Bonus Features Available

For Add-on SDK add-ons, the console API is available automatically. Here’s an example add-on that just logs an error when the user clicks a widget:

If you build this as an XPI file, then open the Browser Console, then open the XPI file in Firefox and install it, you’ll see a widget labeled “Error!” in the Add-on bar:

How to use firefox’s web developer toolsClick the icon. You’ll see output like this in the Browser Console:

How to use firefox’s web developer tools

For Add-on SDK-based add-ons only, the message is prefixed with the name of the add-on (“log-error”), making it easy to find all messages from this add-on using the “Filter output” search box. By default, only error messages are logged to the console, although you can change this in the browser’s preferences.

Browser Console command line

The Browser Console command line is disabled by default. To enable it set the devtools.chrome.enabled preference to true in about:config , or set the “Enable chrome debugging” option in the developer tool settings.

Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:How to use firefox’s web developer toolsAlso like the Web Console’s command line interpreter, this command line supports autocomplete, history, and various keyboard shortcuts and helper commands. If the result of a command is an object, you can click on the object to see its details.

But while the Web Console executes code in the scope of the content window it’s attached to, the browser console executes code in the scope of the chrome window of the browser. You can confirm this by evaluating window :

How to use firefox’s web developer tools

This means you can control the browser: opening, closing tabs and windows and changing the content that they host, and modify the browser’s UI by creating, changing and removing XUL elements.

Controlling the browser

The command line interpreter gets access to the tabbrowser object, through the gBrowser global, and that enables you to control the browser through the command line. Try running this code in the Browser Console’s command line (remember that to send multiple lines to the Browser Console, use Shift + Enter ):

It adds a listener to the currently selected tab’s load event that will eat the new page, then loads a new page.

Note: You can restart the browser with the command Ctrl + Alt + R (Windows, Linux) or Cmd + Alt + R (Mac) This command restarts the browser with the same tabs open as before the restart.

Modifying the browser UI

Since the global window object is the browser’s chrome window, you can also modify the browser’s user interface. On Windows, the following code will add a new item to the browser’s main menu:

How to use firefox’s web developer toolsOn macOS, this similar code will add a new item to the Tools menu:

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

How to use firefox’s web developer tools

I cannot open web developer tools

  • 1 reply
  • 1 has this problem
  • 671 views
  • Last reply by cor-el

I can’t open the web developer tools tab in the firefox menu and the text is in bold

Chosen solution

Does this happen with all tools in that menu?

Start Firefox in Safe Mode to check if one of the extensions (Firefox/Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Firefox/Tools > Add-ons > Appearance).

  • Do NOT click the Reset button on the Safe Mode start window or otherwise make changes.

All Replies (1)

  • Top 10 Contributor
  • Moderator

Chosen Solution

Does this happen with all tools in that menu?

Start Firefox in Safe Mode to check if one of the extensions (Firefox/Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Firefox/Tools > Add-ons > Appearance).

Web developers looking for site performance issues should be using this tool in the Firefox web developers toolkit.

How to use firefox’s web developer tools

Firefox is a great web browser for users. It’s also one of the best browsers for developers. Why? Because the open source app includes a number of tools specifically designed for developers. These tools include the Page Inspector (used to examine and modify the HTML and CSS of a page), the Web Console (which logs information associated with a web page), and the JavaScript Debugger.

Another tool found within the Web Developer menu is the Performance tool, which gives you insight into your site’s responsiveness, JavaScript, and layout performance. This tool also allows you to create a recording or profile of a site over time. Once you stop the recording, you’ll be presented with an overview of everything that happened to render the site in the browser.

From that overview you will gain some much-needed insight to help improve the performance of the website you’ve developed.

Performance comes with four sub-tools that will be of use:

  1. Waterfall: Shows different operations the browser performs as you use the site being tested.
  2. The Call Tree: Displays JavaScript functions.
  3. The Flame Chart: Shows the JavaScript call stack.
  4. The Allocations view: Shows heap allocations made by your code.

What you’ll need

An updated version of Firefox

A website to test

I’ll be demonstrating on the Nightly version of Firefox on Pop!_OS Linux. The platform you use doesn’t matter, so long as you have a version of the web browser that includes the Performance tool.

How to start the Firefox Performance tool

The first thing you must do is start the Performance tool. To do this, open Firefox and click on the menu button in the upper right corner. Click Web Developer | Performance. This will open a new pane at the bottom of the browser window (Figure A).

Figure A

The Performance tool is open and ready to record.

Next, browse to the site in question and then click the Start Recording Performance button. Once the recording has started, take action within the site you are testing. The Performance tool will then start collecting data (Figure B).

Figure B

The Performance buffer has already reached capacity.

The Performance buffer will fill up very quickly. Once it has filled up, it’ll begin overwriting earlier data, so you should be certain if you want to keep the first data recorded, to watch the buffer percentage and stop the recording before it reaches 100%.

Once Performance has stopped recording, it’ll display what it discovered. You can then scroll through every record and select an object, which will open the details in a right pane (Figure C).

Figure C

How to use firefox’s web developer tools

The details of a Function Call.

You will see a link within the details (in the instance above, the link is osd.js:1). Click that link to open the Debugger, which will display the code associated with the object you’ve selected (Figure D).

Figure D

How to use firefox’s web developer tools

The Firefox Debugger showing code associated with osd.js:1.

You can then go back to the Performance tab to continue combing through every record in your recorded profile. Click on the Call Tree (Figure E) or the Flame Chart to get even more insight into the performance of your code.

Figure E

How to use firefox’s web developer tools

The Call Tree view in action.

If you want to save this profile, click Save in the left sidebar. This will download the profile as a JSON file to your local drive. You can view a saved profile by clicking the Import button (icon directly right of the clock) in the left sidebar. Open the saved JSON file and you can scour through a previously recorded profile.

The Firefox Performance tool is one every web developer should be using to help troubleshoot why a site isn’t performing up to your standards. It’s easy to use, free, and offers more than enough information for your debugging needs.

How to use firefox’s web developer tools

Open Source Weekly Newsletter

You don’t want to miss our tips, tutorials, and commentary on the Linux OS and open source applications. Delivered Tuesdays