JavaScript Debugging with Chrome DevTools [Part 1]

A brief introduction in Chrome Developer Tools.

Transcript

2. 0 ) C o m m o n - s e n s e ! c o n c e p t s . !
3. there%is%[SIMPLY]% no%such%thing% as%a% bug$free$ app%
4. learning% is%a%% ››%process%‹‹% ((not$ %% an%event%
5. without% a%debugger% is%like% going%to%war.$
6. without% a%debugger% is%like% going%to%war.$ Blindfolded.$
7. 1 ) C h r o m e D e v T o o l s. ! B a s i c U s a g e . !
8. Getting there:! % ›%%CTRL%+%SHIFT%+%J%%%%(COMMAND%+%OPTION%+%J)% % ›%%Right%Click%+%Inspect%Element% % ›%%Hotdog%Menu%(%%%%%%)%›%Tools%›%Developer%Tools%
9. 2) HTML ! Elements ! Hands-on. ! [ “ H T M L ” , “ e l e m e n t s ” ] ! %
10. [ “ H T M L ” , “ e l e m e n t s ” ] ! %
11. 3) JS Console! Hands-on. ! [ “ J S ” , “ c o n s o l e ” ] ! %
12. [ “ J S ” , “ c o n s o l e ” ] ! %
13. 4) JS Sources! Hands-on. ! [ “ J S ” , “ s o u r c e s ” ] ! %
14. [ “ J S ” , “ s o u r c e s ” ] ! %
15. ! › Google: “[error keywords] js”! (Stack Overflow, forums etc.)! › https://developers.google.com/chrome-developer-tools/! › http://discover-devtools.codeschool.com/! › http://jsfiddle.net/! ! [ “ E n d i n g ” , “ t h o u g h t s ” ] ! %
16. [ “ E n d i n g ” , “ t h o u g h t s ” ] ! %