Skip to content
Dynamically create an animated GIF of a page running in Chrome
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Create an animated GIF from a page or animation rendered in Chrome via the debugging protocol's screencasting feature


Getting it working

You want to be running an instance of Chrome with the debugging protocol working on port 9222.

I do this, for example:

/Applications/Google\ Chrome\\ Chrome\ Canary --remote-debugging-port=9222

For now it's not quite ready to use as a proper module as the structuring is terrible and it's not on npm.. but the code is all in and working, so you can test it like so:

npm run example
open /tmp/output.gif

This will navigate to a lovely GIF of Homer Simpson, capture frames for a second, then write them out to /tmp/output.gif. Want to go somewhere else?

npm run example

.. and so on. Currently it starts recording while the page is still rendering - this may or may not be desirable!

You can’t perform that action at this time.