8个面向前端开发人员的基于PhantomJS的脚本

这些天来,作为前端Web开发人员,您会发现自己沉迷于尝试新工具。您可以花几个小时尝试跟上所有这些新工具,以添加到您的工作流中。因此,在这里我收集了一些基于Phantomjs的有用脚本,用于监视性能,提取相关内容,模拟用户行为并生成自动网页屏幕截图。

响应式样机

拍摄具有不同分辨率的网页的屏幕截图,并将其自动应用于样机模板。

响应模型样机js-2

的CSS Ratiocinator

的CSS Ratiocinator自动重构CSS,并为您的网站生成一个新的样式表。通过检查您的网站可以正常工作’通过浏览器中的实时DOM进行反向工程,并对新的,更优雅的定义进行逆向工程,该定义可捕获直至像素的样式。

css-rationator-3

幻影流

具有决策树的UI测试。一种基于决策树的UI测试的实验方法。

幻影流4

页面监控器

Page-Monitor是一个小库,可使用PhantomJS捕获DOM更改并显示差异。

页面监视器1

幻影

幻影是基于PhantomJS(可在WebKit上运行的可编写脚本的无头浏览器)构建的命令行工具。 phantomas不仅为您提供有关请求数量,使用的域,资源时间等指标的概述,而且还可以深入了解站点的CSS和JS代码内部发生的情况–绑定的事件数,DOM&jQuery选择器,DOM节点插入,复杂CSS选择器的数量。

phantomas-5

css-inliner博士

内联CSS以获取首屏内容(并以非阻塞方式加载样式表)将使页面立即呈现。该脚本将帮助提取所需的CSS。

dr-inline-css-6

BackstopJS

BackstopJS通过比较各种视口大小的DOM屏幕截图,自动执行响应式Web 用户界面的CSS回归测试。

backstopjs-7

佩雷斯

捕获各种分辨率的网站屏幕截图。确保您的网站响应良好的好方法。它’迅速,并在一分钟内从10个不同的网站生成了100张屏幕截图。它也可以用于渲染SVG图像。

第8页

发表评论

请客气。我们对此表示赞赏。您的电子邮件地址将不会被发布,并且必填字段已被标记

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.