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

Question

我想检查当我点击一个我没有创建的复杂网站中的按钮时运行的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选择器绑定代码。我只是祈祷他们使用了身份证吗？

我有点希望Dev Tools能够返回绑定到按钮的所有代码。

Answer 1

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

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

Answer 2

遵循以下简单步骤：

1. 如果您使用的是Firefox，请打开Firebug＆gt; Script标签（如果您还没有安装Firebug插件），如果您使用的是Chrome，请打开Developer Tools＆gt; Sources标签（Chrome默认使用开发者工具，不需要安装）
2. 在HTML
中找到按钮的代码
3. 点击左侧
，在按钮上设置breakpoint
4. 现在重新加载页面。页面将在断点处停止。
5. 现在点击F10逐步完成代码。

希望这会有所帮助。 ：）

Answer 3

使用Web开发人员工具，这是分析和调试JavaScript的最简单方法。 Web开发人员工具插件随附了许多浏览器，如Firefox，Google Chrome

Answer 4

如果所有其他方法都失败了，而且您仍然需要学习一些非常复杂的代码：

使用探查器工具。

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