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. 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
  2. 7.
  3. 8.
  4. 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)”