Member-only story
5 Browser Dev Tools Tips To Ace Your Web Development Skills
Level up your browser coding skills
Browser dev tools have become essential to doing our job as web programmers. Over the years, vendors have been adding more and more tools to make our development work easier. Each browser has its own quirks and features, but most of them share common ground. Unfortunately for us, Blink-based browsers are the most feature-packed though, and the rest have some ground to cover.
How well do you know the browser dev tools? Are you investing some time in getting familiar with the new features? In this article, I will expose the five most useful and unknown dev tools’ features to make your daily development much easier and more efficient.
Before starting, find below the full list of keyboard shortcut documentation reference per vendor:
1. Find the Source of a CSS Property
Works in Brave/Chrome/Edge/Firefox/Safari
CSS is based on a Cascade algorithm. That can make it difficult to spot where a property is inherited from.
“The cascade is an algorithm that defines how to combine property values originating from different sources. It lies at the core of CSS, as emphasized by the name: Cascading Style Sheets. This article explains what the cascade is, the order in which CSS declarations cascade, and how this affects you, the web developer.”— MDN
Luckily it is easy using browser tools. All you need to do is follow some steps:
- Select the element you want to inspect.
- Select the Computed tab.
- Navigate to the property you want to know its source location.
- Click on the arrow to navigate to the CSS Class.
- Hold command-click or ctrl-click to navigate to the CSS source declaration of the property.
- To better view the file, press the bottom {} button, which will pretty-print the file, making it easier to read.
