Javascript 如何调试网站上按钮的功能?
比如说,我们有一个网站可以下载一个叫做Aptana的工具 在页面底部,有一个蓝色的大按钮,上面写着“下载”的意思。但是,当您右键单击该按钮并选择“复制地址”并粘贴它时,您会看到它不是一个简单的html链接,因为它只是指向当前URL加上磅符号。javascript中发生了一些事情,它从某个下载URL开始下载 如何使用调试工具(如google chrome的开发工具)定位此下载链接的来源 我知道第一步(在chrome中)是右键单击按钮,选择Javascript 如何调试网站上按钮的功能?,javascript,debugging,google-chrome,Javascript,Debugging,Google Chrome,比如说,我们有一个网站可以下载一个叫做Aptana的工具 在页面底部,有一个蓝色的大按钮,上面写着“下载”的意思。但是,当您右键单击该按钮并选择“复制地址”并粘贴它时,您会看到它不是一个简单的html链接,因为它只是指向当前URL加上磅符号。javascript中发生了一些事情,它从某个下载URL开始下载 如何使用调试工具(如google chrome的开发工具)定位此下载链接的来源 我知道第一步(在chrome中)是右键单击按钮,选择 Inspect Element --> Even
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上时,调用(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”这个短语是我应该知道的,我应该开始寻找它。如何查找对此类“说明”的引用 单击按钮之前,打开Web检查器并转到“源”面板。按下按钮,然后单击下载按钮。JavaScript调试器将在事件处理程序上中断。逐步执行代码,直到找到实际的处理程序:
// submit download form
$(".submit-aptana-download-form").click(function(){
$("#aptana_download_form").submit();
return false;
});
瞧
至于框架,从进入调试器后的名称来看,我可以看出它使用jQuery。您可能可以使用类似的启发式方法。我注意到文档.location
行来自我从$(“#aptana_下载_表单”)中获得的响应包。submit()所以我无法在源文档中搜索该代码片段。我通过使用chrome网络工具中的“网络”选项卡发现了这一点。我看到了。在使用匿名函数之前,有很多代码需要处理。为什么在它到达之前要经过这么多的代码呢。哦,我明白了,这就是我要介绍的jQuery,如果它是以后很容易识别的类型,那就好了(如果它不是最小化版本,它可能会更明显)。