Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

When I develop code, I prefer using tracing to debug. This technique is especially useful for building sophisticated user interfaces in JavaScript.For our company's sophisticated web interfaces, we employ a straightforward method to toggle logging statements on and off throughout the codebase.

Expand
titleUse COL_TRC, COL_DBG, COL_ERR instead of console.log statements?

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

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

Code Block
languagejs
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

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

By using You can use COLtrace in the Javascript console one can switch on tracing in JavaScript console to activate tracing for specific sections of the code. The glob expressions are cumulative you use can add up, and you can subtracts exclude certain functions by matching a pattern. I.e. For example, COLtrace("* -COR*”)Means match everything exception functions starting with the letters COR") targets all functions except those starting with "COR".

Expand
titleUsing #some_page?trace=RECT* in the URL

Another way of switching You can also turn on tracing in the framework is to pass by passing a mock URL variable in the command line. This is convenient for configuring what method makes it easy to configure which parts of the code to trace on. Within In the application I am building currently this is done in this way:'m currently building, it's done like this.

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

Code Block
https://localhost:8080/#main?trace=RECT*
Code Block
languagejs
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

...