如何在代码中追踪 JavaScript 动态创建的元素的起源？

Question

拥有 SAPUI5 应用程序。由xml创建的Html视图。 JavaScript 控制器。该应用程序的一些元素，例如按钮是在相应视图的控制器中动态创建的。 IE。无法使用元素的 id 在控制器中获取它，因为 id 是动态创建的。想要获取应用程序的那些动态创建的元素来修改它们，例如修改按钮。将动态创建的元素跟踪回其创建位置的代码的最佳方法是什么？例如。如何在 JavaScript 控制器中追踪按钮回到它的起源？这是一个巨大的应用程序，一个视图有多个控制器。我不只是懒。

Answer 1

组件渲染器类中的

render

函数（最终）创建 DOM 元素。您可以像这样向其中注入调试器语句：

let __buttonRender = sap.m.ButtonRenderer.render;

sap.m.ButtonRenderer.render = function() {
    let control = arguments[1];
    console.log('Creating button: ', control.sId);
    debugger;
    return __buttonRender.apply(this, arguments);
}

你或许可以根据这里的Id修改控制对象。我不太确定你的最终目标是什么。渲染器可能从 XML 获取属性和数据，因此如果您想修改按钮，我会在数据源中进行操作。上面的代码可以让你在模型到达 DOM 之前对其进行破解，但这有点令人讨厌。

Answer 2

对于那些也在寻找这个问题的人，就像我刚才所做的那样，只有 Chrome 中有一个解决方案。对于调试来说可能就足够了。

来源：https://devtoolstips.org/tips/en/capture-node-creation-stacks/

本质上，在Chrome的DevTools中，您可以启用实验“捕获节点创建堆栈”。启用它并按照建议重新加载 DevTools 后，您可以在 DevTools 中选择可疑节点，并在右侧的单独选项卡中查看其创建堆栈跟踪，就像其样式、布局等一样。