Troubleshooting with DevTools

921b21db0adbe6810cae63e616777d4a?s=47 thebeckyhamm
March 11, 2014

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

921b21db0adbe6810cae63e616777d4a?s=128

thebeckyhamm

March 11, 2014
Tweet

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