Page disappears when including webix-debug.js

Webix JS
1

I just started with Webix yesterday and I’m very please by the way it works except that I can’t figure out the debugging part.

I implemented the same code from the tutorial:

http://pastie.org/9411864

This works very well.

But as soon as I include this tag:

	<script src="{{ STATIC_URL }}codebase/webix_debug.js" type="text/javascript" charset="utf-8"></script>

Then the page just goes blank. And I don’t know how to debug this or any problems like this.

Any clue?

2

Hi,

I reproduced the situation locally, for me it works normally.

Are there any mistakes in console? Try executing

alert(webix.version);

to see whether webix is loaded at all or not.

3

Yes I get an alert of the version (1.9.0)

One thing that I noticed, without the debugger included, I don’t get any errors in the console.
With the debugger though, I get:

1846×192 24.4 KB

4

Seems that you are including both webix.js and webix_debug.js files at the same time. One should use webix.js for production version and webix_debug.js during development.

They feature the same functionality in terms of components, but webix_debug features a lot of hints in case of developer mistakes.

5

Actually nothing more is needed once you’ve included webix_debug.js. Different debug flags are optional. I tried it locally - Shift-RightClick over some Webix component - debug context menu works well.

6

AH! Got it! Thanks a lot!

So now the page is opening at least. But Shift-RightClick does nothing for me, opens the regular context menu. Are there some further steps that need to be taken to debug?

7

Okay strangely, For me CTRL-Rightclick work, and not Shift-Rightclick. Anyway, works now, thanks!

Last question:
On the left is a working page, on the right is the same page with a tiny change:

http://www.mergely.com/JIZwVoQR/

As you can see I just removed width and added ‘adjust: “data”’

If you try running that page, you’ll see that again, the page simply refuses to load. And the CTRL-RIGHTCLICK Debug menu of course doesnt work, and I get a single error message in the Console:

Uncaught TypeError: string is not a function AT host:port/static/codebase/webix_debug.js:15598

Now obviously this is thoroughly useless for me since I can’t understand what I did wrong in the code change. In this situation it’s easy to revert to a working config since the change was small, but you can understand why this is a problem.

  1. Is this a limitation of Webix? Or is there a way to debug this sort of problem properly?
  2. What’s wrong with the adjust: “data” line and why did it cause the page to blank out?

Thank you so much Helga for all the help.

8

Oh, sure its Ctrl+Rightclick, I didn’t get you, sorry. I’ll update the docs with the wrong info as well.

I don’t think using webix_debug.js is useless. You can inspect the error in console and find the place in code where an error happened. In compressed code (webix.js) it would be totally impossible.

Try using different browsers as the debug info they give may vary. In Firefox, for instance, the same error looks like:

TypeError: config.template is not a function
value = config.template(item, this.type, value, config, i);

So you understand that something is wrong with item template.

Actually, in this case you’ve found a bug :wink: adjust and template properties don’t work correctly when using at the same time.

Still, if you define item template as function, everything goes well:

{ id:"colfilter", header:"", adjust:"data", template:function(obj, common){
	return common.treetable(obj, common)+" "+obj.colfilter;
    }
}
9

You can as well adjust data dynamically, e.g. when you open/close nodes

$$("$treetable1").adjustColumn("value");

And the fix for the bug we spoke about will be available with the next update.