JavaScript Debugging with Chrome DevTools [Part 1]

July 31, 2013

210

JavaScript Debugging with Chrome DevTools [Part 1]

A brief introduction in Chrome Developer Tools.

Cassian LUP

July 31, 2013

More Decks by Cassian LUP

See All by Cassian LUP

Warping Time with Async/Await

5

150

Docker for WebDevs

0

120

TypeScript: The Good Cop

0

230

NodeConf London 2016 Summary

0

73

Working with the DOM and Living to Tell

0

97

How To Hack (Together) An Environment

0

130

Appium • Mobile Automation Made Awesome (Part II)

0

120

Appium • Mobile Automation Made Awesome (Part I)

0

150

Introduction into PhoneGap

0

100

Other Decks in Programming

See All in Programming

dotNET_vulnclicker_intro.pdf

0

150

當我們開始不讀 Code - AI Agent 時代，Code Review 與 Clean Code 還剩下什麼？

1

300

Groovy as a human and AI friendly programming language

0

100

作って学ぶSpring BootのAuto Configuration / JJUG Night Seminar 2026-10-19

0

200

phperだってパンチカードでコーディングしたい

PRO

0

400

AmebaブログはKMPから卒業します

0

220

우리의 Nitro Modules는 당신의 Turbo Modules보다 아름답다

0

180

No More NoSuchMethodError

1

110

AWS CDKのカスタムリソースでContinuum（旧Security Agent）を実装した話 | Implementing Continuum (formerly Security Agent) via AWS CDK Custom Resource

2

160

[JA] Domain Modeling with Vanilla Rails: 「操作」から再考するRailsの設計論

4

830

Agentic Software Factoryに、すごく賢いIF文を。 / super smart IF statement into the Agentic Software Factory.

8

2.3k

[2026-10-09]一枚の布で作らなくてもいい。信頼性は「パッチワーク」で紡がれる～既存の運用と新しい可能性をつなぎ合わせてきたCREの話～

0

110

Featured

See All Featured

90

10k

HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy

PRO

0

760

Leo the Paperboy

10

2.4k

1

400

Writing Fast Ruby

630

63k

The Invisible Side of Design

301

52k

How to audit for AI Accessibility on your Front & Back End

0

610

Stewardship and Sustainability of Urban and Community Forests

0

560

Organizational Design Perspectives: An Ontology of Organizational Design Elements

PRO

1

860

Building Better People: How to give real-time feedback that sticks.

371

20k

Easily Structure & Communicate Ideas using Wireframe

194

17k

Google's AI Overviews - The New Search

0

1.6k

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