javascript - 如何跟踪哪个 Javascript 使用给定的 HTML 元素进行操作？

Question

我正在尝试了解模板的工作原理。如果我在浏览器中打开一个，我会看到一些元素。但如果我探索 HTML 代码 - 浏览器中出现的包含元素的容器只是空的。这很简单:这意味着那些容器由一些 JS 代码操作。但是我尝试在主 HTML 文档提到的所有 JS 文件中查找容器 ID，但没有成功。

我认为我需要一些工具来跟踪更改给定元素的 JS(放置断点或制作 HTML 更改日志...)。

有什么有用的方法可以做到这一点吗？

Answer 1

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

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