JavaScript Differencer

JS Differencer - Visualise the effect of disabling JavaScript on the web.

A simple cloud function driven tool that shows the visual difference between a page with and without JavaScript enabled. Created for BrightonSEO 2020.

In the resulting image the left side is with JavaScript enabled, the right side is with it disabled, and the middle column shows the difference between the two.

Try the JavaScript Differencer

Simply enter an URL and hit generate!

Note: This might take a few minutes depending on current usage. If you can't wait why not try the command line tool.

Device Information

The tool is able to check both a desktop and a mobile viewport.

- The desktop viewport is a standard 1920x1080 resolution.

- The mobile viewport is the Nexus 5X profile from Lighthouse.

Usage

Command Line Tool

The command line tool can be installed directly from NPM.

npm install -g js-differencer

Once installed the tool can be used as per the following example.

js-differencer --url https://blacklivesmatter.com/ --device mobile --output difference.png

Online Tool

JavaScript Differencer is primarily available as an online tool which can be used via the form at the top of this page

Cloud Function

If you wish to install this as your own cloud function then the following repository contains everything ready to go with Google Cloud Functions.

View on GitHub

Changelog

1.0.0

- All the changes.

Contact

Send me an email via hello@defaced.dev or you can find me on Twitter at @defaced.

Follow @defaced

For more tools and fun projects checkout the defaced.dev homepage.

back to defaced.dev