Share
Embed
Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
0 ) C o m m o n - s e n s e !
c o n c e p t s . !
Slide 3
Slide 3 text
there%is%[SIMPLY]%
no%such%thing%
as%a%
bug$free$
app%
Slide 4
Slide 4 text
learning%
is%a%%
››%process%‹‹%
((not$
%%
an%event%
Slide 5
Slide 5 text
without%
a%debugger%
is%like%
going%to%war.$
Slide 6
Slide 6 text
without%
a%debugger%
is%like%
going%to%war.$
Blindfolded.$
Slide 7
Slide 7 text
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 . !
Slide 8
Slide 8 text
Getting there:!
%
›%%CTRL%+%SHIFT%+%J%%%%(COMMAND%+%OPTION%+%J)%
%
›%%Right%Click%+%Inspect%Element%
%
›%%Hotdog%Menu%(%%%%%%)%›%Tools%›%Developer%Tools%
Slide 9
Slide 9 text
2) HTML !
Elements !
Hands-on. !
[ “ H T M L ” , “ e l e m e n t s ” ] !
%
Slide 10
Slide 10 text
[ “ H T M L ” , “ e l e m e n t s ” ] !
%
Slide 11
Slide 11 text
3) JS Console!
Hands-on. !
[ “ J S ” , “ c o n s o l e ” ] !
%
Slide 12
Slide 12 text
[ “ J S ” , “ c o n s o l e ” ] !
%
Slide 13
Slide 13 text
4) JS Sources!
Hands-on. !
[ “ J S ” , “ s o u r c e s ” ] !
%
Slide 14
Slide 14 text
[ “ J S ” , “ s o u r c e s ” ] !
%
Slide 15
Slide 15 text
!
› 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 ” ] !
%
Slide 16
Slide 16 text
[ “ E n d i n g ” , “ t h o u g h t s ” ] !
%