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
Goで作る、開発・CI環境
sin392
0
260
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
440
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.3k
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
180
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
8.7k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
870
20250708_JAWS_opscdk
takuyay0ne
2
130
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
21k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7k
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
What's in a price? How to price your products and services
michaelherold
246
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
A Modern Web Designer's Workflow
chriscoyier
695
190k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Practical Orchestrator
shlominoach
189
11k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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