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

JavaScript Debugging with Chrome DevTools [Part 1]

Avatar for Cassian LUP Cassian LUP
July 31, 2013
Programming
190
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
100
TypeScript: The Good Cop
Avatar for Cassian LUP cassilup
0
210
NodeConf London 2016 Summary
Avatar for Cassian LUP cassilup
0
57
Working with the DOM and Living to Tell
Avatar for Cassian LUP cassilup
0
76
How To Hack (Together) An Environment
Avatar for Cassian LUP cassilup
0
110
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
130
Introduction into PhoneGap
Avatar for Cassian LUP cassilup
0
88

Other Decks in Programming

See All in Programming
自作OSでスライド発表する
Avatar for uyuki uyuki234
1
3.7k
分散システム、なんですぐ死んでしまうん？耐障害性を高めたいあなたのためのレジリエンスパターン入門
Avatar for Mitsuhiro Shibuya mshibuya
7
5.2k
Signal Forms: Details & Live Coding @enterJS 2026 in Mannheim
Avatar for Manfred Steyer manfredsteyer
PRO
0
220
AIを活用したE2Eテスト実装効率化のあゆみ / ebisu-mobile-14-kotetu
Avatar for kotetu (kotetuco) kotetuco
0
160
Semantic Version 単位で戦略を柔軟に変えて、パッケージアップデートを自動化する
Avatar for daitasu daitasu
1
350
過去最大のMCPアップデート! 2026-07-28 RC版の謎に迫る
Avatar for matsukada licux
6
460
【やさしく解説 設計編 #0】DDDのコード、読めるのに分からない人へ
Avatar for HideyukiKitao panda728
PRO
2
240
エンジニアにデザインハーネスを 〜デザインプロセスを規定するためのハーネス〜 / Design harness from an engineer's perspective
Avatar for r-kagaya rkaga
2
1.2k
ECSアプリログをFireLensでコスト削減しようとしたけど諦めた話 in Fargate×Node.js
Avatar for アキキー | Akihisa Ikeda akihisaikeda
2
4.2k
関数型プログラミングのメリットって何だろう？
Avatar for わんこ(Wanko_IT) wanko_it
0
150
OSINT for SRE: 
学術論文とポストモーテムから探る
システム障害の共通パターン / SRE NEXT 2026
Avatar for Tomoyuki KOYAMA tomoyk
1
3k
LLMによるContent Moderationの本番運用の裏側と品質担保への挑戦
Avatar for suikabar suikabar
3
840

Featured

See All Featured
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
230
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
180
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.7k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
220
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
210
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
220
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
250
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
400
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
56k

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