Javascript Tracing

For our company's sophisticated web interfaces, we employ a straightforward method to toggle logging statements on and off throughout the codebase.

Generally, you only want logging switched on in the code you are paying attention to. It’s overwhelming to have logging switched on everywhere all the time.

So, the basic idea of the logging framework is to allow the logging to be switched on and off in the functions you are working on.

The function names we use are odd by JavaScript library standards. They match the naming conventions of the C++ tracing framework we use. This is what the code looks like:

COL_TRC(CursorRect);
CursorRect = RECTadd(CursorRect, RECTviewport());
COL_TRC(CursorRect);
COL_DBG("This is a debug level statement");
COL_ERR("This is an error");

See C++ Tracing

You can use COLtrace in the JavaScript console to activate tracing for specific sections of code. The glob expressions you use can add up, and you can exclude certain functions by matching a pattern. For example, COLtrace("* -COR*") targets all functions except those starting with "COR".

You can also turn on tracing in the framework by passing a mock URL variable in the command line. This method makes it easy to configure which parts of the code to trace. In the application I'm currently building, it's done like this.

https://localhost:8080/#main?trace=RECT*

https://localhost:8080/#main?trace=RECT*

function CORmain(){
   if (PAGEhashParameter("trace")){
      COLtrace(PAGEhashParameter("trace"));  // Setting a hash page parameter will enable tracing.
   }
}

See https://bitbucket.org/interfaceware/concepts/src/main/concepts/web/COR/CORmain.js

The tracing framework I have in Javascript is ‘good enough’. It’s a work in progress.

You can see the code for it here in this GIT repository.

https://bitbucket.org/interfaceware/concepts/src/main/concepts/web/COL/

This video shows how tracing works in practice:

See for more information on how we do this in C++.