Tiffany Brown article in which she delves into the browser-based developer tools for Chrome, Safari, Firefox, and Microsoft Edge. This article is very helpful for anybody on road to become a CSS master.
She then describes how to use element inspector. Most desktop browsers include an element inspector feature that you can use to troubleshoot your CSS. Start using this feature by right-clicking and selecting Inspect Element from the menu.
In Firefox, Chrome and Safari you can also press Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (macOS) to open the developer tools panel. While in Microsoft Edge, open developer tools by pressing the F12 key.
In Safari, you may have to enable the Develop menu first by going to Safari > Preferences… > Advanced and checking the box next to Show Develop menu in menu bar.
Sometimes an element isn’t styled as expected. Maybe a typographical change failed to take, or there’s less padding around a paragraph than you wanted. You can determine which rules are affecting an element by using the Styles panel of the Web Inspector.
You find more info in the article, including:
- the ways how to identify cascade and inheritance problems
- spotting invalid properties and values
- debugging responsive layouts
Very useful for anybody new to web development.
[Read More]