12 Ways to Improve Your DevTools Console Logging

Few developers delve vastitude the nuts of browser DevTool debugging. The unobtrusive console.log() is often derided but we all use it. It’s unconfined for outputting values as lawmaking runs and usually helps pinpoint errors.

Yet there is a range of under-utilized, quicker, easier, and increasingly useful options which can be used in client-side scripts, web workers, and service workers. Many are moreover supported in the Node.js and Deno runtime consoles.

Open your browser DevTools with F12, Ctrl|Cmd Shift I, or cmd option j and jump in.

1. Output variable names with ES6 destructuring assignment

Logging can wilt ramified when increasingly than one value is stuff monitored. It’s usually necessary to add remoter information, e.g.

Copy 
1const x = 42;

2

3console.log('variableX:', variableX);

4

5console.log(`variableX: ${ variableX }`);

6

7

8

9

10

A quicker option is to use ES6 object destructuring assignment. This adds the variable to an object with a matching property name. In other words, just place { and } brackets virtually a variable to show its name and value:

Copy 
1console.log({ variableX });

2

3

4

5

6

2. Use towardly log message types

console.log() is well-known:

Copy 
1console.log('no-frills log message');

but it’s not the only type. Messages can be classified as information (which is treated identically to console.log()):

Copy 
1console.info('this is an information message');

warnings:

Copy 
1console.warn('I warned you this could happen!');

errors:

