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.
Takes screenshots of a webpage in different resolutions and automatically applies it to mockup templates.
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.
UI testing with decision trees. An experimental approach to UI testing, based on Decision Trees.
Page-Monitor is a little library for capturing DOM changes and showing the diffs, with PhantomJS.
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.
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 automates CSS regression testing of your responsive web UI by comparing DOM screenshots at various viewport sizes.
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.