Skip to content

Instantly share code, notes, and snippets.

@bfred-it bfred-it/README.md
Last active Aug 29, 2015

Embed
What would you like to do?
Frame tracker function (tell if two functions have been called in the same frame)

Frame tracker

This code will mark each frame and it will make it easier to pin down console.logs being called in the same frame—intended as in frames per second, not html frames.

Example

Consider this code:

    setTimeout(function hello() { console.log('Logging "Hello"'); }, 10);
    setTimeout(function world() { console.log('Logging "World"'); }, 20);

If the two functions hello() and world() execute in the same frame, this will be the correct output:

    (20 times) -----------
    Logging "Hello";
    Logging "World";
    (141 times) -----------

If instead the two logs are separated by a "-----------" like the following, they have been called in two different frames, exactly 2 frames apart.

    (20 times) -----------
    Logging "Hello";
    (2 times) -----------
    Logging "World";
    (59 times) -----------

The (x times) count is usually provided by the browser's console itself.

Usage

Simply copy and paste the content of frame-tracker.js into the browser's console and execute it. For more accurate results, place it in the HTML, before any other scripts: that way it will be the first function to be called on requestAnimationFrame and it will exactly mark the start of a frame.

To stop it, simply call cancel()

colored-frame-tracker is compatible with Chrome and Firefox. Use the second file in Safari and the rest.

(function frameTracker(){
console.log('%c ', 'display:block;width:100%;border-bottom: solid 5px green;color:transparent');
var id = requestAnimationFrame(frameTracker);
window.cancel = cancelAnimationFrame.bind(window, id);
}());
(function frameTracker(){
console.log('-----------');
var id = requestAnimationFrame(frameTracker);
window.cancel = cancelAnimationFrame.bind(window, id);
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.