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

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
180
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
110
Docker for WebDevs
Avatar for Cassian LUP cassilup
0
92
TypeScript: The Good Cop
Avatar for Cassian LUP cassilup
0
190
NodeConf London 2016 Summary
Avatar for Cassian LUP cassilup
0
41
Working with the DOM and Living to Tell
Avatar for Cassian LUP cassilup
0
65
How To Hack (Together) An Environment
Avatar for Cassian LUP cassilup
0
98
Appium • Mobile Automation Made Awesome (Part II)
Avatar for Cassian LUP cassilup
0
89
Appium • Mobile Automation Made Awesome (Part I)
Avatar for Cassian LUP cassilup
0
120
Introduction into PhoneGap
Avatar for Cassian LUP cassilup
0
79

Other Decks in Programming

See All in Programming
ハーネスエンジニアリングにどう向き合うか 〜ルールファイルを超えて開発プロセスを設計する〜 / How to approach harness engineering
Avatar for r-kagaya rkaga
28
19k
t *testing.T は どこからやってくるの？
Avatar for Kotaro Otaka otakakot
1
900
「話せることがない」を乗り越える 〜日常業務から登壇テーマをつくる思考法〜
Avatar for ShoheiMitani shoheimitani
4
970
Claude Code × Gemini × Ebitengine ゲーム制作素人WebエンジニアがGoでゲームを作った話
Avatar for webzawa webzawa
0
220
Road to RubyKaigi: Play Hard(ware)
Avatar for makicamel makicamel
1
550
AIを導入する前にやるべきこと
Avatar for Negima negima
2
330
My daily life on Ruby
Avatar for Akira Matsuda a_matsuda
3
180
10 Tips of AWS ～Gen AI on AWS～
Avatar for matsukada licux
5
540
PHPでバイナリをパースして理解するASN.1
Avatar for muno92 muno92
PRO
0
420
決定論 vs 確率論：Gemini 3 FlashとTF-IDFを組み合わせた「法規判定エンジン」の構築
Avatar for Shu Kobuchi shukob
0
150
PHPでローカル環境用のSSL/TLS証明書を発行することはできるのか？ #phpconkagawa
Avatar for akase244 akase244
0
340
Back to the roots of date
Avatar for jinroq jinroq
0
720

Featured

See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.3k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.4k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
180
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
750
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.9k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
290
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.5k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
200
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k

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