Как я могу программно создавать скриншоты веб-страницы на своем локальном хосте для создания рабочего процесса-скринкаста?

Чтобы задокументировать мой процесс веб-дизайна, я хочу сделать снимок экрана с отметкой времени страницы на моем локальном хосте при каждой перезагрузке страницы или при сохранении html-документа или таблицы стилей.

я использую grunt в качестве средства запуска задач и безголовые фантомы браузера для захвата страницы. с grunt-localscreenshots https://www.npmjs.org/package/grunt-localscreenshots легко захватить страницу вручную. но это громоздко, и выполнение задачи занимает до 10 секунд. процесс захвата экрана должен происходить в фоновом режиме постоянно, но только при изменении или сохранении страницы.

поэтому я написал этот сценарий оболочки, который отслеживает каталог на предмет изменений файлов и запускает сценарий phantomjs.

while true
do
ATIME=`stat .`

if [[ "$ATIME" != "$LTIME" ]]
then
phantomjs screenshot.js
LTIME=$ATIME 
fi
sleep 0.5
done

это фантомный скрипт

var page = require('webpage').create();

page.onConsoleMessage = function(msg) {
    console.log(msg);
};

page.open("http://127.0.0.1:8080/screenshot-test/dev", function(status) {
    if (status === "success") {
        window.setTimeout(function() {
            var now = Date.now();
            page.render('screenshots/' + now + '.png');
            phantom.exit();
        }, 1000);
    } else {
        console.log("nono");
        phantom.exit();
    }
});

это работает, но очень шатко и срабатывает только в том случае, если html изменен. он также делает 2 или 3 дублирующих скриншота, если на самом деле ничего не меняется, а иногда вообще не делает скриншотов. вероятно, причина в том, что рендеринг страницы занимает слишком много времени. любые идеи для стабильного и полезного решения? в идеале было бы тяжелое задание