Change JavaScript Date in Chrome

Question

Without having to change the date/time of the computer I am debugging, is there a way, either via the dev tools or by running some custom JavaScript in the console, to set / change what time or date Google Chrome thinks it is?

IE so that new Date() returns what you've set the browser to think it is, rather than the system's date.

There are ways around it, but it would be handy to debug different dates / times.

Answer 1

You would need to write a function that wraps new Date and returns a modified version of the date. For example:

/**
 * Overwrite Date constructor with configurable current time
 * @param {object} Date         - The native Date object
 * @param {Number} year         - Optional. Default year to this.
 * @param {Number} month        - Optional. Default month to this.
 * @param {Number} day          - Optional. Default day to this.
 * @param {Number} minute       - Optional. Default minute to this.
 * @param {Number} second       - Optional. Default second to this.
 * @param {Number} milliseconds - Optional. Default milliseconds to this.
 */
Date = function (Date, year, month, day, hour, minute, second, milliseconds) {

    function MyDate() {

        // Get arguments passed into new Date()
        var args = Array.prototype.slice.call(arguments);

        // Add null to start
        args.unshift(null);

        // Call new Date() with the original arguments
        var date = new (Function.prototype.bind.apply(Date, args));

        if (typeof year !== 'undefined' && arguments.length === 0) {
            date.setFullYear(year);
        }

        if (typeof month !== 'undefined' && arguments.length === 0) {
            date.setMonth(month);
        }

        if (typeof day !== 'undefined' && (arguments.length === 0 || arguments.length === 2)) {
            date.setDate(day);
        }

        if (typeof hour !== 'undefined' && (arguments.length === 0 || arguments.length === 3)) {
            date.setHours(hour);
        }
        if (typeof minute !== 'undefined' && (arguments.length === 0 || arguments.length === 4)) {
            date.setMinutes(minute);
        }
        if (typeof second !== 'undefined' && (arguments.length === 0 || arguments.length === 5)) {
            date.setSeconds(second);
        }
        if (typeof milliseconds !== 'undefined' && (arguments.length === 0 || arguments.length === 6)) {
            date.setMilliseconds(milliseconds);
        }

        return date;
    }

    MyDate.prototype = Date.prototype;

    return MyDate;

}(Date);

On the last line you can specify values for overwriting the current time:

}(Date, 1990); // Year
}(Date, 1990, 05); // Year/month
}(Date, 1990, 05, 11); // Year/month/day
}(Date, 1990, 05, 11, 13); // Year/month/day Hour
}(Date, 1990, 05, 11, 13, 05); // Year/month/day Hour:minute
}(Date, 1990, 05, 11, 13, 05, 01); // Year/month/day Hour:minute:second

The benefit of this is that any existing new Date() calls with arguments still work correctly:

new Date(2001, 02, 03);
> Mar 03 2001

Also time is not frozen so the seconds value will increase with the normal clock:

// Year changed to 1990
console.log(new Date());
setTimeout(function(){
    console.log(new Date());
}, 5000);

> Thu Oct 11 1990 17:02:17 GMT+1100 (AUS Eastern Daylight Time)
> Thu Oct 11 1990 17:02:22 GMT+1100 (AUS Eastern Daylight Time)