About all the DevTools in Firefox

There are many tools and features in Firefox DevTools, lets us understand them one by one.

Core Tools

• Inspector: This tool is used to view the HTML code and various styles used in the webpage. It also provides options to edit or use certain features related to the structure and styles, such as eyedroppers, fonts, animations, box models, etc.

• Console: All messages, logs, and errors of a webpage are displayed in the console tab. Developers can also enter their own JS code to perform certain tasks. We can also turn on Custom Formatters in Settings to customize the way objects are displayed.

• Debugger: Provide the debugging facilities that a traditional IDE provides. The tools allow you to add a breakpoint to stop the execution at a particular point in the webpage JS code and provide buttons to pause, step over, step in, and step out with respect to the code execution.

• Network: This tool is used to view various network requests made when a page is loaded. The various resources downloaded by the browser, such as HTML, CSS, or JS libraries, can be viewed in this tool.

• Style Editor: The tool is used to view and edit all the stylesheets on a webpage, which helps the developers customize the CSS to check it in the browser itself. We can also create new stylesheets or import them and apply them to the page.

• Performance: The tool is used to check the webpage performance by capturing the site for CPU usage, network requests, events, etc. and providing graphs and tables so that the developers can easily get the performance information.

• Memory: The tool lets you display the heap memory of the current webpage with respect to the JS that is being run. It takes snapshots of the current heap memory and provides the necessary views.

• Storage: The tool displays all the possible types of storage used by the site, which are cache storage, cookies, indexed databases, local storage, and session storage. Developers can view and get an idea of what storage the browser is using, which helps them debug for any kind of potential issue.

• Accessibility: The tool provides a tree of all accessibility items, such as buttons, links, and alternative text used in the webpage. It’s also used to mark issues and simulate various color vision deficiencies.

• Application: The tools are basically used for PWA (progressive web apps) for inspecting and debugging service workers and web app manifests, which can improve the webpage to feel more like PWA.

• DOM: The tool provides a tree view to view the DOM of the current page. It provides information about various properties and functions of window object or iframe used in the webpage.

Additional Features

The DevTools is also equipped with some great feature other than the core tools. These are:

• Pick a Element: This option is used to select a specific element in the webpage to be analyzed using the inspector tool. This is a very handy tool which saves time to search a specific element in hundreds of line of html code.

• Select an iframe: Provide a drop-down list of various iframe used in the webpage when one of the iframe is selected the DevTools targets that particular iframe document. This allows the developers to focus on a particular iframe and view information or debug that iframe.

• Screenshot: This option captures the screenshot of the whole webpage and save it in the download location. Useful if developers want to view or keed record of the site changes for future use or to share the screenshot with other teams members.

• Rulers: This option adds horizontal and vertical rulers to the webpage. Useful to get accurate length (in pixels) of the webpage or its elements.

• Measure a portion of the page: This option is used to measure the width, height and diagonal length in a rectangular area in the webpage. Useful to get the idea of actual dimension of elements of the webpage.

• Responsive Design Mode: This option is used to check the webpage in various device width and height to check for responsive. You also have options to rotate the device and turn on touch simulation.

• Customizing Developer Tools and Get Help: The three dots provide menu of various options, which is to dock the DevTools in the right, left, bottom or in a separate window. You also get option to show split console which helps by providing access to console tool during working with other tool without continuously accessing to console tab. At the end of the menu you get documentation and community links.

Enable missing tools and features

Some of options may be disable by default to enable them first select the top-right three dots and the click Settings from the menu that appears. In the setting menu check what ever option you wan to enable.

Firefox provides a suite of tools for developers to use on their site. This tool lets developers edit styles, check for performance, check for responsiveness, check for the webpage’s use of storage, and much more. These tools are in-built into the Firefox browser and provide easy access and a simple UI for developers to understand and use. This set of tools is accessed in a sub-window called Developer Tools, or DevTools.