How to Debug

Debug and minified versions

Regardless of the installation way, the package includes two versions of the JS sources:

  • full (webix.js) - human-readable code with debugging options
  • minified (webix.min.js) - light-weight code for production

So, you can include the appropriate file - only one JS file, not both - in the following way:

// full version
<link rel="stylesheet" href="../webix/codebase/webix.css" type="text/css"> 
<script src="../webix/codebase/webix.js" type="text/javascript"></script>
 
// minified version
<link rel="stylesheet" href="../webix/codebase/webix.min.css" type="text/css"> 
<script src="../webix/codebase/webix.min.js" type="text/javascript"></script>

Benefits of debug version

In order to use the debugging functionality, make sure that you have included the non-minified version of the library - webix.js.

With this file it will be possible to:

  • read and understand the source code;
  • inspect the arguments of methods and event handlers as well as component settings;
  • get warnings about improper configuration like undefined variables, syntax mistakes, etc;
  • get proper error stack instead of some incomprehensible internal errors;
  • track data loading errors;
  • use debugging flags to e.g. log all component events;
  • use a debugging menu for each component.

You can check the details in the related article in Webix blog.

Debugging flags

You can enable the following options for debugging:

  • Event logging, which is the best way to see what events fire in the current application:
webix.debug({events: true});
  • Size logging to see the defined and computed sizes of currently used UI components:
webix.debug({size:true});

Before version 6.0 the flags were enabled as:

webix.debug = true;
webix.debug_size = true;

Debugging menu

Debugging menu is activated with a "Ctrl + right mouse click" combination on the needed component and makes it possible to:

  • look up into the documentation for this component;
  • learn the component's dimensions;
  • study the component hierarchy on the page;
  • log JS and HTML objects of any component, see its configuration and data.

Before 6.0

Before Webix 6.0 the files had different names for the full and minified sources respectively:

// debug version
<link rel="stylesheet" href="../webix/codebase/webix.css" type="text/css"> 
<script src="../webix/codebase/webix_debug.js" type="text/javascript"></script>
 
// standard version
<link rel="stylesheet" href="../webix/codebase/webix.css" type="text/css"> 
<script src="../webix/codebase/webix.js" type="text/javascript"></script>
Back to top