Difference between revisions of "AppSuite:Debugging the UI"

(Does not load, fails with error: Could not read...)
Line 1: Line 1:
 
<div class="title">Debugging the UI</div>
 
<div class="title">Debugging the UI</div>
'''Synopsis:''' A collection of hints to debug during UI development
+
'''Synopsis:''' A collection of hints to debug during UI development. See also [[AppSuite:UI FAQ]].
 +
 
 
__TOC__
 
__TOC__
 +
 
== What capabilities are available? ==
 
== What capabilities are available? ==
 
<pre class="language-javascript">
 
<pre class="language-javascript">
Line 56: Line 58:
 
void require('io.ox/core/api/folder').get({ folder: 'default0/INBOX' }).always(_.inspect);
 
void require('io.ox/core/api/folder').get({ folder: 'default0/INBOX' }).always(_.inspect);
 
</pre>
 
</pre>
 
== Does not load, fails with error: Could not read... ==
 
"Could not read 'io.ox/core/http.js'"
 
"Could not read 'io.ox/core/events.js'"
 
That's not all, the system is probably hiding even more errors. It is more probable that the whole UI cannot be found. Check the com.openexchange.apps.path, usually hidden in manifests.properties. Does it point to where your webserver serves the files from? The default is /var/www/appsuite, on OSX is is more likely to be /Libraries/WebServer/Documents/appsuite
 
 
== App Suite loads, but no apps show up ==
 
So bother backend and frontend are devoid of errors, the UI loads nicely, you see the top bar with settings, notifications and refresh button but no apps at all, right? This is a manifest problem. Check the capabilities (see hint in the beginning of this page). If even those are correct, check the backend's /tmp folder and the manifest.properties there: Are the paths of <tt>com.openexchange.apps.path</tt> and <tt>com.openexchange.apps.manifestPath</tt> pointing to your build directory?
 
  
 
[[Category:AppSuite]]
 
[[Category:AppSuite]]
 
[[Category:UI]]
 
[[Category:UI]]
 
[[Category:Developer]]
 
[[Category:Developer]]

Revision as of 12:16, 5 December 2013

Debugging the UI

Synopsis: A collection of hints to debug during UI development. See also AppSuite:UI FAQ.

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();

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);