1. 37
  1.  

  2. 23

    Instead of concatenating, console.log can print multiple arguments: console.log('stage 2', thing)

    1. 2

      This is what I’ve always done, feels much cleaner to have the label as it’s own argument then wrapping the object.

    2. 16
      console.log("User(%o)", user)
      

      console.table is also useful

      1. 3

        I’ve started to use console.table for pretty much everything. It’s so nice.

        1. 2

          Thanks for letting me know about console.table this looks super useful.

        2. 6

          console.count can also be useful in situations where you’re trying to find out how many times things are getting called/rendered/etc.

          1. 5

            Wow. This part on MDN about console.log is news to me.

            Please be warned that if you log objects in the latest versions of Chrome and Firefox what you get logged on the console is a reference to the object, which is not necessarily the ‘value’ of the object at the moment in time you call console.log(), but it is the value of the object at the moment you open the console.

            TIL. In Firefox, at least: an un-expanded console.log does show updates when expanded, but pre-expanded console.log & console.dir do not show updates made later, it seems. In any case, the one-line un-expanded output does not update. Not sure about other browsers. Feels wat.

            Don’t use console.log(obj), use console.log(JSON.parse(JSON.stringify(obj))).

            1. 1

              It’s pain to think of the hours I’ve wasted not knowing this… thank you for sharing :)

              1. 1

                Nice tip ! Still I don’t get what differs between the two ways of calling console.log. Does someone has a deeper explanation ?

                1. 3

                  This console.log call logs a string:

                  console.log("user: " + user);
                  

                  This string is defined by "user: " + user. The + operator with a string on the left implicitly calls .toString() on its right argument, user in this case. But the default implementation of toString for all objects, such as this user object, returns only the string [object Object]`.

                  Both of the following console.log calls log an object:

                  console.log(user);
                  console.log({user});
                  

                  No strings are involved here. console.log doesn’t call toString to show user; it uses the JavaScript runtime to reflect on the object keys and values directly and shows a special UI for browsing them.

                  As others have mentioned, you can also call console.log like this, which logs a string and then separately logs an object on the same line, with no + operator causing .toString() to be called:

                  console.log('user:', user)
                  
                  1. 1

                    That makes perfect sens to me, thank you for the anwser :)

                2. 1

                  The work-around I found is console.log("x: " + JSON.stringify(x));

                  1. 1

                    If you need to explicitly convert the object to a string like this, the output will be easier to read if you pretty-print it. You can do this by passing JSON.stringify a value such as 2 or '\t' for its third argument, space:

                    console.log("x: " + JSON.stringify(x, null, 2));