Front-end debugging

Advanced

Front-end debugging is debugging of Creatio front-end implemented in configuration element schemas of the Client module type. Learn more in a separate article: Client module.

Integrated debugging tools 

Debug the front-end from the browser directly. To do this, use integrated developer tools provided by all supported browsers. All browsers provide similar debugging tools. Learn more in the official Google Chrome documentation, official Microsoft Firefox documentation, official Microsoft Edge documentation, and official Apple Safari documentation.

You can open the debugging tools in the following ways:

  • Press F12 or Ctrl+Shift+I in Google Chrome
  • Press F12 in Microsoft Firefox
  • Press F12 in Microsoft Edge

Scripts and breakpoints 

The development tools let you view the complete list of scripts that are connected to the page and downloaded to the client. You can set a breakpoint wherever you want the code to stop.

To set a breakpoint:

  1. Find the needed script file (you can do it by pressing Ctrl+O or Ctrl+P) and open it.
  2. Go to the code line to set the breakpoint. For example, you can search for a method by name.
  3. Set a breakpoint.

    You can set a breakpoint in the following ways:

    • click the line number
    • press F9
    • click Add breakpoint in the context menu

You can also set a conditional breakpoint which lets you set acondition that triggers the breakpoint.

Use the debugger command to suspend the execution of a script directly from the code.

Example that suspends the execution of a script from the code
function customFunc (args) { 
    ... 
    debugger; // <-- Debugger stops here. 
    ... 
}

You can view the current values of the variables, execute commands, etc. after the code execution is suspended.

Manage front-end debugging 

Check the values of the call stack variables after the code execution is suspended. Then, trace code for fragments where the actual program behavior differs from the expected.

View the browser debugger commands that let you navigate the code step by step in the table below.

Browser debugger commands
Command
Browser

Google Chrome

Microsoft Firefox

Microsoft Edge

Pause script execution (1)
+
+
+
Step over next function call (2)
+
+
+
Step into next function call (3)
+
+
+
Step out of current function (4)
+
+
+
Deactivate breakpoints (5)
+
Pause on exceptions (6)
+

Learn more about the features and commands of the browser navigation bar in the official documentation.

Browser console actions 

You can execute the following actions at the browser console:

  • call JavaScript commands
  • display debugging information
  • display trace information
  • measure and profile code

To do this, use the console object.

Call JavaScript commands 

  1. Open the browser console. To do this, open the Console tab. To open the Console tab besides the debugger, click Esc.
  2. Enter JavaScript commands at the console.
  3. Press Enter to execute the commands.

Display debugging information 

The console can display the following debugging information:

  • information messages
  • warnings
  • error messages

To display debugging information, use the corresponding methods of the console object listed in the table below.

Methods of the console object
Method
Description
Browser
Google Chrome
Microsoft Firefox
Microsoft Edge
console.log(object [, object, ...])
Displays comma-separated parameters at the console. Required to display various general-purpose messages.
+
+
+
console.info(object [, object, ...])
Similar to the log() method, but displays messages in a different format. This focuses attention on their importance.
+
+
+
console.warn(object [, object, ...])
Displays a warning at the console.
+
+
+
console.error(object [, object, ...])
Displays an error message at the console.
+
+
+ (8+)

The console applies a unique style to each message type.

The methods of the console object let you format console messages. You can use special control sequences (templates) in the message text. The templates are replaced by the corresponding values when displayed. The values are also transferred to the function in order of appearance.

View the formatting templates for the methods of the console object in the table below.

Formatting templates for the methods of the console object
Template
Data type
Use case
%s
String
console.log("%s is one of the base Creatio products %s", "Creatio sales", "Creatio");
%d, %i
Number
console.log("%s application was originally released in %d", "Creatio", 2011);
%f
Float
console.log("Pi character is equal to %f", Math.PI);
%o
DOM element (not supported by Microsoft Edge)
console.log("DOM-View of item <body/>: %o", document.getElementsByTagName("body")[0]);
%O
JavaScript object (not supported by Microsoft Edge, Microsoft Firefox)
console.log("Object: %O", {a:1, b:2});
%c
CSS style (not supported by Microsoft Edge)
console.log("%cGreen text, %cRed Text on a blue background, %cCapital letters, %cPlain text", "color:green;", "color:red; background:blue;", "font-size:20px;", "font:normal; color:normal; background:normal");

Display trace information 

View the browser console methods that let you trace and verify expressions in the table below.

