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
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
280
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Hack Claude Code with Claude Code
choplin
4
2k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
AIともっと楽するE2Eテスト
myohei
6
2.6k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
880
技術同人誌をMCP Serverにしてみた
74th
1
640
PipeCDのプラグイン化で目指すところ
warashi
1
270
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
KATA
mclloyd
30
14k
Side Projects
sachag
455
42k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
A Tale of Four Properties
chriscoyier
160
23k
Making Projects Easy
brettharned
116
6.3k
4 Signs Your Business is Dying
shpigford
184
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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