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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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
230
Other Decks in Programming
See All in Programming
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
himorishige
11
5.9k
CSC307 Lecture 04
javiergs
PRO
0
660
Apache Iceberg V3 and migration to V3
tomtanaka
0
150
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
manfredsteyer
PRO
0
120
ThorVG Viewer In VS Code
nors
0
760
責任感のあるCloudWatchアラームを設計しよう
akihisaikeda
3
160
Grafana:建立系統全知視角的捷徑
blueswen
0
330
Vibe codingでおすすめの言語と開発手法
uyuki234
0
220
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
bengo4com
1
230
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる!
tosuri13
1
170
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
izumin5210
7
2.3k
なるべく楽してバックエンドに型をつけたい!(楽とは言ってない)
hibiki_cube
0
140
Featured
See All Featured
BBQ
matthewcrist
89
10k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
34k
The SEO Collaboration Effect
kristinabergwall1
0
350
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.4k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
110
Making the Leap to Tech Lead
cromwellryan
135
9.7k
A Soul's Torment
seathinner
5
2.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.4k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
77
Groundhog Day: Seeking Process in Gaming for Health
codingconduct
0
90
Navigating Team Friction
lara
192
16k
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