![\"CSS](\"/b874d25602de8b85fb5d72d8944e9c9c/css-class-search.gif\")
It’s been a while since one of the X can do that posts I’ve been publishing. Furthermore, Firefox Developer tools is just getting better and better everyday, so I thought it’s about time I write one for it.
\nSo, are you ready? 😎
\n\nYou 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.
\nThere are many useful features in the page inspector (equivalent to Chrome DevTools inspect element), but there are a few which I use the most:
\nYou can use the search box right below the inspector tab to search for elements, classes and other selectors. But I mostly use it to search for elements with a specific class. This is very useful if you have multiple elements which visually look similar but have specific class, or if you can’t see it because it is hidden.
\n
In the section below, there is box for filtering styles which can be used to easily spot a particular style you might be looking for. The good thing is, it highlights the selectors and expands properties which lets you easily spot what you’re looking for.
\n![\"Search](\"/f5a3d6740361ac6d084301c7db987782/style-filter.gif\")
One of my favourites is this little nugget of gold. With this you can easily Shift + click and see all different types of colour representation including name, hex, rgb, and hsl. Of course not all colours have names, you in some cases you only see the other ones.
![\"Colour](\"/519a544dca2564e2c5891ef89f254bbd/colourrep.gif\")
Cool hah?
\nWho doesn’t love the console in the browsers’s developer tools. It’s used for logging, calculation, evaluation and much more.
\nYou can get fancy with the messages in the console by applying CSS styles to them. This becomes important when you have heaps of logs and want to highlight a specific part by a different style for example.
\n![\"Adding](\"/c98852ac8be49189f2a44d6f1ac3bb27/console-style.gif\")
Note that you already have console.info, console.warn and console.error at your disposal. So this will be a level above what you can get with those.
![\"console](\"/96fb71566bd9667b5a1ae0a9705c97da/console-msg.jpg\")
This one is helpful if you have typed many commands and want to search between those commands. Simply type all or part of the command you’re looking for and it shows you all that matches that phrase.
\nPress F9 on windows or CTRL + R to open the search box. Then type your term and if the count on the right hand side shows you have results, you can move between those by pressing the F9 and SHIFT + F9 on windows. For Mac users, navigate between those using CTRL + R and CTRL + S.
\n![\"search](\"/8efaad5bf616d8af11a6d08a4756be07/console-search.gif\")
PS: I am just using arrow keys because F9 is mapped to pause and play on my recording software and I am just too lazy to change that 😁.
\nTo get a screen shot of the whole page, view port, or just an element, all you need to do is type :screenshot and pass the parameter you like. Combinations are:
:screenshot //the visible part of the page\r\n:screenshot --fullpage // whole page even invisible parts\r\n:screenshot --selector .css-selector // only one element (including its children)![\"taking](\"/98703d3a1343cc27253858545f50356e/screenshot.gif\")
Find out more about other parameters you can pass to it in the documentation.
\nAnd of course you can take the screenshots using photo icon on the left side of the console in the above picture too.
\nApart from the above two sections, like any other developer tools, is the debugger section where you could look into source code to see why something is happening the way it shouldn’t or just simply test out something.
\nTo prettify a minified file, click this icon: {} in the source pane. The debugger will format the source and display it as a new file with a name like: ”{ } [original-name]“.
![\"Pretty](\"/612c8fa42b081fefac862d958bae7769/pretty-print.gif\")
To search for a specific file, simply press CTRL + P (or CMD + P on a Mac). The display panel shows a list of files matching the search term as you type which you can choose. Just press Enter to open the file.
\n![\"Searching](\"/d896579b21ae48757fc069fe487aadcf/search-file.gif\")
Sometimes you need to figure out what happens when you visit/send a request to a particular URL. Once set and the URL is hit, the execution will stop so you can see the state of the application at that point.
\nJust click on the + in the XHR breakpoint section or if you want to enable it for all URLs, just tick the ‘Pause on any URL’ checkbox.
\n![\"URL](\"/4bfcdd2487eb43d6146affb30b178147/urlbreakpoint.gif\")
The performance tool is where I usually spending most of my time in. As you might know, I’ve been actively working on web performance and also have a series of posts on some important aspects of it.
\nHowever for the purpose of keeping this post short (pardon the pun 😁), I will only point to two of the ones I regularly use. You can find out more about the rest in the official docs.
\nBefore you get to see these tabs, you should record a page’s load by pressing the ⏱ icon. Once it’s done, you will see the waterfall tab by default. Along the X axis is time.
As you can see, all sorts of the stuff which browser has done such as running JavaScript, updating layout, garbage collection, and so on is shown in the view. You can find out how your application is performing on load and what type of things take the most time to finish easily in this view.
\nThe good thing is that each category is coloured differently so you can spot them easily in each category.
\nFor a full reference of what each colour represents, refer to the markers table on the docs.
\nYou can see a call tree of all the functions which has been called from top to bottom in this view. The main purpose of this view is to show you which function has taken the most time executing. By analysing these calls, you can find bottlenecks in your code.
\nYou can see in the result table that each row represents one function and the order is highest to lowest by the number of samples which has been taken while the function was executing. From docos:
\n\n\nTotal Time is that number translated into milliseconds, based on the total amount of time covered by the selected portion of the recording. These numbers should roughly be the same as the number of samples.
\n
\nTotal Cost is that number as a percentage of the total number of samples in the selected portion of the recording.
\nSelf Time is calculated as the time spent in that particular function, excluding its children. This comes from the captured stacks where this function is the leafmost function.
\nSelf Cost is calculated from Self Time as a percentage of the total number of samples in the selected portion of the recording.
There are heaps of other stuff which is outside of scope of a single post. But I want to point out a few of the other useful things you can do with Firefox Developer Tools.
\nThe Accessibility Inspector allows you to access important information exposed to assistive technologies on the current page via the accessibility tree, which lets you to check what’s missing or needs improvements.
\nYou can click on the icon and the layout will be toggled in the page for you to see the grid with lines separating each cell:
\n![\"Toggle](\"/550baee639c0fb6c3f4c624642b9f338/gridview.gif\")
By default line numbers and area names are hidden. But you can check the two checkbox on the right to enable these.
\n