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

Troubleshooting with DevTools

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

thebeckyhamm

March 11, 2014
Tweet

More Decks by thebeckyhamm

Other Decks in Design

Transcript

  1. 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. 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)”