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
Search
Amjad Masad
May 05, 2014
Programming
11
1.8k
JavaScript Debugging
Amjad Masad
May 05, 2014
Tweet
Share
More Decks by Amjad Masad
See All by Amjad Masad
fb-flo
amasad
0
180
Modern Web Development Tools And Workflow
amasad
0
220
Other Decks in Programming
See All in Programming
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
120
Is Xcode slowly dying out in 2025?
uetyo
1
270
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
29k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
190
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
Building Adaptive Systems
keathley
43
2.7k
Speed Design
sergeychernyshev
32
1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Code Review Best Practice
trishagee
69
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Embracing the Ebb and Flow
colly
86
4.7k
Transcript
JAVASCRIPT DEBUGGING AMJAD MASAD ! facebook
HOW FAR HAVE WE COME
None
IMMEDIATE
<script>! ! document.write('Hello World’);! ! </script>
SRSLY?
LOOK CLOSER
WTF
WE’VE COME A LONG WAY
• WORK AT FACEBOOK & BEFORE THAT WAS FIRST ENGINEER
AT CODECADEMY • JAVASCRIPT EXPERIMENTALIST • MADE REPL.IT, DEBUG.JS, SOUNDOFJS etc • amasad.me, @amasad ABOUT ME
• CODE THAT’S EASIER TO DEBUG • DEBUGGING TIPS AND
TRICKS • THE TOOLS JAVASCRIPT DEBUGGING
CODE EASIER TO DEBUG
LAMBDAS ARE FUN BUT ARE ALSO HARD TO DEBUG
CONTRIVED EXAMPLES AHEAD
CLOSURES HIDE THEIR STATE REALLY WELL function counter(value) {! !
return function() {! ! ! value++;! ! ! return value;! ! };! } class Counter {! ! constructor(val) {! ! ! this.value = val;! ! }! ! increment() {! ! ! this.value++;! ! ! return this.value;! ! }! }
CAN’T MONKEY PATCH CLOSURES counter.increment = function() {! ! this.value--;!
! return this.value;! }
PARTIAL APPLICATIONS AND LAZY EVALUATION ARE EVEN HARDER TO DEBUG
function counter(value) {! ! return function() {! ! ! return value;! ! };! }! ! function increment(counter) {! ! return function() {! ! ! return counter() + 1;! ! };! }! ! var count = counter(2);! count = increment(count);! console.log(count());
MAKE CLASSES AND OBJECTS ACCESSIBLE FROM THE CONSOLE
LOOK AT APPLICATION STATE WHILE IN IDLE STATE > app.counter.value!
1
START THINGS FROM THE CONSOLE > app.user.emit('change')
QUICKLY SET BREAKPOINTS AND MONKEY PATCH FROM THE CONSOLE >
debug(app.user.save);
DEBUGGING TIPS AND TRICKS
ALWAYS BE DEBUGGING • HAVE THE PROGRAM IN A RUNNABLE
STATE • SPLIT UP BIG CHANGES INTO SMALLER STEPS • BREADTH FIRST > DEPTH FIRST • KEEPS THE MOMENTUM GOING
CHANGE AND BREAK THINGS • RUNNING THE PROGRAM OFTEN ALLOWS
YOU TO TAKE BOLD STEPS • WHILE IN THE DEBUGGER CHANGE THINGS • LEAN ON YOUR TOOLS
LIVE EDIT • FIX MISTAKES WITHOUT RELOADING • IMPLEMENT FEATURES
WITHOUT RELOADING • ADD CONDITIONAL DEBUG STATEMENTS
SETTING UP TRAPS • IN LARGE APPLICATIONS AND TEAMS IT’S
HARD TO KNOW WHAT EVERYONE IS DOING • CAN’T STEP-DEBUG ALL THE CODE • NEED A WAY TO BREAK ON ACTIONS
BREAK ON METHOD CALLS Event.prototype.preventDefault = function() {! ! debugger;!
! return _original.apply(this, arguments);! } • CAN’T SET A BREAKPOINT ON NATIVE METHODS • NEED TO KNOW SOURCE FOR METHOD
BREAK ON CUSTOM EVENTS monitorEvents(elem);! ! user.on('change', function() {! debugger;!
}); • WHEN AN EVENT IS FIRED, I WANT STOP AND INSPECT • NEED TO MAKE SURE AN EVENT IS FIRING
BREAK ON PROPERTY ACCESS • WTF CHANGES • SETTERS AND
GETTERS counter.__defineSetter__(! ! 'value',! ! function() { debugger; }! );
BREAK ON CALLBACKS • SIMILAR TO CUSTOM EVENTS • TO
MAKE SURE AN ASYNC PROCESS FINISHES user.save(function() {! ! debugger;! });
BREAK ON DOM MUTATION • CAN BE DONE FROM DEVTOOLS
• FINE GRAINED CONTROL • ASYNC CALL STACK
BREAK ON OBJECT MUTATION • Object.observe! • BREAK ON PROPERTY
ADD, CHANGE, DELETE • ASYNC CALL STACK (NOT WORKING YET)
THE TOOLS
THE COMMAND LINE API $0! $(selector)! monitorEvents(elem)! getEventListeners(elem)
UNDOCUMENTED APIS debug(fn);! montior(fn);
DEBUG UTILS $duv(object, event);! $dug(object, property);! $dus(object, property);! $dum(object, method);!
! and others… github.com/amasad/debug_utils
PROBLEMS WITH LIVE EDIT • LIVE EDIT IN CHROME IS
NOT FLEXIBLE • CAN’T HAVE A BUILD STEP • CAN’T HAVE A REMOTE FILE SYSTEM • LOCKED INTO THE DEVTOOLS EDITOR
INTRODUCING flo • OPEN SOURCE TOOL BY FACEBOOK • LIVE
EDIT JAVASCRIPT, CSS, IMAGES • SUPPORTS BUILD STEPS AND ANY DEV ENV • EASY TO INTEGRATE AND HACKABLE
WHY flo • I JOINED FACEBOOK LAST YEAR • A
LOT OF JAVASCRIPT GOODNESS • RELOADING AND GETTING TO THE USER FLOW TAKES A LONG TIME • COMPLEX DEV ENVIRONMENT
HOW flo • SERVER COMPONENT IS NPM MODULE • CLIENT
COMPONENT IS CHROME EXTENSION • facebook.github.com/fb-flo
THANK YOU