如何跟踪哪些Javascript操作给定的HTML元素

How to track which Javascript manipulates with a given HTML element?

本文关键字：操作元素 HTML Javascript 何跟踪跟踪更新时间：2023-09-26

我想了解模板是如何工作的。如果我在浏览器中打开一个，我将看到一些元素。但是，如果我研究一下HTML代码，就会发现浏览器中显示的包含元素的容器是空的。这很简单:这意味着这些容器被一些JS代码操纵。然而，我试图在主HTML文档提到的所有JS文件中找到容器ID，但没有成功。

我认为我需要一些工具，这将允许我跟踪JS改变给定元素(放置一个断点或使HTML更改日志…)。

有什么有用的方法来做这件事吗?

听起来你想要的只是Web开发人员的控制台。在Chrome浏览器中，可以通过Ctrl+Alt+J (Cmd而不是mac上的Ctrl)和Firefox中使用Ctrl/Cmd+Alt+K。或者，只需在浏览器的选项/设置菜单中找到这些按钮。

打开控制台后，单击鼠标指针图标以手动选择屏幕上您想要检查的任何元素。您还可以直接在HTML选项卡上查看HTML DOM树。这一切都是非常可视化，互动性和直观的，所以只要探索一点点。

你可以在javascript中使用console.log('// your breakpoint text');。它将显示在浏览器控制台中。这样你就可以跟踪javascript的执行流程。

但是跟踪过程取决于你。你必须手动操作。试着从头开始放置console.log()。

在chrome的开发工具。找到标题为"控制台"的选项卡。您的断点文本将显示在那里。

可以使用调试器;当你把HTML添加到dom中，通过使用控制台，你可以实时检查你的javascript是如何运行的。

另一种方法是在下一次代码执行时不断发出警告，直到它离开DOM