有https://yellowlab.tools/，可以进行测试。得到结果（例如https://yellowlab.tools/result/fhjft5ls9z）后，出现了“ DOM操作”子句，其中包含以下子句：“ DOM访问，无结果查询，重复的DOM查询”。如何确定这些查询实际所在的特定js文件和代码行？

该服务使用无头浏览器（https://phantomjs.org/），我认为https://github.com/GoogleChrome/puppeteer可能会提供相同的功能 我还没有开箱即用的配置或脚本来标识调用DOM操作方法的位置。

我已经尝试过https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver和一些浏览器扩展，其中包括页面上的“ User JS and CSS code v 1.2.6”，但是据我了解，在进行所有操作后调用了扩展JS代码-这就是为什么控制台中没有信息。

我想我需要在JS文件调用中使用以下方法找到所有地方：

querySelector()
querySelectorAll()
addEventListener()
removeEventListener()
createElement()
appendChild()
removeChild()
replaceChild()
cloneNode()
insertBefore()
createDocumentFragment()
getcomputedStyle()
setattribute()
getattribute()
removeAttribute()

还有jQuery调用。

MutationObserver示例：

const targetNode = document.getElementById('some-id');
const config = { attributes: true,childList: true,subtree: true };

const callback = function(mutationsList,observer) {
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

const observer = new MutationObserver(callback);

observer.observe(targetNode,config);

我想要一些结构化的输出（例如，带有数组和信息的JSON文件），其中包含“无结果的查询，重复的DOM查询”以及每个方法的调用位置。

P.S。关于stackoverflow.com的报告只是一个例子，应该可以自定义。