Javascript Tracing

When I develop code, I prefer using tracing to debug. This technique is especially useful for building sophisticated user interfaces in JavaScript.

Use COL_TRC, COL_DBG, COL_ERR instead of console.log statements?

Generally you only want logging switched on in the code one is 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 I am working on.

The function names I 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

COLtrace("RECT*") - Use glob matching expressions to trace on all functions beginning with the letters RECT

By using COLtrace in the Javascript console one can switch on tracing in sections of the code.

The glob expressions are cumulative and you can subtracts functions matching a pattern.

I.e. COLtrace(“* -COR*”)

Means match everything exception functions starting with the letters COR.

Using #some_page?trace=RECT* in the URL

Another way of switching on tracing in the framework is to pass a mock URL variable in the command line. This is convenient for configuring what parts of the code to trace on. Within the application I am building currently this is done in this way:

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

Source code for the 'good enough' tracing framework.

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/

Video showing it action

This video shows how tracing works in practice:

Javascript tracing.mp4

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