Javascript Stacktrace Ignite
Upcoming SlideShare
Loading in...5

Javascript Stacktrace Ignite



Bite-size talk on the Javascript Stacktrace project

Bite-size talk on the Javascript Stacktrace project



Total Views
Slideshare-icon Views on SlideShare
Embed Views



2 Embeds 4 2 2



Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • <br />
  • Do you write any JavaScript? Does your web app have to behave in Internet Explorer? <br />
  • This is a Javascript developer&#x2019;s nightmare. Don&#x2019;t you love IE? <br />
  • Open up Firebug, try to reproduce the bug... and come to the realization that you&#x2019;ll have to debug it in IE. <br />
  • Unfortunately, the developer tools available for IE aren&#x2019;t always that helpful. At this point you&#x2019;re reduced to console.log statements or even... *gasp* alerts. <br />
  • What if you had a way of knowing what was called leading up to the error automatically? <br />
  • <br />
  • An array of strings containing function names, files, line numbers and arguments <br />
  • Obviously this project is open-source or I wouldn&#x2019;t be speaking to you tonight. <br /> So you have no excuses not to use it! <br />
  • 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 <br />
  • The secret sauce here is that every function has a reference to it&#x2019;s calling function, that every function maintains a reference to passed parameters <br />
  • Good browsers have Error objects that have a function stack complete with files and line numbers! <br />
  • 3 simple steps to get this working: Include stacktrace.js, call printStackTrace() and do whatever you want with it. <br /> In the previous example I called it within window.onerror <br />
  • You can&#x2019;t get everything in all circumstances. Only gives you where the problem is, not what. Not interactive without a console. <br />
  • However, it is one more tool in your toolbox, and it turns out a bunch of people think it&#x2019;s useful enough. <br />
  • I know a lot of you attended my talk in February, so for you I have a sneak peek of things to come <br />
  • 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 <br />
  • It turns out it usually doesn&#x2019;t matter HOW you do it as long as you fulfill a need. <br />
  • Using QUnit for unit testing and to test lots of browsers visually encouraged everyone to make code tweaks without fear! <br />
  • 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 <br />
  • Now go check out the project! Hit the shortlink here or just Google &#x201C;Javascript Stacktrace&#x201D; and it&#x2019;s the first result! <br />
  • <br />

Javascript Stacktrace Ignite Javascript Stacktrace Ignite Presentation Transcript

  • 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
  • [ ] Blog: Twitter: @eriwen Email: © 2010 Eric Wendelin