TOOLS

Chrome Developer Tools

• elements
• console
• sources
• network

Fiddler / Charles

Postman / curl / JsonView

IE?

dev.windows.com/en-us/microsoft-edge/tools/vms/

+ your VM platform of choice

Techniques

Read the error message (if there is one).

Believe it!

Breakpoints + console.debug(...)

XHR / AJAX

Use the network tab

1. Did the request go out the door?
2. Did you get a 200 response?
3. Did the the response look how you expected?

For more complicated scenarios:

Treat it like science

1. Come up with a hypothesis.
2. Imagine ways to test it: If that were true, I should not see the error if I do ...
3. Test it

Debugging CSS

1. Was the file loaded (does the rule exist in the browser)? [network tab]
2. Is the selector right? [elements tab, console]
3. is it specific enough (is it being overidden)? [elements/styles tab]

4. 								
   outline: solid 2px red !important
   								
   							

When you are stuck

Remember it's not magic, it is comprehensible.

Google & Stackoverflow

Slack

Hands-on