Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript Debugging with Chrome DevTools [Part 1]
Search
Cassian LUP
July 31, 2013
Programming
2
160
JavaScript Debugging with Chrome DevTools [Part 1]
A brief introduction in Chrome Developer Tools.
Cassian LUP
July 31, 2013
Tweet
Share
More Decks by Cassian LUP
See All by Cassian LUP
Warping Time with Async/Await
cassilup
5
91
Docker for WebDevs
cassilup
0
83
TypeScript: The Good Cop
cassilup
0
160
NodeConf London 2016 Summary
cassilup
0
28
Working with the DOM and Living to Tell
cassilup
0
47
How To Hack (Together) An Environment
cassilup
0
81
Appium • Mobile Automation Made Awesome (Part II)
cassilup
0
72
Appium • Mobile Automation Made Awesome (Part I)
cassilup
0
110
Introduction into PhoneGap
cassilup
0
68
Other Decks in Programming
See All in Programming
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
WebDriver BiDiとは何なのか
yotahada3
1
140
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
『品質』という言葉が嫌いな理由
korimu
0
160
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Thoughts on Productivity
jonyablonski
69
4.5k
Site-Speed That Sticks
csswizardry
3
370
Adopting Sorbet at Scale
ufuk
74
9.2k
A designer walks into a library…
pauljervisheath
205
24k
Documentation Writing (for coders)
carmenintech
67
4.6k
KATA
mclloyd
29
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
A Tale of Four Properties
chriscoyier
158
23k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Transcript
None
0 ) C o m m o n - s
e n s e ! c o n c e p t s . !
there%is%[SIMPLY]% no%such%thing% as%a% bug$free$ app%
learning% is%a%% ››%process%‹‹% ((not$ %% an%event%
without% a%debugger% is%like% going%to%war.$
without% a%debugger% is%like% going%to%war.$ Blindfolded.$
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 . !
Getting there:! % ›%%CTRL%+%SHIFT%+%J%%%%(COMMAND%+%OPTION%+%J)% % ›%%Right%Click%+%Inspect%Element% % ›%%Hotdog%Menu%(%%%%%%)%›%Tools%›%Developer%Tools%
2) HTML ! Elements ! Hands-on. ! [ “ H
T M L ” , “ e l e m e n t s ” ] ! %
[ “ H T M L ” , “ e
l e m e n t s ” ] ! %
3) JS Console! Hands-on. ! [ “ J S ”
, “ c o n s o l e ” ] ! %
[ “ J S ” , “ c o n
s o l e ” ] ! %
4) JS Sources! Hands-on. ! [ “ J S ”
, “ s o u r c e s ” ] ! %
[ “ J S ” , “ s o u
r c e s ” ] ! %
! › 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 ” ] ! %
[ “ E n d i n g ” ,
“ t h o u g h t s ” ] ! %