Log all WebGL calls

logger.js

/**
 * Usage:
 * // start to log the name/arguments for all function calls on context
 * const logger = new WebGLLogger(webglContext); 
 *
 * // stop logging, restoring the originals
 * logger.disable();
 */

class WebGLLogger {
  constructor(context) {
    this.context = context;
    this.enable();
  }

  enable() {
    const context = this.context;

    let numCalls = 0;

    this.originals = {};
    this.constants = {
    };
    for (let name in context) {
      if (typeof(context[name]) === 'function') {
        this.originals[name] = context[name].bind(context);
        /* eslint-disable no-loop-func */
        context[name] = (...args) => {
          numCalls++;
          const mappedArgs = args.map(val => {
            if (typeof(val) === 'number' && this.constants[val]) {
              return `${this.constants[val]}(${val})`;
            }
            return val;
          });

          if (args.some(val => typeof(val) === 'string' && val.length > 100)) {
            console.groupCollapsed(`[${numCalls}]`, name, '...');
            console.log(...mappedArgs);
            console.groupEnd();
          } else {
            console.log(`[${numCalls}]`, name, ...mappedArgs);
          }
          const result = this.originals[name](...args);
          if (result) {
            console.log(result);
          }
          return result;
        }
      } else if (typeof(context[name]) === 'number') {
        this.constants[context[name]] = name;
      }
    }
  }

  disable() {
    Object.keys(this.originals).forEach(name => {
      this.context[name] = this.originals[name];
    });
    this.originals = {};
  }
}