当我们在网页上点击一个按钮时，可能想要查看这个按钮所调用的函数。Chrome 浏览器提供了强大的开发工具和控制台，可以帮助我们实现这一目标。
打开 Chrome 控制台
首先，在 Chrome 浏览器中打开要检查的网页，然后按下 F12 键或右键单击页面并选择“检查”。这将打开浏览器的开发工具面板。在开发工具面板中，可以看到许多选项卡，包括“Elements”、“Console”、“Sources”等。
在 Elements 面板中找到按钮
在 Elements 面板中，可以查看网页的 HTML 和 CSS 代码。在这里，可以使用鼠标浏览器或者 Ctrl + Shift + C 快捷键来选取想要查看的按钮。选中后，可以看到对应的 HTML 元素在 Elements 中被高亮显示。
在 Sources 面板中找到对应的事件监听函数
在 Sources 面板中，可以查看网页的 JavaScript 代码。在这里，可以找到与所选按钮相关的代码。如果该按钮有事件监听函数，那么可以在对应的 JavaScript 文件中找到该函数。
可以使用搜索功能来查找该函数。在 Sources 面板的右上角，有一个搜索框，可以输入函数名或者相关关键字。点击搜索结果中的链接，可以跳转到对应的代码行。
在 Console 面板中尝试调用函数
在 Console 面板中，可以直接输入 JavaScript 代码并执行。如果已经找到了所需的函数，可以在 Console 中直接调用该函数来测试其功能。例如，在 Console 中输入以下代码：
-------------
其中 myFunction() 为所选按钮调用的函数名。
示例代码
以下是一个简单的示例，演示如何查找网页中的按钮事件监听函数：
HTML 代码：
------- ------------------- -----------
JavaScript 代码：
-------- ------------- - ------------------- ----------- - ------------------------------------------------------------- -------------
在 Chrome 控制台中，可以使用以上步骤来查找 handleClick() 函数。
总结
通过使用 Chrome 浏览器的开发工具和控制台，可以轻松地找到网页中按钮所调用的函数。这是前端开发中非常有用的技能，可以帮助我们更好地理解和调试网页的行为。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28384