Log Levels and Semantic Methods

Advanced Console Log Arguments

Grouping and Nesting Console Log Output

Proper use of console.assert in JavaScript

Using console.count to Count Events

Logging Timing Data to the Console

Logging Pretty-Printing Tabular Data to the Console

Advanced Logging with the JavaScript Console

Get more mileage from your console output by going beyond mere string logging - log entire introspectable objects, log multiple items in one call, and apply C-Style string substitution to make the console work for you.



In most programming languages, when you're going to log a string out to standard output, using system.out.println in Java or what have you, there's a pretty reasonable expectation that the argument that you pass into that function is actually going to be a string.

In Java, for instance, if you were to try to pass an object to the log, it's going to yell at you. You've got to call toString on that object first. In JavaScript, things are a little bit more fluid. This is all why we're constantly in a state love/hate with JavaScript.

Often times, a lot of the fluidity and flexibility of JavaScript can really bite you in the ass, but for console.logging, actually the browser vendors just said, "Well, hey, look. This isn't a command line. Like, we can actually do some pretty complex stuff."

What happens if somebody passes an object in instead of a string? Can we render that? The answer is "Yes." If I say console.log, name, Mick, age, 33. That's not yelling at me that it needs a string. Instead it's telling me, "Hey, there's an object there."

If I'm going to do something, you will never hear my advocate writing a constructor function, but let's just real quick write a constructor function. Let's say function person, name, age. This.name equals name, this.age equals age.

Then I say var Mick equals new person. Mick, 33. I can say console.log Mick. It's actually going to tell me the constructor function name that was called to create the object that it's logging. This is some really cool, useful information.

This works for much larger, more complex objects, too. Let's just, for the sake of argument, let's say A equals one, B equals two, C is a function which takes X and Y and returns X + Y. D is the string 123, whatever.

This is large enough that it...whoops. I don't immediately see it. What did I do wrong? Ah, this is what happens when you type while talking. If I say console.log, example here, I've got this nice little introspectable hierarchy that I can step into.

I can click these things. I can see the prototype. I can dig into all of this stuff. None of this is probably news to most of you, but it's really interesting and useful to know that you can pass in entire complex objects and then interact with them.

Another thing that you can do with console logging in JavaScript that doesn't work in something like Java or many other languages, is there's any number of arguments that you can pass into here. I can say console.log Mick, example.

You can see it spits out this guy and then this guy. The rule for console.log is, for every argument you pass in, it's just going to render that to the console and then put a space, and then put the next one. This takes, really, an infinite list.

You can mix and match strings and objects. I can say console.log, "My name is," and then I can say Mick.name. I can say, "And I am," and then I can say Mick.age. Then I can say, "Years old." I put in a space here, but I shouldn't have done that.

As you can see, it takes all these things, and it stitches them together with the space. It's probably doing something like calling array.join on the arguments list with the space as the separator. There's another cool thing that you can do.

I don't do this. I have actually almost never seen this in code that I've inherited. I don't know anybody who actually does this. You can use C-style string substitution. You can do something like this, console.log, my name is %s, and I am %i years old.

Then what this is saying is I've got two substitution objects. I'm leaving two blanks. That means that after this string, I'm going to pass two arguments. The first argument is going to be slotted in for this %s. The second one is slotted in for this %i.

S just means that it's a string. It's expecting a string. I means that it's an integer. The way I can make this work is just then say Mick.name, Mick.age, and as you can see, it worked the same way. One important thing to know is that actually, these are two separate functions.

This is an overloaded function. You can either pass in any number of arguments, where each argument is treated as a standalone thing to be logged, in which case, you can start with an object and go to a string, and it doesn't matter.

I can say console.log, Mick, fubar42, whatever. It's just going to stick these things out. Or you can say console.log, substitute %s, Mick.name, and that's going to work, too. What you can't do is start with an object, and then put a substitution string, and then tell it what to bind to.

This doesn't work. The substitution never takes place. The substitution only works if the very first argument is a string with the substitution, all of your percent variables have to be in the very first argument, and then they need concrete things to bind to in the subsequent arguments.

This shows you a couple ways that you can build up your messages. It can be really useful. You can do a whole bunch of stuff right there in your log line. You don't have to do a bunch of code to stitch strings or extract values. It's actually pretty smart.

Also, all of this works. I can say console.log, Mick, fubar, or I can say console.info, Mick, fubar. When we go here to our filters, if I only want to see the info outputs, this one shows up. Info, debug, warn, error, and log can all take arguments in this way.

Course

Advanced Logging with the JavaScript Console

Advanced Console Log Arguments

Share this video with your friends