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

JavaScript Debugging with Chrome DevTools [Part 1]

Avatar for Cassian LUP Cassian LUP
July 31, 2013
Programming
2
160

JavaScript Debugging with Chrome DevTools [Part 1]

A brief introduction in Chrome Developer Tools.

Avatar for Cassian LUP

Cassian LUP

July 31, 2013
Tweet

More Decks by Cassian LUP

See All by Cassian LUP
Warping Time with Async/Await
Avatar for Cassian LUP cassilup
5
94
Docker for WebDevs
Avatar for Cassian LUP cassilup
0
85
TypeScript: The Good Cop
Avatar for Cassian LUP cassilup
0
170
NodeConf London 2016 Summary
Avatar for Cassian LUP cassilup
0
29
Working with the DOM and Living to Tell
Avatar for Cassian LUP cassilup
0
50
How To Hack (Together) An Environment
Avatar for Cassian LUP cassilup
0
85
Appium • Mobile Automation Made Awesome (Part II)
Avatar for Cassian LUP cassilup
0
76
Appium • Mobile Automation Made Awesome (Part I)
Avatar for Cassian LUP cassilup
0
110
Introduction into PhoneGap
Avatar for Cassian LUP cassilup
0
70

Other Decks in Programming

See All in Programming
詳解！defer panic recover のしくみ / Understanding defer, panic, and recover
Avatar for convto convto
0
230
@Environment(\.keyPath)那么好我不允许你们不知道！ / atEnvironment keyPath is so good and you should know it!
Avatar for Elvis Shi lovee
0
110
請來的 AI Agent 同事們在寫程式時，怎麼用 pytest 去除各種幻想與盲點
Avatar for Keith Yang keitheis
0
110
複雑なドメインに挑む.pdf
Avatar for Yuki Sakai yukisakai1225
5
1.1k
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
Avatar for Jonghyuk Max Kim mmmaxkim
0
1.6k
デザイナーが Androidエンジニアに 挑戦してみた
Avatar for Kanon Fujita 874wokiite
0
280
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
Avatar for Iury Souza iurysza
0
140
RDoc meets YARD
Avatar for Masafumi Okura okuramasafumi
4
170
MCPでVibe Working。そして、結局はContext Eng（略）/ Working with Vibe on MCP And Context Eng
Avatar for r-kagaya rkaga
5
2.2k
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
Avatar for azukiazusa azukiazusa1
22
11k
開発チーム・開発組織の設計改善スキルの向上
Avatar for 増田 亨 masuda220
PRO
19
11k
プロポーザル駆動学習 / Proposal-Driven Learning
Avatar for mackey0225 mackey0225
2
1.2k

Featured

See All Featured
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
The Language of Interfaces
Avatar for Des Traynor destraynor
161
25k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
1
29
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.1k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
330
21k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k

Transcript

  1. None

  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 ” ] ! %