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.
Opening Developer Tools:
There are three ways to open Developer tools on firefox browser – shortcut , menu bar and context menu.
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 :
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
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.
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.
Call Tree – Provides information about the time spent on all the functions in the JS files of the page.
Allocations – provides information about the heap allocation on the page over the period of time it is recorded.
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.
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.
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.
In this above screenshot, CabinetId, cabinetPage etc are the variables which are saved in local storage on the page.