如何找到 JS 函数在做什么？

Question

出于学习目的，我正在使用网页版 Whatsapp (https://web.whatsapp.com/) 进行一些测试。我发现当我在文本框中键入表情符号快捷方式时，应用程序会自动将其更改为对应的表情符号。例如，如果我输入

(y)

它将被替换为

我正在努力学习提高我的 JS 技能是：如何找出执行此操作的函数以及如何手动调用该函数。

我试图在 Devtools 上找到它，但没有成功。

有什么想法吗？

谢谢

Answer 1

我正在回答您关于找出可能导致 DOM 更改的问题的问题。我没有回答你关于实际上是什么导致了这种变化的衍生问题。

利用浏览器的开发工具。您可以中断对 DOM 元素的更改。你已经标记了google-chrome-devtools，所以以这个例子为例：

1. 导航到“元素”面板
2. 右键单击要监控的元素
3. 点击“中断→子树修改”
4. 触发更改
5. 然后，您将在“源”面板中，在导致修改的任何代码上都有一个活动断点
6. 从那里，导航调用堆栈，直到找到您要查找的任何级别的函数