SlideShare a Scribd company logo
1 of 22
Download to read offline
The JavaScript
    Stacktrace Project
Making cross-browser compatibility suck
              a little less



                        © 2010 Eric Wendelin
Let me say this upfront...

    You care about this
         project*


                      * Probably
D’oh!
What would you do?
IE Developer Tools




 Yay... won’t this be fun?
What if you could get...
Javascript Stacktrace

Micro-library for getting
function stack traces in
  all* web browsers

* NOTE: Must actually support Javascript
In a nutshell...
printStackTrace()

return [
  ‘calledFromFoo(my.js:32)’,
  ‘foo(my.js:23)’,
  ‘callsFoo(my.js:14)’,
  ‘{anonymous}(other.js:1)’,
  ...
]
Licensed to the public
domain

~1.8k minified and gzipped
Works in
How it works

function foo() {
//calling function!
arguments.callee.caller
//passed parameters!
arguments.callee.caller.arguments
}
Bonus: Error objects
try {
    (0)(); // produce an error
} catch (error) {
    error.stack; // Firefox, Chrome
   error.stacktrace ||
error.message; // Opera
}
Step 1:
<script type=”text/javascript”
src=”stacktrace.js”></script>


Step 2:
var trace = printStackTrace();


Step 3:
showError(trace.join(‘n’));
• Now at 5 contributors
• 130+ watchers on GitHub
Coming soon...
• IE9 support
• Function instrumenting to always
  print a stacktrace when called (done!)
• Real-time traces (maybe! - not as easy
  as you think ;)
Secrets to open-source
        success