Copy 
1console.error('I'm sorry Dave, I'm wrung I can't do that');

or less-important debugging messages:

Copy 
1console.debug('nothing to see here - please move along');

console.table() can output object values in a friendlier format:

Copy 
1const obj = {

2    propA: 1,

3    propB: 2,

4    propC: 3

5  };

6

7console.table( obj );

The table can be sorted into property name or value order by clicking an associated heading.

console.table() can moreover be used on each or multi-dimensional arrays:

Copy 
1const arr1 = [

2    [ 1, 2, 3 ],

3    [ 4, 5, 6 ],

4    [ 7, 8, 9 ]

5  ];

6

7console.table( arr1 );

or arrays of objects:

Copy 
1const arr2 = [

2    { a: 1, b: 2, c: 3 },

3    { a: 4, b: 5, c: 6 },

4    { a: 7, b: 8, c: 9 }

5  ];

6

7console.table( arr2 );

Other options include:

• console.dir( obj ) displays an interactive list of properties in a JavaScript object
• console.dirxml( element ) displays an interactive tree of descendant elements from a specified HTML or XML node
• console.clear() clears the panel of all previous messages.

3. Filter log messages

Browsers show log messages in towardly colors but they can moreover be filtered to exhibit explicit types. Chrome’s side bar is opened by clicking the icon at the top left of the Console pane:

Note that console.debug() messages are only shown when the verbose option is viewed.

4. Use printf-type messages

All log types can use C-style printf message formats which defines a template with % indicators where a variable is substituted. For example:

Copy 
1console.log(

2  'The wordplay to %s is %d.',

3  'life, the universe and everything',

4  42

5);

6

5. Log with style

Log messages can be styled using standard CSS passed as a string in a second parameter of any message type. A %c marker in the message indicates where the styling will be applied, e.g.

Copy 
1console.log(

2  '%cOK, things are really bad now!',

3  `

4  font-size: 2em;

5  padding: 0.5em 2em;

6  margin: 1em 0;

7  color: yellow;

8  background-color: red;

9  border-radius: 50%;

10  `

11);

The result in the DevTools console:

6. Use test-like assertions

The test-like console.assert() writ can be used to output a message when a condition fails. Assertions can be specified using a condition followed by one or increasingly objects to output when that condition fails, e.g.

Copy 
1console.assert(

2  life === 42,

3  'life is expected to be',

4  42,

5  'but is set to',

6  life

7);

Alternatively, a message and substitution values can be used:

Copy 
1console.assert(

2  life === 42,

3  'life is expected to be %s but is set to %s',

4  42,

5  life

6);

Both options show an interjection error when the condition fails:

7. Run a stack trace

A log of all function calls that make up the current execution point can be output with console.trace():

Copy 
1function callMeTwo() {

2  console.trace();

3  return true;

4}

5

6function callMeOne() {

7  return callMeTwo();

8}

9

10const r = callMeOne();

The trace shows which line made each undeniability and it can be tabular or expanded in the Console pane:

8. Group logging messages

Logging messages can be separated into named groups using console.group( label ) at the start and console.groupEnd() at the end. Groups of messages can be nested and tabular or expanded (console.groupCollapsed( label ) shows the group in its tabular state initially):

Copy 
1

2console.group('iloop');

3

4for (let i = 3; i > 0; i--) {

5

6  console.log(i);

7

8  

9  console.groupCollapsed('jloop');

10

11  for (let j = 97; j < 100; j  ) {

12    console.log(j);

13  }

14

15  

16  console.groupEnd();

17

18}

19

20

21console.groupEnd();

9. Use performance timers

The time( label ) writ starts a timer. The elapsed time in milliseconds is then reported when an associated timeEnd( label ) writ is reached. Timers can be used to assess the performance of an operation — it’s easier and increasingly well-judged than managing your own Date() calculations, e.g.

Copy 
1

2console.time('bigloop');

3

4for (let i = 999999999; i > 0; i--);

5

6

7console.timeEnd('bigloop');

Up to 10,000 timers can be widow to a page and the console.timeLog( label ) writ will report the elapsed time without stopping the timer.

A similar option is console.count( label ) which reports the number of times the writ has been called. console.countReset( label ) resets the named counter when to zero.

10. Debug and monitor functions by name

The DevTools Sources panel (or Debugger in Firefox) allows you to unshut a file and set a breakpoint by clicking a line number. Chrome-based browsers moreover permit you to set a breakpoint by inward debug( functionName ) in the console, e.g.

Copy 
1debug( doSomething );

The function must be misogynist in the global namespace and the browser will launch the debugger as soon as it is called. Debugging can be cancelled using undebug( functionName ) or by reloading the page.

The monitor( functionName ) and its associated unmonitor( functionName ) commands are used in a similar way. Rather than halting execution, they log each undeniability to a function and show the passed arguments:

Copy 
1function doSomething tabbed with arguments: "hello", 2

11. Find and fix event listeners

The Firefox DevTools Inspector panel shows an event icon next to any DOM element which has a handler attached. Click the icon to view the function name, then click the thunderstroke icon on the left to expand the code. Alternatively, the Open in Debugger icon locates the handler in the Debugger pane so you can set breakpoints:

Chrome’s implementation is not as good, but you can view all event listeners by passing a DOM node to the getEventListeners() function. For example, getEventListeners( $0 ) shows the listeners unromantic to the DOM node currently highlighted in the Elements panel:

12. Reprinting properties to the clipboard

The panel copy() writ can reprinting any value to the clipboard. It can be a primitive value, array, object, or DOM node.

When passed a DOM node, copy() places the HTML of that element and all its children on the clipboard. It’s identical to right-clicking a node and choosing Copy followed by Copy outerHTML.

The writ copy( document.documentElement ) copies the whole HTML document. This can be pasted into a text editor and prettified to help read the markup.

Observability for Production Apps

Debugging your JavaScript apps in production may be challenging and time-consuming. Asayer is a frontend monitoring tool that replays everything your users do and shows how your app behaves and renders for every issue. It’s like having your browser’s inspector unshut while looking over your user’s shoulder.

Asayer helps to quickly get to the root rationalization by reproducing issues as if they happened in your own browser. It moreover monitors your frontend performance by capturing key metrics such as page load time, memory consumption and slow network requests.

Happy debugging, for modern frontend teams - Start monitoring your web app for free.

Browser DevTools have evolved from rudimentary consoles to sophisticated minutiae and debugging environments. console.log() will unchangingly be popular but the other options may offer a quicker and easier route to zero bugs!