Download to read offline
![In a nutshell...
printStackTrace()
return [
‘calledFromFoo(my.js:32)’,
‘foo(my.js:23)’,
‘callsFoo(my.js:14)’,
‘{anonymous}(other.js:1)’,
...
]](https://image.slidesharecdn.com/stacktraceignite-101006201026-phpapp02/85/Javascript-Stacktrace-Ignite-8-320.jpg)
![su.pr/AH9ShK
[ http://github.com/emwendelin/javascript-stacktrace ]
Blog: eriwen.com
Twitter: @eriwen
Email: emwendelin@gmail.com
© 2010 Eric Wendelin](https://image.slidesharecdn.com/stacktraceignite-101006201026-phpapp02/85/Javascript-Stacktrace-Ignite-21-320.jpg)
Uploaded byEric Wendelin
Javascript Stacktrace Ignite
The document introduces the JavaScript Stacktrace Project, a micro-library for getting function stack traces across web browsers. It works by calling arguments.callee.caller and arguments.callee.caller.arguments to get the calling function and passed parameters. It returns an array of function calls that can be joined into a string and shown as an error message. The project is open source and licensed to the public domain, with contributions from over 5 developers and 130+ watchers on GitHub. Future plans include adding IE9 support and instrumenting functions to always print stack traces.
Javascript Stacktrace Ignite
- 1. The JavaScript Stacktrace Project Making cross-browser compatibility suck a little less © 2010 Eric Wendelin
- 2. Let me saythis upfront... You care about this project* * Probably
- 3.
- 4.
- 5. IE Developer Tools Yay... won’t this be fun?
- 6. What if youcould get...
- 7. Javascript Stacktrace Micro-library forgetting function stack traces in all* web browsers * NOTE: Must actually support Javascript
- 8. In a nutshell... printStackTrace() return[ ‘calledFromFoo(my.js:32)’, ‘foo(my.js:23)’, ‘callsFoo(my.js:14)’, ‘{anonymous}(other.js:1)’, ... ]
- 9. Licensed to thepublic domain ~1.8k minified and gzipped
- 10.
- 11. How it works functionfoo() { //calling function! arguments.callee.caller //passed parameters! arguments.callee.caller.arguments }
- 12. Bonus: Error objects try{ (0)(); // produce an error } catch (error) { error.stack; // Firefox, Chrome error.stacktrace || error.message; // Opera }
- 13. Step 1: <script type=”text/javascript” src=”stacktrace.js”></script> Step2: var trace = printStackTrace(); Step 3: showError(trace.join(‘n’));
- 15. • Now at5 contributors • 130+ watchers on GitHub
- 16. Coming soon... • IE9support • Function instrumenting to always print a stacktrace when called (done!) • Real-time traces (maybe! - not as easy as you think ;)
- 17. Secrets to open-source success
- 18. Good idea >good skill
- 19. Unit tests help otherscontribute
- 20.
- 21. su.pr/AH9ShK [ http://github.com/emwendelin/javascript-stacktrace ] Blog:eriwen.com Twitter: @eriwen Email: emwendelin@gmail.com © 2010 Eric Wendelin
Editor's Notes
- #3 Do you write any JavaScript? Does your web app have to behave in Internet Explorer?
- #4 This is a Javascript developer&#x2019;s nightmare. Don&#x2019;t you love IE?
- #5 Open up Firebug, try to reproduce the bug... and come to the realization that you&#x2019;ll have to debug it in IE.
- #6 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.
- #7 What if you had a way of knowing what was called leading up to the error automatically?
- #9 An array of strings containing function names, files, line numbers and arguments
- #10 Obviously this project is open-source or I wouldn&#x2019;t be speaking to you tonight. So you have no excuses not to use it!
- #11 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
- #12 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
- #13 Good browsers have Error objects that have a function stack complete with files and line numbers!
- #14 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
- #15 You can&#x2019;t get everything in all circumstances. Only gives you where the problem is, not what. Not interactive without a console.
- #16 However, it is one more tool in your toolbox, and it turns out a bunch of people think it&#x2019;s useful enough.
- #17 I know a lot of you attended my talk in February, so for you I have a sneak peek of things to come
- #18 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
- #19 It turns out it usually doesn&#x2019;t matter HOW you do it as long as you fulfill a need.
- #20 Using QUnit for unit testing and Browsershots.org to test lots of browsers visually encouraged everyone to make code tweaks without fear!
- #21 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
- #22 Now go check out the project! Hit the shortlink here or just Google &#x201C;Javascript Stacktrace&#x201D; and it&#x2019;s the first result!