Page Monitor

capture webpage and diff the dom change with phantomjs

Effects

Element Add

Element Removed

Text Changed

Style Changed

Make UI to show diffs of history

Usage

var Monitor = require('page-monitor');

var url = 'http://www.google.com';
var monitor = new Monitor(url);
monitor.capture(function(code){
    console.log(monitor.log); // from phantom
    console.log('done, exit [' + code + ']');
});

API

Monitor

var monitor = new Monitor(url [, options]);

see the default options here: https://github.com/fouber/page-monitor/blob/master/index.js , you can override any option for your monitoring.

monitor.capture(callback [, noDiff]);

caputure webpage and save screenshot, then diff with last save.

var monitor = new Monitor(url, options);
monitor.capture(function(code){
    console.log(monitor.log); // from phantom
    console.log('done, exit [' + code + ']');
});

monitor.diff(left, right, callback);

diff change between left(date.getTime()) and right(date.getTime()).

var monitor = new Monitor(url, options);
monitor.diff(1408947323420, 1408947556898, function(code){
    console.log(monitor.log); // from phantom
    console.log('done, exit [' + code + ']');
});

events

var monitor = new Monitor(url);
monitor.on('debug', function(msg){
    console.log('debug:', msg);
});
monitor.capture(function(code){
    console.log('done, exit [' + code + ']');
});

• debug: debug from phantom
• notice: console from webpage
• info: info from phantom
• warning: error from webpage
• error: error from phantom