如何单步执行绑定到按钮的javascript代码

我想检查一下当我在一个复杂的网站上点击一个按钮时运行的javascript代码，这个网站不是我创建的

有没有一个简单的方法可以做到这一点

有很多javascript文件，所以我不确定如何确定哪些代码绑定到按钮

--编辑--

我实际上在使用一个SharePoint网站。下面是按钮的外观：

<a unselectable="on" href="javascript:;" onclick="return false;" class="ms-cui-ctl-large " aria-describedby="Ribbon.Library.Actions.ConnectToClient_ToolTip" mscui:controltype="Button" role="button" id="Ribbon.Library.Actions.ConnectToClient-Large">
    <span unselectable="on" class="ms-cui-ctl-largeIconContainer">
        <span unselectable="on" class=" ms-cui-img-32by32 ms-cui-img-cont-float">
            <img unselectable="on" alt="" src="/_layouts/15/1033/images/formatmap32x32.png?rev=23" style="top: -307px; left: -137px;">
        </span>
    </span>
    <span unselectable="on" class="ms-cui-ctl-largelabel">Connect to<br>Outlook</span>
</a>

锚定标记有一个id。如何在开发工具中搜索所有源文件？有34个源javascript文件。我必须手动打开每一个吗

此外，我认为这是非常无用的，因为它可以通过类和任何其他CSS选择器绑定代码。我只是祈祷他们使用身份证吗

---

我有点希望开发工具能够返回绑定到按钮的所有代码。

遵循以下简单步骤：

如果您使用的是Firefox，请打开

Firebug

Script

选项卡（如果您还没有Firebug插件，请安装它），如果您使用的是Chrome，请打开

Developer Tools

选项卡（Chrome默认有开发者工具，无需安装）

在HTML中找到按钮的代码

单击左侧，设置按钮的

断点

现在重新加载页面。页面将在断点处停止

现在点击

F10

，逐步浏览代码

---

希望这有帮助。：）

使用web开发者工具，这是分析和调试JavaScript的最简单方法。

---

Web developer tools插件随许多浏览器一起提供，如Firefox、Google chrome等，如果其他所有工具都失败了，并且您还需要学习一些非常复杂的代码：

使用探查器工具

---

在Chrome中，启动探查器，然后点击按钮，然后停止探查器。它将列出所有被调用的内容。如果您使用的是jQuery，您可能需要查看堆栈以找出jQuery调用代码的位置，但这并不难。

如果打开DevTools并检查按钮，您将获得列出此元素样式的选项卡。此选项卡旁边是“事件侦听器”选项卡。列出了所有文件中当前元素的所有事件侦听器。您可以在附加事件侦听器的代码中放置断点

---

遗憾的是，如果站点使用jQuery，这会有点复杂，因为所有订阅都是在jQuery文件中完成的，但您仍然可以使用F10/F11对其进行迭代。

谢谢您的回复。我熟悉Chrome开发工具。但我被第二点困住了。如何找到按钮的代码？@MattFitzmaurice从开始浏览HTML，您将找到按钮。：）谢谢。我可以通过“检查元件”轻松找到按钮。我找不到相关的代码。你可以在上面的答案中看到，我需要使用“事件侦听器”。谢谢。我熟悉Chrome开发工具。如何定位链接到按钮的代码？查找按钮id并查找附加到该按钮的JavaScript函数。示例如果您想要按钮单击事件，请查找该按钮附带的单击功能。我没有注意到事件侦听器选项卡。那就应该成功了！