#TIL : View function source in developer tool console

If you are in console of developer tool and you want to know what the function does, you can view its source by:

  1. call .toSource() of variable or function name in Firefox

Example :

1
2
3
4
>> function hello(name) { return "Hello " + name; }

>> hello.toSource();
<- "function hello(name) { return \"Hello \" + name; }"
  1. click ‘show function definition’ in Chrome

show function definition

#TIL : View all parameters passed to callback function without reading docs

Time before, I often meet the situation that I forgot the parameters pass to a function (so I have to searching the API docs to read via Google). This progress can take you huge time if it repeats many times.

So I think one way to debug the parameters without reading API docs, that is pass console.log as a callback function parameter.

Examples :

1
2
3
4
5
6
[3,9,27].forEach(console.log);
// So you will get
// 3 0
// 9 1
// 27 2
// Then you know , first parameter is item, second parameter is indexed key
1
jQuery.ajax('/data.json').done(console.log).fail(console.error);

#TIL : Never autostart XDebug in cli environment

TLDR;

Never ever enable xdebug.remote_autostart in cli

Xdebug is handy extension helps you debug your PHP code. But it slows the performance in cli mode, especially run PHP cli tool like composer or phpunit.

So please disable Xdebug in cli mode or set xdebug.remote_autostart=0 in INI file.

#TIL : Tracking changes of cookie on webpage

Using Object.defineProperty helper function as I wrote 3 days ago. We could track the changes of cookie on webpage.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Based on Vlad Shevchenko's script at https://stackoverflow.com/a/36826049

var cookieSetterOrig = document.__lookupSetter__("cookie"); // get origin setter function
var cookieGetterOrig = document.__lookupGetter__("cookie"); // get origin getter function
Object.defineProperty(document, "cookie", {
get: function () {
console.trace();
return cookieGetterOrig.apply(document);
},
set: function () {
console.log(arguments);
console.trace();
return cookieSetterOrig.apply(document, arguments);
},
configurable: true
});

Notice : This code only works if cookie is changed by javascript, not http header request !

#TIL : Debug js code using console.trace

Browsers provide an useful function help you debug easier than using simple console.log function.

That is console.trace, which prints a stack trace to called function.

Example :

1
2
3
4
5
6
7
8
9
10
function foo() {
var a = 1;
bar(a);
}
function bar(x) {
console.log(x);
console.trace();
}

foo();