如何在 JavaScript 函数调用发生时查看它们
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5671794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to view JavaScript function calls as they occur
提问by styfle
Is it possible to view JavaScript function calls in the browser's JavaScript console? I know you can view XHR, but can you view function calls?
是否可以在浏览器的 JavaScript 控制台中查看 JavaScript 函数调用?我知道您可以查看 XHR,但是您可以查看函数调用吗?
For example, I hover my mouse over some element on a page and a div pops up. I know there was a JavaScript function that was called to show the popup so it would be nice to be able to view this call in the console so I can see what function was called.
例如,我将鼠标悬停在页面上的某个元素上,然后弹出一个 div。我知道有一个 JavaScript 函数被调用来显示弹出窗口,所以能够在控制台中查看这个调用会很好,这样我就可以看到调用了什么函数。
Am I missing something or is this not possible?
我错过了什么或者这是不可能的吗?
采纳答案by victorhooi
So basically you want to view JS calls in real-time?
所以基本上你想实时查看JS调用?
The Firebug extension on Firefox offers that (http://getfirebug.com/javascript).
Firefox 上的 Firebug 扩展提供了这一点 ( http://getfirebug.com/javascript)。
Basically, what you want to do is find your function within your code, then set a breakpoint on it. You should then be able to step through execution on it, just like a normal debugger. It shouldn't be hard to find the JS function associated with a and a particular event (e.g. mouseover) on that - is this page in question using straight JS or a framework? And if so, which one?
基本上,您要做的是在代码中找到您的函数,然后在其上设置断点。然后您应该能够逐步执行它,就像一个普通的调试器一样。应该不难找到与 a 和特定事件(例如鼠标悬停)相关联的 JS 函数 - 此页面是否使用直接 JS 或框架?如果有,是哪一个?
Google Chrome's built-in developer tools offer a smaller subset - depending on what you want, the Profile tab on it might be useful?
Google Chrome 的内置开发人员工具提供了一个较小的子集 - 根据您的需要,其上的“个人资料”选项卡可能有用吗?
What exactly do you need to trace this JS function for? We might be able to recommend a better tool for you based on your particular need.
你到底需要跟踪这个 JS 函数做什么?我们或许可以根据您的特定需求为您推荐更好的工具。
回答by daniellmb
Check into the Firebug Profileryou can use it to see a break down of what's going on without having to manually add in console.log
statements.
检查Firebug Profiler,您可以使用它查看正在发生的事情的分解,而无需手动添加console.log
语句。
To use the profiler, just go to the Console tab and click the "Profile" button. Then use your app for a bit or reload the page and then click the "Profile" button again. You'll then see a detailed report that shows what functions were calledand how much time each one took.
要使用分析器,只需转到控制台选项卡并单击“配置文件”按钮。然后稍微使用您的应用程序或重新加载页面,然后再次单击“个人资料”按钮。然后,您将看到一份详细报告,其中显示调用了哪些函数以及每个函数花费了多少时间。
http://michaelsync.net/2007/09/10/firebug-tutorial-logging-profiling-and-commandline-part-ii
http://michaelsync.net/2007/09/10/firebug-tutorial-logging-profiling-and-commandline-part-ii
回答by alex
Not unless you explicitly attach that information to the DOM.
除非您明确地将该信息附加到 DOM 中。
You can, however, set breakpoints in the developers tools for some browsers, such as Safari, Chrome and Firebug for Firefox.
但是,您可以在某些浏览器的开发人员工具中设置断点,例如 Safari、Chrome 和 Firebug for Firefox。