Good idea > good skill
Unit tests help
others contribute
Just release it
su.pr/AH9ShK
[ http://github.com/emwendelin/javascript-stacktrace ]




Blog: eriwen.com
Twitter: @eriwen
Email: emwendelin@gmail.com


                                     © 2010 Eric Wendelin
Javascript Stacktrace Ignite

More Related Content

What's hot

Managing your Minions with Func
Managing your Minions with FuncManaging your Minions with Func
Managing your Minions with Funcdanhanks
 
Windows Azure loves OSS
Windows Azure loves OSSWindows Azure loves OSS
Windows Azure loves OSSKazumi Hirose
 
The Hacker News: Hacking Wireless DSL routers via Admin Panel Password Reset ...
The Hacker News: Hacking Wireless DSL routers via Admin Panel Password Reset ...The Hacker News: Hacking Wireless DSL routers via Admin Panel Password Reset ...
The Hacker News: Hacking Wireless DSL routers via Admin Panel Password Reset ...The Hacker News
 
Environments line-up! Vagrant & Puppet 101
Environments line-up! Vagrant & Puppet 101Environments line-up! Vagrant & Puppet 101
Environments line-up! Vagrant & Puppet 101jelrikvh
 
Great Hiroshima with Python 170830
Great Hiroshima with Python 170830Great Hiroshima with Python 170830
Great Hiroshima with Python 170830Takuya Nishimoto
 
Vagrant勉強会 チュートリアル編
Vagrant勉強会 チュートリアル編Vagrant勉強会 チュートリアル編
Vagrant勉強会 チュートリアル編Yasuyuki Sugai
 
rake puppetexpert:create - Puppet Camp Silicon Valley 2014
rake puppetexpert:create - Puppet Camp Silicon Valley 2014rake puppetexpert:create - Puppet Camp Silicon Valley 2014
rake puppetexpert:create - Puppet Camp Silicon Valley 2014nvpuppet
 
Charla EHU Noviembre 2014 - Desarrollo Web
Charla EHU Noviembre 2014 - Desarrollo WebCharla EHU Noviembre 2014 - Desarrollo Web
Charla EHU Noviembre 2014 - Desarrollo WebMikel Torres Ugarte
 
Uses of tmux explained
Uses of tmux explainedUses of tmux explained
Uses of tmux explainedStanislas Polu
 
MongoTalk/Voyage
MongoTalk/VoyageMongoTalk/Voyage
MongoTalk/VoyageESUG
 
Complementing Docker with Puppet
Complementing Docker with PuppetComplementing Docker with Puppet
Complementing Docker with PuppetDocker, Inc.
 
Redmine on amazon ec2
Redmine on amazon ec2Redmine on amazon ec2
Redmine on amazon ec2Ikuru Kanuma
 
Beyond Golden Containers: Complementing Docker with Puppet
Beyond Golden Containers: Complementing Docker with PuppetBeyond Golden Containers: Complementing Docker with Puppet
Beyond Golden Containers: Complementing Docker with Puppetlutter
 

What's hot (16)

Managing your Minions with Func
Managing your Minions with FuncManaging your Minions with Func
Managing your Minions with Func
 
Windows Azure loves OSS
Windows Azure loves OSSWindows Azure loves OSS
Windows Azure loves OSS
 
The Hacker News: Hacking Wireless DSL routers via Admin Panel Password Reset ...
The Hacker News: Hacking Wireless DSL routers via Admin Panel Password Reset ...The Hacker News: Hacking Wireless DSL routers via Admin Panel Password Reset ...
The Hacker News: Hacking Wireless DSL routers via Admin Panel Password Reset ...
 
Environments line-up! Vagrant & Puppet 101
Environments line-up! Vagrant & Puppet 101Environments line-up! Vagrant & Puppet 101
Environments line-up! Vagrant & Puppet 101
 
Great Hiroshima with Python 170830
Great Hiroshima with Python 170830Great Hiroshima with Python 170830
Great Hiroshima with Python 170830
 
Vagrant勉強会 チュートリアル編
Vagrant勉強会 チュートリアル編Vagrant勉強会 チュートリアル編
Vagrant勉強会 チュートリアル編
 
Winsock
WinsockWinsock
Winsock
 
rake puppetexpert:create - Puppet Camp Silicon Valley 2014
rake puppetexpert:create - Puppet Camp Silicon Valley 2014rake puppetexpert:create - Puppet Camp Silicon Valley 2014
rake puppetexpert:create - Puppet Camp Silicon Valley 2014
 
Charla EHU Noviembre 2014 - Desarrollo Web
Charla EHU Noviembre 2014 - Desarrollo WebCharla EHU Noviembre 2014 - Desarrollo Web
Charla EHU Noviembre 2014 - Desarrollo Web
 
Vim Notes
Vim NotesVim Notes
Vim Notes
 
Uses of tmux explained
Uses of tmux explainedUses of tmux explained
Uses of tmux explained
 
MongoTalk/Voyage
MongoTalk/VoyageMongoTalk/Voyage
MongoTalk/Voyage
 
Complementing Docker with Puppet
Complementing Docker with PuppetComplementing Docker with Puppet
Complementing Docker with Puppet
 
Redmine on amazon ec2
Redmine on amazon ec2Redmine on amazon ec2
Redmine on amazon ec2
 
Beyond Golden Containers: Complementing Docker with Puppet
Beyond Golden Containers: Complementing Docker with PuppetBeyond Golden Containers: Complementing Docker with Puppet
Beyond Golden Containers: Complementing Docker with Puppet
 
RSpec. Part 3
RSpec. Part 3RSpec. Part 3
RSpec. Part 3
 

Viewers also liked

Groovy-er desktop applications with Griffon
Groovy-er desktop applications with GriffonGroovy-er desktop applications with Griffon
Groovy-er desktop applications with GriffonEric Wendelin
 
Gradle 3.0: Unleash the Daemon!
Gradle 3.0: Unleash the Daemon!Gradle 3.0: Unleash the Daemon!
Gradle 3.0: Unleash the Daemon!Eric Wendelin
 
Testing Hadoop jobs with MRUnit
Testing Hadoop jobs with MRUnitTesting Hadoop jobs with MRUnit
Testing Hadoop jobs with MRUnitEric Wendelin
 
JavaScript + Jenkins = Winning!
JavaScript + Jenkins = Winning!JavaScript + Jenkins = Winning!
JavaScript + Jenkins = Winning!Eric Wendelin
 
Test your Javascript! v1.1
Test your Javascript! v1.1Test your Javascript! v1.1
Test your Javascript! v1.1Eric Wendelin
 

Viewers also liked (8)

Groovy-er desktop applications with Griffon
Groovy-er desktop applications with GriffonGroovy-er desktop applications with Griffon
Groovy-er desktop applications with Griffon
 
Gradle 3.0: Unleash the Daemon!
Gradle 3.0: Unleash the Daemon!Gradle 3.0: Unleash the Daemon!
Gradle 3.0: Unleash the Daemon!
 
Intro to Hadoop
Intro to HadoopIntro to Hadoop
Intro to Hadoop
 
Testing Hadoop jobs with MRUnit
Testing Hadoop jobs with MRUnitTesting Hadoop jobs with MRUnit
Testing Hadoop jobs with MRUnit
 
Apache Avro and You
Apache Avro and YouApache Avro and You
Apache Avro and You
 
JavaScript + Jenkins = Winning!
JavaScript + Jenkins = Winning!JavaScript + Jenkins = Winning!
JavaScript + Jenkins = Winning!
 
Test your Javascript! v1.1
Test your Javascript! v1.1Test your Javascript! v1.1
Test your Javascript! v1.1
 
Gradle by Example
Gradle by ExampleGradle by Example
Gradle by Example
 

Similar to Javascript Stacktrace Ignite

soft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureSimon Willison
 
Speak the Web 15.02.2010
Speak the Web 15.02.2010Speak the Web 15.02.2010
Speak the Web 15.02.2010Patrick Lauke
 
Why Every Tester Should Learn Ruby
Why Every Tester Should Learn RubyWhy Every Tester Should Learn Ruby
Why Every Tester Should Learn RubyRaimonds Simanovskis
 
Your Library Sucks, and why you should use it.
Your Library Sucks, and why you should use it.Your Library Sucks, and why you should use it.
Your Library Sucks, and why you should use it.Peter Higgins
 
JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing UpDavid Padbury
 
Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSocketsGonzalo Ayuso
 
How Secure Are Docker Containers?
How Secure Are Docker Containers?How Secure Are Docker Containers?
How Secure Are Docker Containers?Ben Hall
 
HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?Ankara JUG
 
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....Patrick Lauke
 
Practical JavaScript Programming - Session 8/8
Practical JavaScript Programming - Session 8/8Practical JavaScript Programming - Session 8/8
Practical JavaScript Programming - Session 8/8Wilson Su
 
SwampDragon presentation: The Copenhagen Django Meetup Group
SwampDragon presentation: The Copenhagen Django Meetup GroupSwampDragon presentation: The Copenhagen Django Meetup Group
SwampDragon presentation: The Copenhagen Django Meetup GroupErnest Jumbe
 
Event-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineEvent-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineRicardo Silva
 
Das kannste schon so machen
Das kannste schon so machenDas kannste schon so machen
Das kannste schon so machenAndré Goliath
 
Async task, threads, pools, and executors oh my!
Async task, threads, pools, and executors oh my!Async task, threads, pools, and executors oh my!
Async task, threads, pools, and executors oh my!Stacy Devino
 

Similar to Javascript Stacktrace Ignite (20)

soft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.jssoft-shake.ch - Hands on Node.js
soft-shake.ch - Hands on Node.js
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
 
Speak the Web 15.02.2010
Speak the Web 15.02.2010Speak the Web 15.02.2010
Speak the Web 15.02.2010
 
A More Flash Like Web?
A More Flash Like Web?A More Flash Like Web?
A More Flash Like Web?
 
Why Every Tester Should Learn Ruby
Why Every Tester Should Learn RubyWhy Every Tester Should Learn Ruby
Why Every Tester Should Learn Ruby
 
Your Library Sucks, and why you should use it.
Your Library Sucks, and why you should use it.Your Library Sucks, and why you should use it.
Your Library Sucks, and why you should use it.
 
JavaScript Growing Up
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing Up
 
Nodejs and WebSockets
Nodejs and WebSocketsNodejs and WebSockets
Nodejs and WebSockets
 
JavaScript Basics
JavaScript BasicsJavaScript Basics
JavaScript Basics
 
Clipboard support on Y! mail
Clipboard support on Y! mailClipboard support on Y! mail
Clipboard support on Y! mail
 
How Secure Are Docker Containers?
How Secure Are Docker Containers?How Secure Are Docker Containers?
How Secure Are Docker Containers?
 
HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?HTML5 - Daha Flash bir web?
HTML5 - Daha Flash bir web?
 
Node azure
Node azureNode azure
Node azure
 
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
 
Nantes Jug - Java 7
Nantes Jug - Java 7Nantes Jug - Java 7
Nantes Jug - Java 7
 
Practical JavaScript Programming - Session 8/8
Practical JavaScript Programming - Session 8/8Practical JavaScript Programming - Session 8/8
Practical JavaScript Programming - Session 8/8
 
SwampDragon presentation: The Copenhagen Django Meetup Group
SwampDragon presentation: The Copenhagen Django Meetup GroupSwampDragon presentation: The Copenhagen Django Meetup Group
SwampDragon presentation: The Copenhagen Django Meetup Group
 
Event-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineEvent-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 Engine
 
Das kannste schon so machen
Das kannste schon so machenDas kannste schon so machen
Das kannste schon so machen
 
Async task, threads, pools, and executors oh my!
Async task, threads, pools, and executors oh my!Async task, threads, pools, and executors oh my!
Async task, threads, pools, and executors oh my!
 

Javascript Stacktrace Ignite

Editor's Notes

  1. Do you write any JavaScript? Does your web app have to behave in Internet Explorer?
  2. This is a Javascript developer&amp;#x2019;s nightmare. Don&amp;#x2019;t you love IE?
  3. Open up Firebug, try to reproduce the bug... and come to the realization that you&amp;#x2019;ll have to debug it in IE.
  4. Unfortunately, the developer tools available for IE aren&amp;#x2019;t always that helpful. At this point you&amp;#x2019;re reduced to console.log statements or even... *gasp* alerts.
  5. What if you had a way of knowing what was called leading up to the error automatically?
  6. An array of strings containing function names, files, line numbers and arguments
  7. Obviously this project is open-source or I wouldn&amp;#x2019;t be speaking to you tonight. So you have no excuses not to use it!
  8. Javascript Stacktrace works in LOTS of browsers. I have tested it as working in IE 5.5 up, and all the other browsers you see here... probably many of which you may have never heard of
  9. The secret sauce here is that every function has a reference to it&amp;#x2019;s calling function, that every function maintains a reference to passed parameters
  10. Good browsers have Error objects that have a function stack complete with files and line numbers!
  11. 3 simple steps to get this working: Include stacktrace.js, call printStackTrace() and do whatever you want with it. In the previous example I called it within window.onerror
  12. You can&amp;#x2019;t get everything in all circumstances. Only gives you where the problem is, not what. Not interactive without a console.
  13. However, it is one more tool in your toolbox, and it turns out a bunch of people think it&amp;#x2019;s useful enough.
  14. I know a lot of you attended my talk in February, so for you I have a sneak peek of things to come
  15. I learned a lot about how to manage open-source projects themselves, and I wanted to share a few secrets that I think apply to all projects
  16. It turns out it usually doesn&amp;#x2019;t matter HOW you do it as long as you fulfill a need.
  17. Using QUnit for unit testing and Browsershots.org to test lots of browsers visually encouraged everyone to make code tweaks without fear!
  18. I, myself, am guilty of not releasing projects because I was afraid of looking stupid and having my code laughed at. It is *always* worth it to publicize it, anyway. You are guaranteed to learn a lot
  19. Now go check out the project! Hit the shortlink here or just Google &amp;#x201C;Javascript Stacktrace&amp;#x201D; and it&amp;#x2019;s the first result!