Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

JavaScript Debugging with Chrome DevTools [Part 1]

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
140
Docker for WebDevs
Avatar for Cassian LUP cassilup
0
110
TypeScript: The Good Cop
Avatar for Cassian LUP cassilup
0
230
NodeConf London 2016 Summary
Avatar for Cassian LUP cassilup
0
69
Working with the DOM and Living to Tell
Avatar for Cassian LUP cassilup
0
91
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
110
Appium • Mobile Automation Made Awesome (Part I)
Avatar for Cassian LUP cassilup
0
140
Introduction into PhoneGap
Avatar for Cassian LUP cassilup
0
100

Other Decks in Programming

See All in Programming
Seeing Through Serverless: Observability for AWS Lambda with ADOT and CloudWatch Application Signals
Avatar for shiro seike seike460
PRO
1
130
個人開発基盤をまるごとCloudflareに引っ越して爆速で総合的体験を向上させた話
Avatar for Tsubasa SEKIGUCHI tinykitten
0
150
DynamoDBの基礎を振り返りながらベクトル検索機能を理解する
Avatar for 村上優稀 musan
3
280
Omarchy Tokyo やると聞いて UMPC 買ってセットアップしてきた
Avatar for Fumiaki MATSUSHIMA mtsmfm
0
130
テストを司るデーモンに会いに行く 〜隔離した仮想マシンでテストを通すまで〜
Avatar for Hidemune Takahashi h1d3mun3
1
130
LoopHub - ローカルで動く GitHub で、AI と共同開発
Avatar for jugyo jugyo
1
490
AIとGame Jamで、ゲームを完成させた話
Avatar for hiro takahirosaeki
0
120
アクセシビリティから考える情報設計
Avatar for high-g high_g_engineer
0
350
{ Android | Kotlin } Gradle Plugin in 2026
Avatar for RyuNen344 ryunen344
1
300
GKE で Pod の見方を変えたら、スケールアウト時の挙動を真に捉えられた話
Avatar for Sota Takaki stkk
0
110
ソフトウェアラスタライザ
Avatar for Fadis fadis
1
800
標準パッケージに uuid が追加された 背景から見る Go らしい意思決定 / go_127_uuid_decision
Avatar for convto convto
5
6k

Featured

See All Featured
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.3k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
2.1k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
410
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.7k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
500
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.8k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
510
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
28
3.6k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.4k

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