Detect DEBUG build configuration via JavaScript in Windows Store apps

Update (2012-09-29): Now you can use the package WinRT-JsDebugSymbols available via NuGet instead of manually adding the code to your project, and will receive future updates.

One of the things I miss when developing Windows Store apps in HTML/JavaScript, is the possibility of using conditional compilation statements, in order to have different behavior depending on the build configuration selected when the project was compiled (e.g. Debug, Release, etc…), as we do in C# using #ifdef instructions.

Unfortunately, when compiling JavaScript Windows Store projects, there’s no preprocessor that analyses the .js files to remove code blocks based on expressions #ifdef-like.

By the way, all versions of Internet Explorer supports a special syntax for conditional compilation of JavaScript code, but this syntax is not supported in Windows Store apps as described in the MSDN article.

Thus, the current trick/technique is to have some global variable that we can use to identify – during execution time – in which build configuration the app is running.

Hence we can’t access the Visual Studio’s variable $(Configuration) in JavaScript, the only way I found to get the name of the build configuration was through the path where the application is located during development, which is something like this: “…\App\bin\Debug\AppX” or “…\App\bin\Release\AppX”, depending on the build configuration selected.

Using Windows.ApplicationModel.Package.current.installedLocation.path, we can get the location path where the app is installed, therefore my solution was to create a JavaScript file which I called debugSymbols.js, that defines a read-only property called isDebugBuild whenever the app package is installed in a path ending with “\Debug\AppX”, ignoring case sensitiveness.

(function () {
    "use strict";

    if (Debug.hasOwnProperty("isDebugBuild")) {
        return;
    }
    
    var thisPackage = Windows.ApplicationModel.Package.current,
        installedPath = thisPackage.installedLocation.path;

    if (typeof installedPath === "string") {

        if (installedPath.match(/\\debug\\appx$/i)) {

            Object.defineProperty(Debug, "isDebugBuild", {
                get: function () {
                    return true;
                }
            });
        }
    }

})();

That way, we just need to include the debugSymbols.js file in the header section of the HTML pages, ideally before any other script file so that it gets loaded first, making the isDebugBuild property available to the other scripts in the page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>My App</title>

    <!-- Debug symbols -->
    <script src="/js/debugSymbols.js"></script>

    <!-- WinJS references -->
    <!-- // ... -->

And query Debug.isDebugBuild property whenever we need.

// Example:
//   Show a dialog box with details of any unhandled
//   exceptions occurring in the application, only for
//   Debug builds.
if (Debug.isDebugBuild) {
    WinJS.Application.onerror = function (e) {

        var dialog = new Windows.UI.Popups.MessageDialog(
            e.detail.stack, e.detail.message);

        dialog.showAsync().done();

        return true;
    };
}

Note: It’s important to realize that, unlike what happens with conditional compilation (e.g.: #ifdef), all the JavaScript code will be included in the app package and the query for the property value happens during execution time.

This entry was posted in JavaScript, NuGet, Windows 8 and tagged , , , , , , . Bookmark the permalink.

3 Responses to Detect DEBUG build configuration via JavaScript in Windows Store apps

  1. Pingback: Global exception handling in Windows Store JavaScript applications | Caio Proiete (EN)

  2. pke says:

    You could also just include a debug.js file only in debug build configurations and exclude the file in release builds. You can then either let Windows load the file using script tags in your (default.html) or you dynamically load it during runtime. In the file you could define the Debug namespace and its properties.
    Because the variant you show here does not work when you sideload your app on another users PC.

  3. Thanks so much for this, it really helps. One small issue though…

    I noticed is that if debugging is being done via the remote debugger then the regex won’t work since the path is not the same. My solution to this is to modify the ‘if’ statement on line thirteen from:

    if (installedPath.match(/\\debug\\appx$/i)) {

    to:

    if (installedPath.match(/\\debug\\appx$/i) || installedPath.match(/\.debug_/i)) {

    This should work when debugging locally or remotely.

    Thanks again for this useful package!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>