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
2
170

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
100
Docker for WebDevs
Avatar for Cassian LUP cassilup
0
88
TypeScript: The Good Cop
Avatar for Cassian LUP cassilup
0
180
NodeConf London 2016 Summary
Avatar for Cassian LUP cassilup
0
32
Working with the DOM and Living to Tell
Avatar for Cassian LUP cassilup
0
60
How To Hack (Together) An Environment
Avatar for Cassian LUP cassilup
0
93
Appium • Mobile Automation Made Awesome (Part II)
Avatar for Cassian LUP cassilup
0
86
Appium • Mobile Automation Made Awesome (Part I)
Avatar for Cassian LUP cassilup
0
110
Introduction into PhoneGap
Avatar for Cassian LUP cassilup
0
71

Other Decks in Programming

See All in Programming
Takumiから考えるSecurity_Maturity_Model.pdf
Avatar for gessy0129 gessy0129
1
170
飯MCP
Avatar for Yusuke Wada yusukebe
0
400
Ruby and LLM Ecosystem 2nd
Avatar for Koichi ITO koic
1
1.4k
Rethinking API Platform Filters
Avatar for Vincent Amstoutz vinceamstoutz
0
2.9k
PHPで TLSのプロトコルを実装してみる
Avatar for higaki higaki_program
0
550
Claude Code Skill入門
Avatar for maya mayahoney
0
440
Reactive ❤️ Loom: A Forbidden Love Story
Avatar for Francesco Nigro franz1981
2
190
ローカルで稼働する AI エージェントを超えて / beyond-local-ai-agents
Avatar for geeawa gawa
0
180
PHP でエミュレータを自作して Ubuntu を動かそう
Avatar for memory m3m0r7
PRO
2
150
モックわからないマン卒業記 ~振る舞いを起点に見直した、フロントエンドテストにおけるモックの使いどころ~
Avatar for Tasuku Watanabe tasukuwatanabe
3
430
Codexに役割を持たせる 他のAIエージェントと組み合わせる実務Tips
Avatar for o8n o8n
4
1.4k
Everything Claude Code OSS詳細 — 5層構造の中身と導入方法
Avatar for techs-targe targe
0
160

Featured

See All Featured
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
53k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
330
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.8k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.4k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
71k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
120
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
200
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.9k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.5k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
300

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