Debugging a theme

• Debugging in Production
  • Debug Mode Cookie
  • FiddlerScript
• Debugging using the WComponents JAVA examples
  • Using a locally built theme with the WComponent examples
  • Changing the default session timeout
• Testing theme JavaScript
• Further information

Debugging in Production

If you need to debug an issue without switching to debug mode on the server there are various techniques to request debug versions of the theme.

Debug Mode Cookie

Available since version 1.5.15

In your browser:

1. Open dev tools
2. Enable debug mode:

// Enable for one day - nice touch on another person's machine in case you forget to clean up
// import("wc/dom/cookie.mjs").then(function({default: cookie}) {
require(["wc/dom/cookie"], function(cookie) {
    cookie.create("wcforcedebug", true, 1);
});

// native code would look something like this:
// document.cookie = "wcforcedebug=true; expires=Tue, 27 Nov 2018 23:01:32 GMT; path=/";

// Enable indefinitely - useful on a dev machine
// import("wc/dom/cookie.mjs").then(function({default: cookie}) {
require(["wc/dom/cookie"], function(cookie) {
    cookie.create("wcforcedebug", true);
});

// native code would look like this:
// document.cookie = "wcforcedebug=true; path=/"

3. Disable debug mode

// Disable
// import("wc/dom/cookie.mjs").then(function({default: cookie}) {
require(["wc/dom/cookie"], function(cookie) {
    cookie.create("wcforcedebug", false);
});

// native code would look like this:
// document.cookie = "wcforcedebug=false; path=/"

FiddlerScript

1. Install Fiddler

2. Install Syntax-Highlighting Add-Ons

3. Open Fiddler and go to the "FiddlerScript" tab

4. Find the section starting with class Handlers and add these two lines:

public static RulesOption("Debug WC")
var m_debugWC: boolean = false;

5. Find the section starting with static function OnBeforeRequest(oSession: Session) and add this block:

if(m_debugWC) {
    var wcScriptPaths = ["/theme/scripts/", "/wc_th/scripts/", "/theme_external/scripts/"];
    for (var idx = 0; idx < wcScriptPaths.length; idx++) {
        var wcScriptPath = wcScriptPaths[idx];
        if (oSession.uriContains(wcScriptPath)) {
            oSession["ui-backcolor"] = "Lavender";
            oSession.PathAndQuery = oSession.PathAndQuery.replace(wcScriptPath, wcScriptPath.replace("scripts", "scripts_debug"));
            FiddlerObject.StatusText="Rewrote URL to " +  oSession.PathAndQuery.replace(wcScriptPath, wcScriptPath.replace("scripts", "scripts_debug"));
            break;
        }
    }
}

6. Click "Save Script".

You should now have a Debug WC option in your Fiddler Rules menu. Enable it, clear your browser cache and try again.

Debugging using the WComponents JAVA examples

The WComponents JAVA examples (module wcomponents-examples) allows client side debugging of live samples with proper form submissions etc. This is required for some aspects of theme development, especially debugging CSS, write-state, submission and AJAX issues.

The examples are run using the wcomponents-examples-lde module. This module may be configured with a local_app.properties file to set some useful debugging options. The following configuration properties allow you to use the debug versions of the JavaScript and CSS within the WComponents examples.

bordertech.wcomponents.debug.enabled=true
# The next line is required for v1.3.x and earlier
# bordertech.wcomponents.debug.clientSide.enabled=true

Using a locally built theme with the WComponent examples

The WComponent example application will use the bundled theme. This is the WComponent default theme and is almost certainly not what you want to test. These run time properties are used to set a different theme:

# Point to a localy built theme
# or theme not on the class path
bordertech.wcomponents.theme.content.path=/theme/
bordertech.wcomponents.lde.theme.dir=/PATH/TO/theme/target/classes/theme
# OR point to a theme on the class path
bordertech.wcomponents.theme.name=MY_THEME

Changing the default session timeout

You can set a session session timeout using bordertech.wcomponents.lde.session.inactive.interval for example 86400 will set a timeout of one day.

Testing theme JavaScript

The JavaScript in wcomponents-theme is tested by the Intern. How to do it is detailed in Theme testing.

Further information

• Creating a theme
• Theme server config
• Theme testing
• Accessibility