Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

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



March 11, 2014

More Decks by thebeckyhamm

Other Decks in Design


  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