Why Console.Debug is sometimes better than Console.Log

TL;DR Console.Debug allows the end user to determine how much logging they see. Combine this with a modern browser abilities and you can have very concise logging.

Another quick one. We have a system out at a client where two calls to the same function behave differently, in essence one succeeds and the other fails silently. It works on our test system in both cases but there are a lot of API calls to other systems involved so its probably something ‘wrong’ in the environment.

We can’t debug the system live so we need to get a trace of the data from them.

Console.log seems like the obvious solution. We add calls around decision points, ship the ‘debug’ version, get the trace, fix the issue and strip out the console.log calls.

Console.debug is a better solution. With it we just add calls around the decision points, ship the new version, the user set the console to show debug / verbose level, gets the trace, we fix the issue and ship the fixed version with the console.debug calls left in.

Now if we get similar reports we no longer need to cut a special debug version but unless set to verbose logging the user is not bothered by unnecessary information if they are looking at the console.

console.debug({
  reason: "Explains why the debug is being used",
  job
})

You’ll see I don’t just pass a string to the call but instead create an object on the fly.

The first member is for us so we know why we have debug, we’ll also get the line number of the code anyway but this makes life easier.

The second member uses JavaScript short hand property notation to include the variable ‘job’ as a member called job. So when the output is displayed you can drill down into it if its an object and you also know the variable name.

Reason: "Created Universal Print Client"
{client: Client}
 client: Client
  config: {
   baseUrl: 'https://graph.microsoft.com/',
   debugLogging: false,
   defaultVersion: 'v1.0',
   authProvider: AuthCodeMSALBrowserAuthenticationProvider
  }
  httpClient: HTTPClient {middleware: AuthenticationHandler}
[[Prototype]]: Object
[[Prototype]]: Object

TL;CR Console.Debug allows the end user to determine how much logging they see. Combine this with a modern browser abilities and you can have very concise logging.