Front-end debugging tools overview

Level: advanced

Front-end debugging is debugging of Creatio front-end implemented in configuration elements of the Client module type. Learn more: Configuration elements of the Client module type.

Integrated debugging tools

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

View the ways to open the debugging tools in the table below.

Browser	Way to open the debugging tools
Google Chrome	F12	Ctrl + Shift + I
Mozilla Firefox	F12
Microsoft Edge	F12
Apple Safari	Option-Command-I

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. To do this, press 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. To do this, use one of 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 a condition that triggers the breakpoint. To do this, use the debugger command to suspend the execution of a script directly from the code.

Example that sets a conditional breakpoint

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.

To set a conditional breakpoint in Safari browser, follow the instructions: Add conditions to JavaScript breakpoints (official vendor documentation).

Manage front-end debugging

1. Check the values of the call stack variables after the code execution is suspended.
2. Trace code for fragments where the actual program behavior differs from what is expected.

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

Browser	Command
	Pause script execution (1)	Step over next function call (2)	Step into next function call (3)	Step out of current function (4)	Step (5)	Deactivate breakpoints (6)
Google Chrome	+	+	+	+	+	+
Mozilla Firefox	+	+	+	+	–	+
Microsoft Edge	+	+	+	+	+	+
Apple Safari	+	+	+	+	+	+

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

Browser console actions

Use the Console browser tab to execute the following actions:

• Call JavaScript commands
• Display debugging information
• Display trace information
• Measure and profile code

Call JavaScript commands

1. Open the Console tab in browser debugging tools. To open the Console tab beside the debugger, press Esc.
2. Enter the needed JavaScript commands.
3. Press Enter to execute the commands.

Display debugging information

The Console browser tab displays 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. The console applies a unique style to each message type.

Method	Description
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.

The methods of the console object let you format console messages. You can use special formatting 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.

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, Mozilla 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

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

Method	Description
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.
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.

Example that uses the console.time() and console.timeEnd() methods

var myArray = new Array();
/* Activate the counter that has "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 that has "Initialize myArray" tag. */
console.timeEnd("Initialize myArray");

Measure and profile code

To measure and profile code, use the corresponding methods of the console object listed in the table below. The methods let you profile code and display the profiling stack. The profiling stack contains detailed information about the time it takes the browser to execute the operation.

Method	Description
console.profile(label)	Runs a JavaScript profiler, then displays the result using the label tag.
console.profileEnd(label)	Stops the JavaScript profiler.

Apple Safari browser displays the profiling results in the Timelines browser tab. Another browsers display the profiling results in the Performance browser tab.

---

See also

Configuration elements of the Client module type

---

Resources

Developer tools (official Google Chrome documentation)

Developer tools (official Mozilla Firefox documentation)

Developer tools (official Microsoft Edge documentation)

Developer tools (official Apple Safari documentation)