Interested in learning Vue.js? Get my free ebook at vuehandbook.com I am a fan of the Browser Dev , the secret power weapon 🚀 for all us Web Developers. Tools 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 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. Firefox 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 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. .cls 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 in the console to reference it. $0 Selectors API shortcuts One totally cool feature of the Firefox Dev Tools Console is the shortcuts for the Selectors API: is a shortcut for $() document.querySelector() is a shortcut for $$() document.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 . It will be assigned to a temporary variable. Use in Console 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 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: font-family Inspect CSS Grid is a recent new and amazing CSS feature. CSS Grid Firefox Dev Tools have a great inspector that helps us so much when using grids: If you use , you can display them using the “Display area names” checkbox: grid template areas Interested in learning Vue.js? Get my free ebook at vuehandbook.com
