DevTools.md

🖥 🛠 Dev Tools 🖥 🛠

1. What are Dev Tools and why should we use them? ❓❓❓

• our window into what is going on behind the scenes of a web application (We'll be using Chrome's tools, but other browsers have as well)
• how we troubleshoot
• can examine or "borrow" styles or code from other websites

2. Dom Manipulation (“Elements” Tab) ✏️️✏️️✏️️️️

• selecting elements
• changing content of elements
• moving elements
• adding/changing attributes
• removing elements
• Questions:
  • Do these changes affect the actual content of our code?
  • If not, why do we bother to change elements in the browser instead of our code base / IDE?

7 MINUTE "YOU DO" EXERCISE: http://discover-devtools.codeschool.com/chapters/1/challenges/2

3. Updating Syles 🎨 🎨 🎨

• Styles Tab (element.style vs changing style by selector)
• Toggling Styles
• Changing Styles
• Adding styles
• Element state

🏋 POWER USER:

Computed Styles. (Why use?)

7 MINUTE "YOU DO" EXERCISE: http://discover-devtools.codeschool.com/chapters/1/challenges/8

4. Javascript Console 🔦 🔦 🔦

• Clear / Preserve Log
• Full Javascript environment (can console.log, do operations, etc)
• Debugging

7 MINUTE "WE DO" EXERCISE: http://discover-devtools.codeschool.com/chapters/3/challenges/8

5. BONUS ⏱📱Other Amazing Features in Dev Tools

• Network
• Timeline
• Device View (Must refresh page to work)