Author: Brian Zindler Last Updated: 05/12/19

I am a huge fan of the Chrome Dev Tools but sometimes they display a result that has me go 🤔. Below is a list of confusing Chrome Dev Tools results. Some of these are bugs with the Dev Tools and some are confusing representations of valid html/css behavior. If you find any more, shoot me an email at [email protected].

Console Log Mutability

The Chrome console log does not necessarily display what the logged value was at that point in time. For mutable values like objects or arrays it references the current instance of that value. So for example if you run:

var test = { a: { b: 12 } }
console.log(test)
test.a.b = 10000

And then expand the console log for the test object. The value of b will be shown as 10000 even though its value was 12 at the time of logging.

Undefined Local Variables in the Debugger

Sometimes you will be inspecting a function in the debugger some for the variables saved in a closure will show up as not being defined. Here is an example situation from Gabe Kopley:

function baz() {
  var x = "foo";

  function bar() {
    x; // Will throw an error in the dev tools for being undefined.
    debugger;
  };
  bar();
}

There is a detailed breakdown of why this happens in this stackoverflow post

Margin Collapsing

Sometimes when having adjacent paragraph tags only 1 of the tags margins will be used. Here is an example situation.

For the space between paragraph 2 and 3 only paragraph 3's margin is being used. From the dev tools it is not apparent what is going on. This strange behavior is due to Margin Collapsing. If you are interested in learning why it happens I encourage you to follow the link.