`
netcome
  • 浏览: 479534 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

A Javascript stacktrace in any browser

阅读更多

 

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 += &quot; at &quot; + 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(&quot;function&quot;) + 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(&quot;blah&quot;);
}
 
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!

分享到:
评论

相关推荐

    asp.net(c#)的异常处理,StackTrace说明,获得错误位置

    利用 Exception 的StackTrace 属性获得错误的文件的位置(文件名,行号),并将错误信息保存在一个.config的文件里,内容有: 如何获取错误 如何获取错误的位置,多层开发时,在类用应用此法方便查错 如保获取站点的...

    前端项目-stacktrace.js.zip

    stacktrace.js是一个专门用于获取JavaScript堆栈跟踪的开源库,它的核心价值在于其框架不可知性。这意味着无论你使用的是Angular、React、Vue还是其他任何前端框架,stacktrace.js都能够无缝地与之集成,提供一致的...

    matlab开发-用StackTrace替换键盘

    "用StackTrace替换键盘"是一种优化的调试策略,它允许开发者在不中断程序执行的情况下,获取代码运行时的堆栈跟踪信息,从而更好地理解程序执行路径。 首先,我们需要了解什么是堆栈跟踪(StackTrace)。堆栈跟踪是...

    stacktrace.js:在所有Web浏览器中生成,解析和增强JavaScript堆栈跟踪

    stacktrace.js 在所有浏览器中生成,解析和增强JavaScript堆栈跟踪 使用导致错误(或您指定的任何条件)的函数调用来调试和配置JavaScript。 stacktrace.js使用浏览器的Error.stack机制生成堆栈跟踪,对其进行...

    Atom-stacktrace,用于导航stacktraces的atom包。通过在github上创建一个帐户为smashwilson/stacktrace开发做出贡献。.zip

    Atom-stacktrace是一款专门为Atom文本编辑器设计的插件,它主要功能是帮助用户更有效地浏览和导航程序中的堆栈跟踪(stacktraces)。这个插件由开发者smashwilson在GitHub上维护,允许社区成员通过贡献来持续改进其...

    A beautiful stack trace pretty printer for C++.zip

    "A beautiful stack trace pretty printer for C++" 是一个专门针对C++设计的美观且易读的栈跟踪打印工具,它优化了默认的栈回溯输出,使其更加清晰、易懂。 栈跟踪通常包含以下几个关键知识点: 1. **栈帧(Stack...

    Android studio 出现错误Run with --stacktrace option to get the stack trace. Run with --info or --debu

    主要介绍了 Android studio 出现错误Run with --stacktrace option to get the stack trace. Run with --info or --debu的相关资料,需要的朋友可以参考下

    JCL_Debug_StackTrace_Demo

    标题“JCL_Debug_StackTrace_Demo”表明这是一个关于使用JCL进行调试和显示堆栈跟踪的示例项目。堆栈跟踪是在程序运行时记录函数调用序列的一种技术,它可以帮助开发者迅速定位错误发生的具体位置。在Delphi7中,JCL...

    前端开源库-atma-loader-stacktrace

    "atma-loader-stacktrace"是一个专为前端开发者设计的开源库,其核心功能是处理和增强JavaScript运行时的堆栈跟踪信息。这个库的主要目标是为编译和缩小后的脚本提供清晰、有用的堆栈跟踪,帮助开发者更好地诊断和...

    cpp-stacktrace:快速简单的C ++堆栈跟踪

    在C++编程中,堆栈跟踪(stack trace)是一个非常重要的工具,它允许开发者查看程序运行时调用函数的顺序,这对于调试和问题排查极为有用。`cpp-stacktrace`项目提供了一种快速且简单的方式来实现C++的堆栈跟踪功能...

    开源项目-palantir-stacktrace.zip

    "palantir-stacktrace.zip" 是一个开源项目,包含了Palantir团队开发的StackTrace库。这个库专门设计用来管理和解析Java应用程序中的堆栈跟踪信息,这对于故障排查、性能优化以及日志分析至关重要。 在Java编程中,...

    axios-better-stacktrace:Axios插件,可为axios错误提供更好的堆栈跟踪

    安装NPM npm install axios-better-stacktrace 纱yarn add axios-better-stacktrace笔记已使用axios 0.21.0进行了测试。用法// CommonJS// const axiosBetterStacktrace = require('axios-better-stacktrace')....

    git-stacktrace:轻松找出哪个git commit导致了给定的stacktrace

    在开发过程中,我们经常遇到因某个特定提交导致的错误或堆栈跟踪(stacktrace)。为了方便地定位问题,`git-stacktrace` 工具应运而生。这个工具是基于 Python 实现的,利用 GitPython 库,它能够帮助开发者快速识别...

    Python库 | git-stacktrace-0.8.0.tar.gz

    `git-stacktrace`是一个针对Git的Python库,其版本为0.8.0,封装了处理Git日志和堆栈跟踪的实用功能。这个库特别适用于那些需要在Git版本控制系统中分析错误和异常情况的开发者。 在Git的日常使用中,开发者常常...

    dotnet 警惕使用 StackTrace 加获取方法标记 Attribute 特性在 Release 下被内联.rar

    标题中的“dotnet 警惕使用 StackTrace 加获取方法标记 Attribute 特性在 Release 下被内联”提示我们关注的是.NET(dotnet)开发中关于StackTrace类的一个问题,特别是如何在Release模式下正确处理方法的Attribute...

    mybatis-springMapper太多导致StackOverflow_StackTrace

    详细请参见文章 : https://blog.csdn.net/u011039332/article/details/83045246

    从StackTrace获取调用程序集

    标题“从StackTrace获取调用程序集”揭示了这个主题,它主要关注如何利用C#编程语言和.NET框架中的反射(Reflection)功能来实现这一目标。本文将深入探讨这一技术,以及它在实际开发中的应用。 首先,让我们理解...

    improved-android-remote-stacktrace:改进的Android远程Stacktrace库

    Android远程Stacktrace:改进 该项目是,它添加了许多重要功能: 可定制的接口,用于处理堆栈跟踪 通过将堆栈跟踪保存到自己的目录而不是应用程序的根文档目录,从而更好地处理文件系统 允许可选的调试日志记录,这...

Global site tag (gtag.js) - Google Analytics