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.

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.

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:

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.

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.

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: