How to debug front-end code using the Qbix Platform

Setting Breakpoints

Qbix Platform has a number of interface features, including dialogs, columns, drawers, etc. This is where breakpoints can come in really handy. If you see a problem that’s related to a dialog opening or closing, you can set a breakpoint on a common method like Q.Dialogs.push() or Q.Dialogs.close(). If it seems to be happening when a column opens up, then placing a breakpoint in the Q/columns tool’s open() or close() method may help catch it.

On the other hand, the error might be related to requests to servers on the Internet. Consider placing breakpoints into the Q.request() method or its callback response handler. If you’re loading a new page dynamically (in a tab, for instance), consider placing a breakpoint in Q.loadUrl() which is responsible for loading new pages.

Intercepting Methods

Sometimes, you want to intercept what an already-defined method is doing, in order to catch it in the act. You might have some luck replacing it on the prototype object, like so:

var f = Foo.prototype.bar;
Foo.prototype.bar = function () {
    debugger;
    return f.apply(this, arguments);
}

This replaces a function with one that will trigger a breakpoint for the debugger to inspect the call stack.

Logging information

Sometimes you just want to log information to the console, but not stop at a breakpoint. Consider creating a conditional breakpoint in Chrome, Safari, Firefox, Edge, etc. The condition can even look like this:

console.log(someVariable, someOtherVariable, Q.stackTrace());

This will help you know the values of variables and the contents of the stack at that time.

Git Bisect

If you can’t seem to find the problem in your logic, consider when it started. If this is something that used to work fine and now doesn’t, you can use git bisect on your local computer, until you can find the changeset that introduced the problem. From there, you typically have a lot of clues as to what it’s related to.

Patterns

Be aware of patterns used in Qbix front end, including:

  • Q.getter: caching, throttling, and more
  • Q.batcher: batching requests together before sending
  • Adapter Pattern such as Q.Users.init.web3 vs Q.Users.init.facebook

See more in the Qbix Platform guide: