A reminder that the webKit console is also rendered (sometimes)

I love doing web development in Chrome and Safari, as they have excellent built-in develop tools. There is one catch that I need to keep reminding myself about however that I thought I would list here: The console is rendered just like the body is (sometimes).

This important note may seem a bit cryptic, but it can best be explained by taking a look at what happens when you ask the Chrome console to console.log() the value of various data types.

Imagine you had the following simple page:

1var test_int = 0;
2var test_arr = [];
3var test_obj = {};
4var sleep = 2;
5
6function log_and_increment() {
7  if (test_int < 3) {
8    test_int = test_int + 1;
9    test_arr.push(test_int);
10    test_obj["counter_" + test_int] = test_int;
11
12    console.log("\r\n value of test integer: ");
13    console.log(test_int);
14    console.log("value of test array: ");
15    console.log(test_arr);
16    console.log("value of test object: ");
17    console.log(test_obj);
18
19    setTimeout("log_and_increment", sleep);
20  }
21}
22
23window.onload = function () {
24  console.log("Starting Tests");
25  log_and_increment();
26};

You can see that we will be looping through this script 3 times and outputting 3 variables: an integer, an array, and an object.

Here are the results:

So what is going on here? If the console can render the variable directly (integer or string), it will render the variable as it was at the time of execution. If the variable is interpreted (array or object) then it will render the variable at it’s current state. If you can open the arrays in the console while he sleep is happening, you will notice them change over time. You would have expected the arrays to be:

• [1]
• [1,2]
• [1,2,3]

but they were all [1,2,3] I hope this clears up some confusion!