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

JavaScript Debugging with Chrome DevTools [Part 1]

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Cassian LUP Cassian LUP
July 31, 2013
Programming
200
2

JavaScript Debugging with Chrome DevTools [Part 1]

A brief introduction in Chrome Developer Tools.

Avatar for Cassian LUP

Cassian LUP

July 31, 2013

More Decks by Cassian LUP

See All by Cassian LUP
Warping Time with Async/Await
Avatar for Cassian LUP cassilup
5
130
Docker for WebDevs
Avatar for Cassian LUP cassilup
0
110
TypeScript: The Good Cop
Avatar for Cassian LUP cassilup
0
220
NodeConf London 2016 Summary
Avatar for Cassian LUP cassilup
0
61
Working with the DOM and Living to Tell
Avatar for Cassian LUP cassilup
0
83
How To Hack (Together) An Environment
Avatar for Cassian LUP cassilup
0
120
Appium • Mobile Automation Made Awesome (Part II)
Avatar for Cassian LUP cassilup
0
100
Appium • Mobile Automation Made Awesome (Part I)
Avatar for Cassian LUP cassilup
0
140
Introduction into PhoneGap
Avatar for Cassian LUP cassilup
0
93

Other Decks in Programming

See All in Programming
tsc.rip を支える技術 / Kyoto.なんか #8
Avatar for Susisu susisu
0
160
自動化したのに回らない テスト運用の壁 ―AI時代の品質責任と生産性
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
440
「人を評価する AI」の 設計と実装 
Avatar for 奈良亮耶 ryoyanara
0
230
バグを直したら useEffect が消えた
Avatar for taki colorful12
3
700
私のClaude Code活用法 （個人開発編） - PHPerKaigi mini #4（2026/08/24）
Avatar for panda_program panda_program
1
150
今さら聞けない .NET CLI
Avatar for tkym htkym
0
210
初めての模倣学習とVLA
Avatar for Minoru Natsutani natsutan
0
210
My Marp Sample
Avatar for Shota Inoue sinoue0108
0
110
為什麼你並不需要ViewModel / No, you don't need a ViewModel
Avatar for Elvis Shi lovee
1
510
Claude CodeとAgentCore Gatewayを繋ぐ際の認証認可 / Authentication and authorization when connecting Claude Code with AgentCore Gateway
Avatar for Har1101 har1101
2
370
Jindong: Introducing Declarative Haptics in Compose Multiplatform
Avatar for HyunWoo Lee l2hyunwoo
0
130
レビュー履歴をAIに食わせて、 Compose移行を加速するs
Avatar for Yuki Shiho shihochan
0
200

Featured

See All Featured
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
550
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.5k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.1k
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
660
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
550
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
470
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
740
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
340
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
19k

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