I hacked time in Chrome for a demo video

#webdev #console #javascript #demo

How I made Chrome believe a full workday passed in seconds to record a Timesheetr demo video.

I wanted to demo how easy it is to add entries to Timesheetr, use the keyboard shortcuts, and basically show how it would be used throughout the day to track timesheets.

Problem: I couldn't just wait for the whole day to pass and screen-capture the process over 8 hours. So I had to make Chrome think that time had changed in between my timesheet entries.

See, when you add an entry in Timesheetr, it automatically ends the previous one at the time of the new entry and calculates its duration.

My demo would have been terrible if every entry had the same timestamp.

So, using a few lines of JavaScript in Chrome’s DevTools, I overrode the browser’s Date object to make my app think the day was flying by.

I didn’t know that was even possible — but it worked!

First, a simple test

The idea was to add a random number of minutes every five seconds.
I ran this in the console:

(() => {
  let fakeNow = new Date("2025-11-02T10:00:00Z");
  const OriginalDate = Date;
  Date = class extends OriginalDate {
    constructor(...args) {
      if (args.length === 0) return new OriginalDate(fakeNow);
      return new OriginalDate(...args);
    }
    static now() { return fakeNow.getTime(); }
  };

  setInterval(() => {
    const minutesToAdd = Math.floor(Math.random() * (60 - 18 + 1)) + 18;
    fakeNow = new Date(fakeNow.getTime() + minutesToAdd * 60 * 1000);
    console.log(`⏰ Fake time advanced by ${minutesToAdd} min →`, fakeNow.toLocaleString());
  }, 5000);

  console.log("✅ Fake time simulation started");
})();

It worked beautifully. My app really thought time was passing.

But for some entries, five seconds was too short , and the random intervals didn’t always make sense.
I kept tweaking the code to make it feel more natural.

Fast forward to the result

I ended up writing a small “demo script” to plan exactly what I’d type and when.
Then I hard-coded the specific times for each entry to make it fit better.
Finally, I added a short beep each time the fake clock advanced — so I’d know if I was early or late (typing too fast or too slow).

(() => {
  const Beep = async () => {
    const ctx = new (window.AudioContext || window.webkitAudioContext)();
    const osc = ctx.createOscillator();
    const g = ctx.createGain();
    osc.connect(g).connect(ctx.destination);
    osc.type = "sine"; osc.frequency.value = 880; g.gain.value = 0.08;
    osc.start(); setTimeout(() => osc.stop(), 120);
  };

  const steps = [
    ["07:51"],
    ["09:30", 20],
    ["09:43", 10],
    ["10:00", 10],
    ["10:53", 10],
    ["11:37", 10],
    ["13:00", 10],
    ["13:23", 10],
    ["17:30", 10],
  ];

  const OriginalDate = Date;
  let fakeNow = new OriginalDate();
  fakeNow.setHours(7, 51, 0, 0);

  Date = class extends OriginalDate {
    constructor(...a) { return a.length ? new OriginalDate(...a) : new OriginalDate(fakeNow); }
    static now() { return fakeNow.getTime(); }
  };

  const jump = ([h, m]) => {
    fakeNow.setHours(h, m || 0, 0, 0);
    console.log("⏰ Time jump →", fakeNow.toLocaleTimeString());
    Beep();
  };

  let delay = 0;
  steps.forEach(([t, sec]) => {
    const [h, m] = t.split(":").map(Number);
    delay += (sec ?? 0) * 1000;
    setTimeout(() => jump([h, m]), delay);
  });

  console.log("✅ Time hacking started. Watch your console!");
})();