These days as a front-end web developer you can find yourself drowning in new tools to try out. You can spend hours on end trying to keep up with all of these new tools to add to your workflow. So here i collected some useful scripts based on Phantomjs for monitoring performance, extracting relevant content, simulating user behaviour, and producing automatic web page screen shots.

Responsive Mockups

Takes screenshots of a webpage in different resolutions and automatically applies it to mockup templates.

CSS Ratiocinator

The CSS Ratiocinator automatically refactors your CSS and generates a new stylesheet for your site. It works by examining your site’s live DOM in the browser and reverse engineering a new, more elegant definition that captures styles down to the pixel.

PhantomFlow

UI testing with decision trees. An experimental approach to UI testing, based on Decision Trees.

Page Monitor

Page-Monitor is a little library for capturing DOM changes and showing the diffs, with PhantomJS.

Phantomas

Phantomas is a command line tool build on top of PhantomJS – scriptable headless browser running on WebKit. phantomas gives you not only an overview with metrics such as number of requests, domains used, resources timing, but also in-depth view of what’s happening inside CSS and JS code of your site – number of events bound, DOM & jQuery selectors, DOM node insertions, number of complex CSS selectors.

dr-css-inliner

Inlining CSS for above-the-fold content (and loading stylesheets in a non-blocking manner) will make pages render instantly. This script will help extract the CSS needed.

BackstopJS

BackstopJS automates CSS regression testing of your responsive web UI by comparing DOM screenshots at various viewport sizes.

Pageres

Capture screenshots of websites in various resolutions. A good way to make sure your websites are responsive. It’s speedy and generates 100 screenshots from 10 different websites in just over a minute. It can also be used to render SVG images.