CSS and style

Whirlwind intro: CSS???

• Cascading style sheets
• Separation of style and content
• Reusable, central styling

Debugging CSS

• Inspect: How do I find what's causing this? CTRL-SHIFT-c
• Inheritance: Whoa, this is confusing
• Computed details: Exact box model info

Editing CSS

• Easy filtering
• Realtime changes
• Increment/decrement with alt/shift
• GREEN
• Forcing element state for :hover, etc.
  • Pin in Styles tab
  • Right click element

DOM manipulation

aka "creating your own content"

Whirlwind intro: DOM???

• Document Object Model
• The content the CSS is applied to
• Breadcrumbs
• Searching for DOM nodes with CSS selectors

Speling error

• One
• Two
• Four
• Three (drag and drop?)

Javascript debugging

Ways to investigate what's happening with scripts

• debugger;
• Manual breakpoints
• Event listener breakpoints
• Minified code and pretty print button {}
• Search all sources: CTRL-SHIFT-F

Now we're in the parking garage

Below the bedrock

The cave where Mark Twain and Albert Einstein (both still not actually dead) hang out and plan their capers

Going down

But seriously...

how does that WORK???

Earth's molten inner core

Other Javascript trickery

It probably does that thing you wanted.

General handy stuff

• Persistent console across page loads
• Watch expressions
• Inline values
• Blackboxing

Deeper console wizardry

• console.log
• console.timestamp
• console.dir
  example: console.log(document) vs. console.dir(document)
• Access selected element in console: $0
• XPath access: $x("//li")

Other Junk

• Network
  • Copy as curl
• Timeline
• Accessibility and performance audits
• Profiler
• Device mode
• Emulate touch device, swiping, etc.
• Auto-disable all cache while DevTools is open