UPDATE: You’ll want to check out the updated post with new code, tests, and compatibility.
Chances are that if you’ve done any significant Javascript work, you’ve run into a situation where part of the debugging process could be much improved if you just had the function call stack.
I’m going to give you some ways of doing this with and without the popular Firebugextension and have some examples of their uses.
Without Firebug and friends? Using IE?
Sometimes s**t only happens in other browsers. Here’s how to create/log your own stack trace. Put this code in an accessible place in your Javascript file(s) and call theprintStackTrace() function inside any function.
function printStackTrace() {
var callstack = [];
var isCallstackPopulated = false;
try {
i.dont.exist+=0; //doesn't exist- that's the point
} catch(e) {
if (e.stack) { //Firefox
var lines = e.stack.split('\n');
for (var i=0, len=lines.length; i<len; i++) {
if (lines[i].match(/^\s*[A-Za-z0-9\-_\$]+\(/)) {
callstack.push(lines[i]);
}
}
//Remove call to printStackTrace()
callstack.shift();
isCallstackPopulated = true;
}
else if (window.opera && e.message) { //Opera
var lines = e.message.split('\n');
for (var i=0, len=lines.length; i<len; i++) {
if (lines[i].match(/^\s*[A-Za-z0-9\-_\$]+\(/)) {
var entry = lines[i];
//Append next line also since it has the file info
if (lines[i+1]) {
entry += " at " + lines[i+1];
i++;
}
callstack.push(entry);
}
}
//Remove call to printStackTrace()
callstack.shift();
isCallstackPopulated = true;
}
}
if (!isCallstackPopulated) { //IE and Safari
var currentFunction = arguments.callee.caller;
while (currentFunction) {
var fn = currentFunction.toString();
var fname = fn.substring(fn.indexOf("function") + 8, fn.indexOf('')) || 'anonymous';
callstack.push(fname);
currentFunction = currentFunction.caller;
}
}
output(callstack);
}
function output(arr) {
//Optput however you want
alert(arr.join('\n\n'));
}
UPDATE: A few others have taken and upgraded the script with a bunch of new features. His changes and mine are now on GitHub. Contribute!
It’s ugly, but this works for the latest versions of IE, Firefox, Opera, and Safari. Firefox and Opera give you file names and line numbers when they can, but I couldn’t find a mechanism to get the same from IE and Opera. Hopefully the inline comments describe enough of what is going on. If not, ask :).
Try it out
Give it a shot by clicking here. It will run the snippet below.
function foo() {
var blah;
bar("blah");
}
function bar(blah) {
var stuff;
thing();
}
function thing() {
if (true) { //your error condition here
printStackTrace();
}
}
foo();
Obvious easy way: Firebug (and Drosera and Dragonfly)
You can easily get a stack trace at any time by calling console.trace()
in your Javascript or in the Firebug console.
ot only will it tell you which functions are on the stack, but it will include the value of each argument that was passed to each function.
This is obviously the best way to go if you are using Firefox.
Furthermore, these tools allow you to dig deeper. Of course, we can’t count on them for ALL situations.
Conclusion
I hope you find this useful. If you have any suggestions/improvements I’d like to hear them! Also all kidding aside, I worked pretty hard on this function, so I’d really appreciate if you’d help me share this with more people. Thanks!
分享到:
相关推荐
有时候当你的程序崩溃时能获得堆栈轨迹是很有用处的。很多人认为当程序崩溃时用C/C++难以获知程序在哪出现了错误。在很大程度上,C/C++的确难以做到,但是调试器却能做到这一点。下文给出的程序可以做到不用调试器却...
利用 Exception 的StackTrace 属性获得错误的文件的位置(文件名,行号),并将错误信息保存在一个.config的文件里,内容有: 如何获取错误 如何获取错误的位置,多层开发时,在类用应用此法方便查错 如保获取站点的...
matlab开发-用StackTrace替换键盘。显示堆栈跟踪,显示使用键盘的位置
A beautiful stack trace pretty printer for C++
前端项目-stacktrace.js,框架不可知的微型库,用于在所有环境中获取堆栈跟踪
stacktrace.js 在所有浏览器中生成,解析和增强JavaScript堆栈跟踪 使用导致错误(或您指定的任何条件)的函数调用来调试和配置JavaScript。 stacktrace.js使用浏览器的Error.stack机制生成堆栈跟踪,对其进行...
Android studio Run with –stacktrace option to get the stack trace. Run with –info or –debu 提示信息 Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get ...
主要介绍了 Android studio 出现错误Run with --stacktrace option to get the stack trace. Run with --info or --debu的相关资料,需要的朋友可以参考下
Atom-stacktrace.zip,用于导航stacktraces的atom包。原子的stacktrace,atom是一个用web技术构建的开源文本编辑器。
详细请参见文章 : https://blog.csdn.net/u011039332/article/details/83045246
安装NPM npm install axios-better-stacktrace 纱yarn add axios-better-stacktrace笔记已使用axios 0.21.0进行了测试。用法// CommonJS// const axiosBetterStacktrace = require('axios-better-stacktrace')....
开源项目-palantir-stacktrace.zip,Palantir的StackTrace库
前端开源库-atma-loader-stacktraceATMA加载程序stacktrace,用于编译/缩小脚本的stacktrace
git-stacktrace:轻松找出哪个git commit导致了给定的stacktrace
Android远程Stacktrace:改进 该项目是,它添加了许多重要功能: 可定制的接口,用于处理堆栈跟踪 通过将堆栈跟踪保存到自己的目录而不是应用程序的根文档目录,从而更好地处理文件系统 允许可选的调试日志记录,这...
vim-stacktrace-Vim脚本的Stacktrace 信用证:/ vim-stacktrace提供了一种通过错误信息(例如v:throwpoint ,错误消息)获取调用堆栈或构建堆栈v:throwpoint 。 您可以从结果中创建快速修复列表或位置列表。 vim...
官方离线安装包,亲测可用。使用rpm -ivh [rpm完整包名] 进行安装
这是从 google 代码导出的 android 崩溃报告自动上传项目的副本。 android-remote-stacktrace 从 code.google.com/p/android-remote-stacktrace 自动导出
python库。 资源全名:git-stacktrace-0.8.0.tar.gz