Debugging CSS

Overview

• What problem is DevTools solving?
  • I'm expecting my CSS to do one thing, and the browser is doing something completely different
• Usually DevTools can help you find the problem faster than just staring at your code

Inspect Element

• Right-click > Inspect

Probably the best way to open DevTools if you mainly use it to debug CSS.

Detour: Docking

1. Open the Command Menu
   • Control+Shift+P
   • Command+Shift+P (Mac)
2. Run the Dock To Bottom, Dock To Right, or Undock Into Separate Window command

The Styles pane

1. Select element in the DOM Tree to view its CSS in the Styles pane
2. Filter as needed

Shows all CSS declarations for the selected element. Useful for debugging the cascade order.

The Computed pane

• Elements panel > Computed tab
• Click a declaration to see its cascade

Don't need to see the cascade? Try the Computed tab.

Navigating the DOM Tree

• Right-click > Inspect
• Inspect Mode
  • View commonly-needed information about elements like color, font, and contrast.
• DOM Tree Search
  1. Focus the DOM Tree
  2. Control+F or Command+F (Mac)
  3. Search by string, CSS selector, or XPath.
     • Strings
     • CSS selectors
     • XPath queries
• Console > inspect(element)
  • inspect(document.querySelector('input'))

Since you might inspect thousands of elements over your career, it's worth trying out the different workflows and finding out which one is best for you.

Detailed Tooltip in Inspect Mode

• Click Inspect Mode button
• Control+Shift+C or Command+Shift+C (Mac)

Introduced in January 2019 (Chrome 73).

Animations

• Command Menu > Animations tab
  • Set speed to 25% or 10%
  • Drag background to add delays
  • Drag circles to adjust keyframes
  • Click an element to select it in DOM Tree
• Command Menu > Rendering tab
  • Paint Flashing
  • High-Performance Animations

Photo credit: http://www.oocities.org/televisioncity/studio/3371/pictures.html