Features of Firefox Developer Tools

|
| By Webner

Overview and Features of Firefox Developer Tools

Like most of the browsers, Firefox also provides certain developer tools that help the developer to examine, explore, and debug websites and web apps.
Firefox Developer Tools

Opening Developer Tools:

There are three ways to open Developer tools on firefox browser – shortcut , menu bar and context menu.

Shortcut –
Ctrl + Shift + I, F12
Menu Bar –
Go to Menu -> Developer -> Toggle Tools, or Tools
Context menu –
Right click on an element and Click on ‘Inspect Element’ in the menu that will appear. It will open developer tools and will directly take the control to source code of that specific element on which the mouse was right clicked.

There are various developer tools available :
Inspector
Console
Debugger
Style Editor
Performance
Memory
Network
Storage

INSPECTOR

The Inspector tool helps to inspect a particular element in the page. When we right click on a particular element on the page and inspect it, then it opens up this Inspector tool of the browser which shows full html of the page and focus is on code of that particular element on which we have right clicked. This is very useful as we can directly edit the particular element’s html to play with it and see live results, like we can try to apply custom css rules etc on that element

Firefox Developer Tools

CONSOLE
Console tool provides information about the Javascript , CSS , logs, errors or warnings on that page. We can also execute our javascript code in the context of the page and can see its effect on our page instantly.
Firefox Developer Tools

Here, in this screenshot we are executing javascript to alert something. We can execute javascript to access the variables or elements of the page, run expressions etc. Also, we can see errors or warnings that occurred on the page. If the page has some logs (using console.log statement in the code), then we can see those logs also here.

DEBUGGER
Debugger helps to track down bugs by allowing to create breakpoints in the page code. We can create as many breakpoints as we want and then reload the page. On reloading, page halts when it reaches a breakpoint and we can view the value or state of the variables or elements around where we created the breakpoint. We have step In, step out, Play, step over buttons on this tool that helps to go step by step on the page to figure out reason of the issue we are facing.

Firefox Developer Tools

STYLE EDITOR
The style Editor tool helps to work with the style of the page. It shows the stylesheets used on that page and also provides a link to save the stylesheet to our system.
On selecting particular stylesheet its content gets displayed to the right side in edit mode and we can add our own css to that stylesheet and can check its effect on the page.

Firefox Developer Tools

PERFORMANCE
Performance tool helps to get the information about the performance of the page which includes responsiveness, javascript and layout performances. We can record the performance of the page for a time period by using its button ‘Start Recording Performance’. It has three tabs :

Waterfall – This shows the different operations that browser does for the page like garbage collection, javascript execution etc.

Call Tree – Provides information about the time spent on all the functions in the JS files of the page.

Flame chart – keeps track of the javascript call stack.

Allocations – provides information about the heap allocation on the page over the period of time it is recorded.
Firefox Developer Tools

MEMORY
The Memory tool helps to get memory usage information of the different objects on the page. It provides a number of views that show the memory heap storage of objects in different ways like in tree map, aggregate and dominators.
It also helps to take snapshots, compare various snapshots of the page memory heap and also allows to import the snapshots.

Firefox Developer Tools

NETWORK
Network tool provides information about all the network requests that browser made while loading the page. It provides information like name of the files which were loaded, their type, size, domain, how much time it took to load, if it was loaded successfully or not.
Firefox Developer Tools

STORAGE
Storage tool keeps track of all the storage on that page like cookies, local storage, session storage, cache etc.
It stores the information in key value pairs.
Firefox Developer Tools

In this above screenshot, CabinetId, cabinetPage etc are the variables which are saved in local storage on the page.

Leave a Reply

Your email address will not be published. Required fields are marked *