CSS Debugging

Last Updated: April 23, 2022

Understanding how to debug CSS is important because sometimes CSS does not give the results as you expect.

For example:

  • Selectors dosnot match the element as you expect
  • Layout is not working as you expect
  • Sizing of the elements is not working as you expect

To get rid of the above issue you can debug the CSS using DevTools of the browser.

How to open Browser’s Dev Tool

To open DevTool in your browser, right-click and select “Inspect element” from the menu.

Following shortcuts can be used to open DevTool

  • Chrome: ⌥ + ⌘ + I on a Mac, and Ctrl + Shift + I on Windows
  • Firefox: ⌥ + ⌘ + C on a Mac, and Ctrl + Shift + I on Windows
  • Safari: ⌥+⌘+I
  • Edge: ⌥ + ⌘ + I on a Mac, and Ctrl + Shift + I on Windows
devtool

Common bugs with Block Elements

Test