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
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
97
Docker for WebDevs
Avatar for Cassian LUP cassilup
0
86
TypeScript: The Good Cop
Avatar for Cassian LUP cassilup
0
170
NodeConf London 2016 Summary
Avatar for Cassian LUP cassilup
0
31
Working with the DOM and Living to Tell
Avatar for Cassian LUP cassilup
0
59
How To Hack (Together) An Environment
Avatar for Cassian LUP cassilup
0
92
Appium • Mobile Automation Made Awesome (Part II)
Avatar for Cassian LUP cassilup
0
84
Appium • Mobile Automation Made Awesome (Part I)
Avatar for Cassian LUP cassilup
0
110
Introduction into PhoneGap
Avatar for Cassian LUP cassilup
0
70

Other Decks in Programming

See All in Programming
The Ralph Wiggum Loop: First Principles of Autonomous Development
Avatar for Ryuichiro Semba sembayui
0
3.7k
株式会社 Sun terras カンパニーデック
Avatar for Sun terras.Inc sunterras
0
2k
コーディングルールの鮮度を保ちたい / keep-fresh-go-internal-conventions
Avatar for NAGATA Hiroaki handlename
0
170
今更考える「単一責任原則」 / Thinking about the Single Responsibility Principle
Avatar for philomagi tooppoo
3
1.6k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
360
メタプログラミングで実現する「コードを仕様にする」仕組み/nikkei-tech-talk43
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
170
CSC307 Lecture 12
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
470
AI主導でFastAPIのWebサービスを作るときに 人間が構造化すべき境界線
Avatar for Jun okazaki okajun35
0
650
Windows on Ryzen and I
Avatar for 瀬尾佳隆 seosoft
0
220
Docコメントで始める簡単ガードレール
Avatar for Keisuke Ikeda keisukeikeda
1
110
猫の手も借りたい！ので AIエージェント猫を作って社内に放した話 Claude Code × Container Lambda の Slack Bot "DevNeko"
Avatar for naramomi7 naramomi7
0
260
Cyrius ーLinux非依存にコンテナをネイティブ実行する専用OSー
Avatar for n4mlz n4mlz
0
120

Featured

See All Featured
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
66
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
290
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
710
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
210
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.2k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
120
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
97
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
5
35k

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