AppSuite:Debugging the UI
Synopsis: A collection of hints to debug during UI development. See also AppSuite:UI FAQ. Sister page: Debugging the server.
What capabilities are available?
_(ox.serverConfig.capabilities).pluck("id").sort();
Which files failed to load?
requirejs.s.contexts._.registry
What portal widgets are available?
require(['io.ox/portal/widgets'], function (widgets) {
console.log(widgets.getAvailablePlugins().sort());
});
Check settings
// check core settings
require('settings!io.ox/core').get();
// check mail settings
require('settings!io.ox/mail').get();
Clear all persistent caches
Please mind that this does not clear the regular browser cache! It clears localStorage, IndexedDB, and WebSQL.
ox.cache.clear();
Clear all portal widgets
Sometimes you manage to build a portal widgets that messes up all kinds of things when a user adds it. This is a rather blunt way of solving the problem:
require(['settings!io.ox/portal'], function(settings) {
settings.set('widgets/user', '').save();
});
Debug relogin
ox.autoLogoutRestartDebug();
Enable/disable capability via URL hash
Just add the parameter "cap" to URL hash. A leading minus disables a capability. Multiple capabilities separated by comma. Example:
...&cap=emoji,-calendar
Changes do not apply while developing
You did changes in your code and they don't simply don't apply? There are several possibilites, you should check in order to find a solution.
- Reload AppSuite with cleared Browser Cache. Using Firefox on Linux-Distributions you can simply press Ctrl+F5. Please check the documentation of your Browser for Shortcuts and how to clear the cache.
- Disable Source Caching. Therefor add the parameter "debug-js=true" to URL hash. Example:
...&debug-js=true
Debug a specific folder
If you want to get details of a specific folder, just inspect it via dev tools and look for data-obj-id="...". Copy the id and run the following in console:
void require('io.ox/core/api/folder').get({ folder: 'default0/INBOX' }).always(_.inspect);