2

例如，假设我们有一个用于下载名为 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 下载的目标（类似于 ）。

幸运的是，在调试和随机跳过代码时，我发现第 289 行显示为

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

当我将鼠标悬停在表达式中的字母 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'是我应该知道开始寻找的东西。如何搜索对此类“说明”的引用？

4

1 回答 1

2

在单击按钮之前，打开 Web Inspector 并转到 Sources 面板。按下暂停按钮，然后单击下载按钮。JavaScript 调试器将在事件处理程序上中断。单步执行代码，直到到达实际的处理程序：

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

瞧。

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

于 2013-05-02T04:37:59.827 回答