Skip to main content

Debugging

Debuggability is highly underrated. When writing code, you have to think about how it will execute. You also need to be thinking about how it will fail and how you will debug it in production. Leave yourself audit trails, store data in human-readable formats, and invest in admin tooling.

  • Right-click >> preserve log

Console Log Types​

Basic Logging​

  • console.log()
  • console.error()
  • console.warn()
  • console.info()
console.log('Window', window, 'body', document.body);

Object Inspection​

  • console.dir()
  • console.table()

Tracing​

  • console.trace()

Assertions​

  • console.assert(condition, message)
console.assert(document.querySelectorAll('div').length > 0, 'No divs found on the page');

Counting​

  • console.count(label)
  • console.countReset(label)
console.count('myCounter');
console.count('myCounter');
console.countReset('myCounter');
console.count('myCounter');

Grouping​

  • console.group(label)
  • console.groupEnd()
  • console.groupCollapsed(label)
console.group('User Details');
console.log('Name: John Doe');
console.log('Age: 30');
console.groupEnd();

Monitoring Events​

  • monitorEvents(element, [events])
  • unmonitorEvents(element, [events])
monitorEvents(\$\$('ASPxClientGridView'), 'mouse');
monitorEvents(\$\$('ASPxClientGridView'), 'key');

Querying Elements​

\$('.class #id');
document.querySelectorAll('_');
getEventListeners(element);

Arguments Object​

  • arguments

Error Handling​

Throw Statement​

An exception is created using the throw keyword. The value can be any JavaScript value including a string, a number, or an object. As soon as JavaScript executes this line, the normal program flow is halted and the control is handed back to the nearest exception handler.

throw value;

Exception Handler​

An exception handler is a try/catch statement. Any exception raised in the lines of code included in the try block is handled in the corresponding catch block:

try {
  // lines of code
} catch (e) {
  // handle the error
}

Managing Exceptions with Decorators​

  • \$exceptionHandler
  • Failure functions