Question

我正在开发一个WYSIWIG动画编辑器，用于设计包含大量依赖关系的滑块/广告横幅，这也意味着许多额外的膨胀代码都没有被使用过。我希望能够运行一份有关帮助我识别重要事项的代码的报告。我有几个很酷的开始，将搜索所有函数的javascript并按部分返回每个函数： https://regex101.com/r/sXrHLI/1

然后一些PHP将按大小排序： Sort preg_match_all by named group size

我们的想法是，通过识别未使用的大型功能，我们可以删除它们。我的下一步是确定在文档加载时调用哪些函数的函数树，然后在点击/鼠标悬停等操作上加载和调用哪些函数。

虽然我有这个方便的功能告诉我在DOM中加载的所有功能，但它还不够：

var functionArray;
$(document).ready(function(){
    var objs = [];
    for (var obj in window){
        if(window.hasOwnProperty(obj) && typeof window[obj] === 'function') objs.push(obj);
    };
    console.log(obj));
});

我正在寻找一个可以用来在PHP / shell中编写脚本以模拟页面加载的解决方案 - 现在这里我的术语知识让我失望，我在寻找＆＃34; Call Stack＆＃34;，do我需要时间轴，解释器，框架，引擎或解析器吗？

我接下来需要模仿所有元素的click / hover事件，或者匹配像此regex这样的所有元素：

(?|\$\(['"](\.\w*)["']|getElementsByClassName\('(\w*)'\))
(?|\$\(['"](\#\w*)["']|getElementsById\('(\w*)'\))

找到触发函数的任何事件，这样我就可以创建需要在最终代码中的函数的主列表。

Answer 1

我正在观看谷歌开发者的演讲，我想到了你的帖子。以下链接有more intel on Dev Tools Coverage Profiler，但以下是高级别。

谷歌开发工具发布了一个简洁的功能，用于生成有关已使用和未使用的JS和CSS代码的报告 - 这正是你所搜索的内容的本质（只是一个稍微不同的媒介 - 它是一个有点难以自动化，但我相信，它确实包含你正在寻找的东西。）

打开开发工具，然后打开左下角的椭圆（见图），然后单击录制按钮[见图1]。完成您要捕获的步骤。您将获得一个交互式屏幕，您可以浏览所有代码并查看使用的内容（绿色）和未使用的内容（红色）[见图2]

图片1 - 椭圆下拉以获取覆盖工具

图片2 - 编辑此帖子时此StackOverflow页面的交互式报告的完整屏幕截图。

Answer 2

我建议你看看这个工具： Istanbul

有了它，您可以执行以下操作：

创建代码的检测版本
将其部署在服务器上并运行手动测试（覆盖率信息收集在浏览器内的一个全局变量中）
将覆盖范围信息复制到一个文件中（据我记得，它是一个lcov数据）
用它生成代码覆盖率报告

如果您想要更进一步，您实际上可以使用jvm-cucumber和selenium之类的东西来自动化UI测试。但是，每次重新加载页面时都需要转储coverage数据。然后，您必须组合来自不同运行的覆盖率，并使用此组合的lcov数据生成整体报告。

整个过程有点沉重，但它比开始重塑它更好。

更重要的是，您可以将此数据与单元测试覆盖率信息结合起来，以生成联合报告。

更进一步，您可能需要设置sonar服务器，以便存储多个版本的覆盖率报告并比较测试之间的差异。

报告所有使用过的Javascript函数

2 个答案: