您如何调试网站上的按钮功能？

Question

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

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

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

如何使用调试工具（例如google chrome的dev-tools）找到此下载链接的来源？

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

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

这将向您显示按下按钮时执行的javascript代码（我认为至少是这样）。 从那里可以按下看起来像两个大括号“ {}”的按钮，以使javascript代码看起来更漂亮。 但是在此阶段，我不确定要采取什么步骤来确定目标，以发现webapp在代码中的何处启动直接url的下载（这与相似）。

靠运气，当debuggnig并随机跳过代码时，我找到了289行

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

当我将鼠标悬停在表达式a.call(s,c);的字母a上时a.call(s,c); 弹出窗口显示直接下载的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检查器并转到“源”面板。 按 按钮，然后单击下载按钮。 JavaScript调试器将在事件处理程序上中断。 逐步执行代码，直到到达实际的处理程序为止：

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

瞧。

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