是否可以使用 Firebug 分析内置的 JavaScript 函数？

Posted 2023-03-06

【中文标题】是否可以使用 Firebug 分析内置的 JavaScript 函数？

【英文标题】：Is it possible to profile built-in JavaScript functions with Firebug?

【发布时间】：2011-03-24 04:49:15

【问题描述】：

我正在用 html5 构建一个图形密集型站点，该站点大量使用了画布上下文的 drawImage() 函数。在 Windows 7 上的 IE9 中，性能很流畅，但在 Firefox 4 中，事情变得不稳定。我正在尝试隔离瓶颈，以便开始优化。

如果我使用 Firebug 1.7.0 的 javascript 性能分析功能，我可以看到我自己的函数的统计信息，但我也希望看到对内置 JavaScript 函数的调用。有没有办法在 Firebug 或其他工具中做到这一点？

作为一种解决方法，我想我可以通过将事物分解为许多微小的函数来使分析粒度更细，但我宁愿我的设计不被分析的容易程度所驱动。

更新：回过头来看这个问题，我突然想到，有问题的内置函数并不是真正的 JavaScript 函数，而是宿主提供的函数。在这种情况下，它们是来自浏览器的 DOM 对象。只是想我会澄清一下技术细节。

【参考方案1】：

我上次使用它 Firebug 不提供分析本机代码的能力。

您可以做的是创建自己的函数，该函数只调用您想要调用的本机部分。依次为代码：

ctx.fillRect(50,50,50,50);`

进入：

// wrap in function
function fillR() 
ctx.fillRect(50,50,50,50);
;

// call it immediately afterwards
fillR();

然后您可以获取 fillR 的统计信息。不是最好的解决方法，但它可能足够有用。

【讨论】：

是的，我考虑过这种解决方法（“将事物分解为许多微小的功能”），但如果可能的话，我想避免它。我们拭目以待。

【参考方案2】：

您可以尝试使用 Mozilla 的 JS 调试器 Venkman。目前 addons.mozilla.org 上的版本在 Firefox 4.0 中被破坏。

您可以通过 mercurial 获取最新版本，该版本适用于 Firefox 4.0：

hg clone http://hg.mozilla.org/venkman/
cd venkman/xpi
./makexpi.py
firefox venkman-0.9.88.1.xpi

【讨论】：

很好的建议。您确定最新版本的 Venkman 支持 FF 4.0 吗？我可以试试这个。

是的，最新的 Mercurial 版本确实有效。实际上，像你一样，我正在尝试调试一些画布的东西，虽然输出比 Firebug 更详细，但我仍然无法确定画布方法。

【参考方案3】：

在考虑了几天后，我想出了一个新的解决方案并写了一篇关于它的博客文章：

http://andrewtwest.com/2011/03/26/profiling-built-in-javascript-functions-with-firebug/

此方法执行以下操作：

检查 Firebug 控制台是否 已开放。 是否结合了覆盖和 包装原生函数 用户定义的函数。

这些步骤结合起来提供了一种分析 DOM 函数的方法，这种方法不会影响您的原始脚本代码，除非您正在调试。