任何方法来快速找出从什么Javascript文件和代码行一个自定义事件被调度?

Question

我希望能够找到JavaScript文件和代码行，其中自定义事件被分派。

假设我们有两个JavaScript文件A.js和B.js。我在行x处从A.js中定义和分派一个自定义事件，在行y处在B.js中侦听它

我可以跳入Chrome DevTools并运行monitorEvents($0)以找出事件"听到"的位置(eventListener在我的代码库中，即:B.js的Y行)。但是，是否有类似的快速方法来找出事件从哪里被分派(即行X从A.js)?

Answer 1

如果我理解正确的话，在事件侦听器中，创建一个new Error-它的.stack属性中的第二行是事件调度的来源-注意，在Firefox中是第二行，在基于chromium的bruisers中是第三行。

注:Error的stack属性为"非标准";-但是它在过去7年(或更早)发布的所有现代浏览器中都可用，甚至在IE10

// Chrum browsers stack starts at the second line
const fixChrum = +(new Error().stack.split('n')[0].startsWith('Error'));
window.addEventListener('custom:event', () => {
console.log('dispatched from', new Error().stack.split('n')[1 + fixChrum]);
});
// the following is not required, it just shows the line number before the dispatch
console.log('dispatched from next line', new Error().stack.split('n')[0 + fixChrum]);
window.dispatchEvent(new Event('custom:event'));