Interested in learning Vue.js? Get my free ebook at vuehandbook.com
I am a fan of the Browser Dev Tools, the secret power weapon š for all us Web Developers.
Without them, weād look at a web page in despair, trying to figure out why elements donāt align, an image is not loaded š¤¦ā, and weād be clueless at other much more complex scenarios.
I recently switched to using Firefox for my daily browsing, and I realized that I knew very little about the Firefox Dev Tools. Also, I realized how much they have improved over the last few years, and I thoughtāāāthey deserve a lot more buzz š! So here is a post that shows some of the things you can do with them, with some nice GIFs to make it easier to have a quick grasp at each topic.
Screenshot tricks
Take a screenshot of the wholeĀ page
Enable the screenshot button in the settings, and press it to create an image that contains the page screenshot. It will be saved in the default downloads folder, using the current page width.
Take a screenshot of a singleĀ node
Select an element in the Elements Inspector and right click it, then choose Screenshot Node:
Remove a class from anĀ element
Sometimes an element has multiple classes and you canāt immediately find out which class introduces a particular styling attribute. By selecting an element and clicking theĀ .cls button at the top-right of the Rules panel, you can see a list of all the classes and you can easily disable/re-enable them.
From there, you can also add a new class to that element:
Drag-and-drop in the ElementsĀ panel
In the Elements panel, you can drag and drop any HTML element and change its position across the page
Reference the currently selected element in theĀ Console
Select a node in the Elements panel, and type $0 in the console to reference it.
Selectors API shortcuts
One totally cool feature of the Firefox Dev Tools Console is the shortcuts for the Selectors API:
$()is a shortcut fordocument.querySelector()$$()is a shortcut fordocument.querySelectorAll()
Use the value of the last operation in theĀ Console
Use $_ to reference the return value of the previous operation executed in the Console
Reference any element from the Inspector, in theĀ Console
Right click any element and select Use in Console. It will be assigned to a temporary variable.
Debugging JavaScript
You can set breakpoints on your JavaScript source files from the Debugger panel, and you can set any expression in the JS file to be watched:
Reloading the page, the breakpoints and watch expression settings are kept intact, and the script will halt at the desired position:
Find out which font is actuallyĀ used
font-family in CSS allows you to set a list of fonts to use, in case the first one is not found it falls back to the second and so on. But how do you know which font is actually applied when you look at the page? Itās the one underlined:
Inspect CSSĀ Grid
CSS Grid is a recent new and amazing CSS feature.
Firefox Dev Tools have a great inspector that helps us so much when using grids:
If you use grid template areas, you can display them using the āDisplay area namesā checkbox:
Interested in learning Vue.js? Get my free ebook at vuehandbook.com