6

这是一个相当复杂的问题,用目前可用的东西可能根本不可能,但如果有一种简单的方法来做到这一点,那将是巨大的。

我正在 Chrome 中调试一些 JavaScript,因为它是非常受事件驱动的,所以我更喜欢获取代码的跟踪报告(调用了什么等)而不是断点。因此,无论我在哪里留下断点,我都希望看到本地函数名称和参数。

我能得到的最接近的方法是在其中放置一个条件断点,如下所示:

样品跟踪

这种方法有两个大问题:

  1. 将其粘贴到每个断点中太麻烦了。如果可以选择它作为每个断点的默认操作,人们将更有可能使用它。
  2. 在 Google Chrome 中,日志调用会被触发两次。

关于克服这些问题的任何想法?我认为在 IE中使用 VS可能是可行的,但那里的 UI 似乎同样繁琐。

4

3 回答 3

3

IE11 现在具有独立于 Visual Studio 的“跟踪点”。他们完全按照你三年前的要求去做。我还没有在 Chrome 或任何其他浏览器中看到它们,但希望它们很快就会流行起来!

于 2015-03-25T21:32:02.373 回答
1

我发现的最佳选择是在 Chrome 的 Javascript 面板中编辑 javascript 代码,添加一个 console.log。

它仅在页面加载后才能工作(除非您可以在刷新后放置一个断点然后添加日志行)并且(更糟糕的是)您每次重新加载页面时都必须这样做。

祝您搜索顺利!

于 2012-04-10T15:04:20.880 回答
0

我找不到可以做到这一点的东西,所以我写了自己的.

现在,我不再不断地插入和删除 console.log 调用,而是保持登录状态,只在必要时观看。

警告:下面的特定代码未经测试。

var debug = TraceJS.GetLogger("debug", "mousemove");
$('div').mousemove(function(evt) {
     debug(this.id, evt);
});

每次鼠标移动到 DIV 上时,它都会生成一个标记为 ["mousemove", {id of that element}] 的日志事件

有趣的部分是能够有选择地观看事件。如果您只想查看元素 #a 的 mousemove 事件,请在控制台中调用以下命令:

TraceJS('a');

当我想查看所有 mousemove 事件时,您可以调用:

TraceJS('mousemove');

仅显示与您的过滤器匹配的事件。如果您调用 TraceJS(无参数),则日志调用将停止显示。

于 2012-05-05T23:11:49.380 回答