Troubleshooting with DevTools

How to troubleshoot / debug your work using DevTools. Aimed at beginners and focuses on HTML and CSS.

http://cssspecificity.com
DevTools Tutorial: http://discover-devtools.codeschool.com/
DevTools Documentation: https://developers.google.com/chrome-developer-tools/
Sublime Text 2 Tutorial: http://code.tutsplus.com/articles/perfect-workflow-in-sublime-text-free-course--net-27293

Transcript

1. Troubleshooting Your Work
2. 1. Save your work Windows: ctrl + s Mac: cmd + s
3. 2. Refresh the page Windows: ctrl + r Mac: cmd + r
4. 3. Open DevTools Chrome: Menu > Tools > Developer Tools Firefox: Tools > Web Developer > Inspector Windows shortcut: ctrl + shift + i Mac shortcut: cmd + option + i right click > Inspect Element
5. 4. Find the element that isn’t doing what it should be doing.
6. Is it there? Check for missing closing tags
7. Is the style crossed out? It has been overridden by other style cssspecificity.com
8. Is the style crossed out with a warning sign? The syntax or spelling is wrong
9. Still can’t find the problem? 1) Refresh a couple of times. 2) Clear your cache. In Chrome, go to DevTools > Gear Icon > “Disable Cache (when DevTools is open)”
10. 5. Start Googling stackoverflow.com css-tricks.com developer.mozilla.org
11. 6. Take a break Preferably outside.
12. 7. Phone a friend / ask an instructor / cry
13. 8. Start over tomorrow (Welcome to web development!)
14. Additional Links DevTools Tutorial DevTools Documentation Sublime Text 2 Tutorial