Browser console methods that trace and verify expressions
Method
Description
Browser
Google Chrome
Microsoft Firefox
Microsoft Edge
console.trace()
Displays the call stack from the breakpoint and calls the method. The call stack contains file names, line numbers, and a count of trace() method calls from the same breakpoint.
+
+
+ (11+)
console.assert(expression[, object, ...])
Checks the expression passed as the expression parameter. If the expression is invalid, the console displays the error along with the call stack (console.error()). Otherwise, it displays nothing. This ensures the code rules are followed and lets you verify that the actual results of code execution are as expected. The method lets you test the code. If the execution result is false, an exception is thrown.
+
+ (28+)
+
Example that uses the console.assert() method to test results
var a = 1, b = "1"; 
console.assert(a === b, "A is not equal to B");

Measure and profile code 

View the browser console methods that let you measure code execution time in the table below.

Browser console methods that measure code execution time
Method
Description
Browser
Google Chrome
Microsoft Firefox
Microsoft Edge
console.time(label)
Activates a millisecond counter that has the label tag.
+
+
+ (11+)
console.timeEnd(label)
Stops the millisecond counter that has the label tag and displays the results at the console.
+
+
+ (11+)
Example that uses the console.time() and console.timeEnd() methods
var myArray = new Array(); 
/* Activate the counter with Initialize myArray tag. */ 
console.time("Initialize myArray"); 
myArray[0] = myArray[1] = 1; 
for (i = 2; i<10; i++) { 
    myArray[i] = myArray[i-1] + myArray[i-2]; 
} 
/* Deactivate the counter with Initialize myArray tag. */ 
console.timeEnd("Initialize myArray");

View the browser console methods that let you profile code and display the profiling stack in the table below. The profiling stack contains detailed information about the time it takes the browser to execute the operation.

Browser console methods that measure code execution time
Method
Description
Browser
Google Chrome
Microsoft Firefox
Microsoft Edge
console.profile(label)
Runs a JavaScript profiler, then displays the result using the label tag.
+
+ (if the DevTools panel is open)
+ (10+)
console.profileEnd(label)
Stops the JavaScript profiler.
+
+ (if the DevTools panel is open)
+ (10+)

The profiling results are displayed in the following browser tabs:

  • Profiles in Google Chrome
  • Performance in Microsoft Firefox
  • Profiler in Microsoft Edge

Front-end debugging mode isDebug 

The front-end debugging mode isDebug lets you retrieve detailed information about Creatio errors and track them in the code.

Browser minifies code in regular mode. This means client scripts are assembled in the all-combined.js file. The file is assembled when the assembly is created and contains the entire functionality. If you enable isDebug mode, the assembly and minification of *.js files are turned off. Client scripts are displayed as separate files.

Note. Front-end debugging mode affects Creatio performance. For example, it increases the time it takes to open pages.

To configure front-end debugging mode:

  1. Identify the current status of the front-end debugging mode. To do this, press F12 or Ctrl+Shift+I in Google Chrome.

    Besides the status of the front-end debugging mode, the console displays a code to activate or deactivate it.

  2. Enable front-end debugging mode.

    You can enable front-end debugging mode in the following ways:

    • Run code below at the browser console:

      Terrasoft.SysSettings.postPersonalSysSettingsValue("IsDebug", true)
    • Change the value of the Debug mode (isDebug code) system setting.

  3. Refresh the page or press F5 to apply the changes.

Creatio displays a Debug indicator next to the version number after you turn on front-end debugging mode.

View the examples that display error information in the console when isDebug mode is turned on and off on the figures below.

Error information (isDebug is turned off)
Error information (isDebug is turned on)
Debug the client code
Easy

To check the current status of the client debugging mode, open the browser console by pressing the F12 key or pressing Ctrl+Shift+I. Aside from the current status of the client debugging mode, the console will display the code to enable or disable debugging.

scr_debugmode_console.png

You can enable the client debugging mode using the following methods:

  • Execute the following code in the browser console
    Terrasoft.SysSettings.postPersonalSysSettingsValue("IsDebug", true)
    
  • Change the value of the [Debug mode] system setting.
    DebugMode_on1.gif

To apply the changes, refresh the page or hit F5.

Upon activating the client debugging mode, you will see the Debug indicator next to the site’s version number.

scr_debugmode_indicator.png

Note. Enabling the client debugging mode will affect site performance. For instance, it can increase the time needed for the pages to load.

The figures below show examples of errors displayed in the console with the ‘isDebug’ mode disabled and enabled.

Displaying an error (‘isDebug’ disabled)
scr_debugmode_off.png
Displaying an error (‘isDebug’ enabled)
scr_debugmode_on.png