Performance, debugging and other utilities that can help with JavaScript development.
npm install luc-devutils
Download the latest zip or check out the hosted build files luc-devUtils, luc-devUtils-es5-shim. Source maps come packaged with the non minified versions.
Cross browser break on change functionality. THIS ONLY WORKS ON ES5 BROWSERS (more specifically ones that implement Object.defineProperty).
No errors will be thrown in older browsers.
It also has a few hooks that can be useful for debugging conditional get/set operations.
The default behavior is to invoke the debugger if the value has changed.
var obj = {},
watcher = new Luc.devUtils.Watcher({obj: obj, property: 'str'});
obj.str = 'something';
//debugger will pop up by default
watcher.pause();
obj.str = 'somethingelse';
//nothing happens
watcher.resume();
obj.str = 'something'
//debugger pops up again
watcher.restore();
//obj watchers are restored obj.str = '' doesn't do anything
That is the default behavior of watcher. @protected hooks can be overwritten for added functionality.
//just log the value when the obj is accessed
var obj = {num: 1},
watcher = new Luc.devUtils.Watcher({
obj: obj,
property: 'num',
doBreak: false,
beforeGet: function(val) {
console.log(val)
}
});
obj.num++
> 1
obj.num++
> 2
//only break when the error property is set to true
var obj = {error: false},
watcher = new Luc.devUtils.Watcher({
obj: obj,
property: 'error',
doBreakIf: function(newValue, oldValue) {
return newValue === true;
}
});
obj.error = 'something';
obj.error = true;
//debuger shows
// just log the value being set
var obj = {str: ''},
watcher = new Luc.devUtils.Watcher({
obj: obj,
property: 'str',
doBreak: false,
beforeSet: function(value) {
console.log('setting to ' + value);
}
});
obj.str = 'something';
>setting to something
obj.str = 'something else';
>setting to something else
There are also some static convenience methods so you can manage all of your Watcher instances.
//pause all instances
Luc.devUtils.Watcher.pauseAll();
//resume all instances
Luc.devUtils.Watcher.resumeAll();
//restore all instances
Luc.devUtils.Watcher.restoreAll();
Intercepts methods on objects to add time info or console logs or functions that will get called before and after the intercepted method is called. Info on functions can be obtained without putting log statements in your source code or libraries. Time logs keep track of how many times a function has been called and how long it has run for. When put on the prototype of a class this can be useful information to have without having to dig through and have the overhead of a profiler. Functions can be used to add a quick breakpoint on a child class instead of doing a conditional breakpoint of:
this instanceof Child
Sample usage:
var interceptor = new Luc.devUtils.Interceptor({
logs: {
obj: Luc.devUtils.Runner.prototype,
fnName: 'run',
before: 'running ...',
after: function(f) {
return 'first call arg ' + f;
}
},
times: [{
obj: Luc.devUtils.Runner.prototype,
fnName: 'run'
}],
functions: {
obj: Luc.devUtils.Runner.prototype,
fnName: 'run',
before: function() {
window.alert('running ....')
}
}
}),
v = new Luc.devUtils.Runner({
log: false,
// .....
});
v.run('a') would output something like
running ...
first call arg a
//This is from the times
run: 14.539ms
interceptor.getReport() would output something like:
{ run:
{"iterationsRun":1,"totalTime":14.53899999614805,"average":14.53899999614805}
}
Runs a set of functions for n number of iterations and keeps time info on the set of functions. This can be used for getting time comparisons.
Sample usage:
var arr = [1,2 3],
runner = new Luc.devUtils.Runner({
//defaults to true
log: true,
iterations: 10000,
functions: [{
fn: function() {
var a;
arr.forEach(function(value, index) {
a = value + index;
});
},
name: 'nativeForEach'
}, {
fn: function() {
var a;
Luc.Array.each(arr, function(value, index) {
a = value + index;
});
},
name: 'Luc Each'
}, {
fn: function() {
var a, i = 0,
len = arr.length
for(; i < len; ++i) {
a = arr[i] + i;
}
},
name: 'forLoop'
}]
});
runner.run();
would show console.time outputs to the console like:
nativeForEach: 7.304ms
Luc Each: 8.032ms
forLoop: 0.796ms
after calling run 2 more times runner.getReport() would return something like:
{
"nativeForEach": {
"iterationsRun": 30000,
"totalTime": 13.921000011090655,
"average": 0.0008307000003696885
},
"Luc Each": {
"iterationsRun": 30000,
"totalTime": 14.927000003808644,
"average": 0.0004975666667936215
},
"forLoop": {
"iterationsRun": 30000,
"totalTime": 1.0809999948833138,
"average": 0.00003603333316277712
}
}