你如何调试按钮在网站上的作用？

Question

例如，假设我们有这个网站下载名为Aptana的工具，

http://www.aptana.com/products/studio3/download

在该页面的底部，有一个蓝色的大按钮，上面写着“下载”的效果。但是，当您右键单击该按钮并选择复制地址并粘贴它时，您会发现它不是一个简单的html链接，因为它只会导致当前URL加上井号。 javascript中发生了一些事情，它从一些下载URL开始下载。

如何使用google chrome的dev-tools等debuging工具找到这个下载链接的来源？

我理解第一步（在chrome中）是右键单击按钮，选择

Inspect Element -->  Event Listeners (right pane) --> click --> main.js (link)

这将显示按下按钮时执行的javascript代码（至少我认为）。从那里可以按下一个看起来像两个花括号“{}”的按钮，使javascript代码看起来更漂亮。但是在这个阶段，我不确定采取了哪些步骤来找出发现代码在webapp中启动直接URL下载的位置的目标（这是一直行事）。

通过运气调试，随机调试代码，我发现第289行读取

if (Q) {
     for (var a, b = 0; a = Q[b++]; )
         a.call(s, c);
     Q = null
}

当我在表达式a.call(s,c);中鼠标悬停字母a时，弹出窗口显示直接下载的http链接。

function (){
    document.location = "http://download.aptana.com/studio3/standalone/3.4.0/linux/Aptana_Studio_3_Setup_Linux_x86_3.4.0.zip";
}

在这里深入了解事物的专业方法是什么？是否应该识别框架/库标记？关于如何通过这样的不熟悉的代码，是否有任何理论？是否有任何捷径可以用来帮助我，但错过了？我开始认为短语'document.location'是我应该知道的开始寻找的东西。如何搜索对这些“指令”的引用？

Answer 1

在单击按钮之前，打开Web Inspector并转到“源”面板。按下按钮，然后单击下载按钮。 JavaScript调试器将在事件处理程序上中断。逐步完成代码，直到找到实际的处理程序：

// submit download form
$(".submit-aptana-download-form").click(function(){
  $("#aptana_download_form").submit();
  return false;
});

瞧。

至于框架，一旦进入调试器，从查看名称，我可以告诉它使用jQuery。您可以使用类似的启发式方法。