Quickstart: Debugging apps (JavaScript)

Article
04/23/2013

Visual Studio provides a comprehensive debugging experience for Windows Store apps built for Windows using JavaScript that includes features that are familiar to Internet Explorer and Visual Studio developers. This topic provides an overview of debugging features specific to these apps together with tutorials that show how to use these features.

When you debug, you can use an interactive debugging model, in which you can view and interact with the rendered HTML, CSS, and JavaScript code to fix problems. You can also use a more traditional Visual Studio debugging model, which enables you to perform important tasks like setting breakpoints and stepping through code. Or you can use some combination of both of these models.

The following table lists debugging features that are available for Windows Store apps using JavaScript, and provides links to additional info.

DOM Explorer	DOM Explorer provides a view that represents how the shell interprets a page, rather than the original source code. It gives you access to dynamic information about the styles, layouts, and attributes of currently selected elements. You can change the styles, layouts, and attributes and immediately see the results. For more info, see: Interactive debugging by using DOM Explorer How to inspect CSS rules How to view and edit the layout How to view event listeners
JavaScript Console window	In the JavaScript Console window, you can interact with the rendered app by sending messages to the console, by viewing the values of local and global variables, and by running JavaScript code. The console also reports JavaScript errors and exceptions, in addition to Document Object Model (DOM) and Windows Runtime exceptions. For more info, see: Interactive debugging by using the JavaScript Console window Single-line mode and multiline mode in the JavaScript Console window JavaScript Console commands
Refresh	Refresh allows you to edit source code and then reload pages without stopping and restarting the debugger. For more info, see How to refresh an app.
Select element	In DOM Explorer, you can select DOM elements by clicking areas of the running app in the Simulator or the host computer. For more info, see Selecting elements.
Debugging sessions	For info about how to start debugging sessions and app deployment, see: How to start a debugging session (JavaScript) Running Windows Store apps from Visual Studio
Breakpoints, stepping through code	The Visual Studio debugger enables you to set breakpoints and step through code by using commands like F5 (Start Debugging or Continue) and F11 (Step Into). When stepping through code, you can interact with the app based on the current state in the JavaScript Console window. For more info, see: Quickstart: Debugger navigation (JavaScript) Interactive debugging and break mode
Profiler	For info on finding performance issues in your app, see Analyzing the performance of Windows Store apps
JavaScript Memory Analyzer	For info on finding memory leaks in your app, Analyzing memory usage in Windows Store apps (JavaScript)

This topic also provides information about these JavaScript debugging tasks: Enabling first-chance exceptions and Debugging apps that use Windows Runtime Components.

Interactive debugging by using DOM Explorer

DOM Explorer shows you a view of the rendered page, and you can use DOM Explorer to change values and immediately see the results. This enables you to test changes by using an iterative process without stopping and restarting the debugger. The source code in your project doesn't change when you interact with the page by using this method, so when you find the desired code corrections, you stop the debugger and make the changes to your source code.

Tip

If you don't want to stop the debugger, you can make changes to your source code and then refresh your app by using the Refresh Windows app button on the Debug toolbar. For more info, see How to refresh an app.

You can use DOM Explorer to:

Inspect rendered HTML, CSS, and JavaScript code and navigate the DOM element subtree.
Dynamically change attributes for rendered elements.
Inspect the application of CSS styles to the page, and make changes dynamically.

When debugging apps, you often need to select elements in DOM Explorer. When you select an element, the values that appear on the tabs to the right automatically update to reflect the selected element in DOM Explorer. These are the tabs: Styles, Trace Styles, Layout, Attributes, and Events tabs. For more info about selecting elements, see Selecting elements.

Tip

If the DOM Explorer window is closed, click Debug > Windows > DOM Explorer to re-open it. The window only appears during a script debugging session.

In the procedure that follows, we'll go through the process of interactively debugging an app by using DOM Explorer. We'll create an app that uses a FlipView control and then debug it. The app's code contains several errors.

To use interactive debugging in DOM Explorer

Create a new solution in Visual Studio by clicking File > New Project.
Select the JavaScript template named Blank Application and type a name for the project, such as FlipViewApp.

In the BODY element of default.html, add this code:

    <div id="flipTemplate" data-win-control="WinJS.Binding.Template" 
             style="display:none">
        <div class="fixedItem" >
            <img src="#" data-win-bind="src: flipImg" />
        </div>
    </div>
    <div id="fView" style="width:100px;height:100px;background-color:#0094ff" 
        data-win-control="WinJS.UI.FlipView"
            data-win-options="{ itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
    </div>

Replace the code in default.js with this code:

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    var myData = [];
    for (var x = 0; x < 4; x++) {
        myData[x] = { flipImg: "/images/logo.png" }
    };

    var pages = new WinJS.Binding.List(myData, { proxy: true });

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !==
            activation.ApplicationExecutionState.terminated) {
                // TODO: . . .
            } else {
                // TODO: . . .
            }
            args.setPromise(WinJS.UI.processAll());

            updateImages();
        }
    };

    function updateImages() {

        pages.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
        pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
        pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
    };

    app.oncheckpoint = function (args) {
    };

    app.start();

    var publicMembers = {
        items: pages
    };

    WinJS.Namespace.define("Data", publicMembers);

})();

Note

The preceding JavaScript code is encapsulated in an anonymous function. This encapsulation follows the typical programming model used in the project templates. When you wrap code in this way, you can use the WinJS.Namespace.define function to access code elements from elsewhere in the app.

Select Simulator from the drop-down list next to the Start Debugging button on the Debug toolbar:
Click Debug > Start Debugging, or press F5, to run your app in debug mode.

This runs the app in the Simulator, but you'll see a mostly blank screen because the code has a few bugs in it. A default image in the upper left indicates that something loaded. If you click in that area of the screen, you see a FlipView arrow that indicates that the control instantiated, but the control isn't the right size.

Tip

You can press Alt+Tab, or F12, to switch between Visual Studio and the running app. If you're running the app in the Simulator instead of on the local machine, you can click the Visual Studio and Simulator buttons on the Windows taskbar to switch between windows.
In Visual Studio, click the DOM Explorer tab.
In the DOM Explorer window, select the DIV element for the section that has an ID of "fView":

Tip

You can also select the DIV element in the lower left corner of the JavaScript Console window by typing select(fView) at the >> input prompt and then pressing Enter.

Notice that the width and height are incorrectly set to pixel values in DOM Explorer.

The values that appear on the tabs on the right side of the DOM Explorer window automatically update to reflect the current element in DOM Explorer.
On the Attributes tab, double-click the style attribute. Edit the height and width so that both are set to 100%. After you press Enter, the new values are immediately reflected in the Simulator, even though you haven't stopped your debugging session.

Important

As you can update attribute values, you can also update values that appear on the Styles, Trace Styles, and Layout tabs. For more info, see How to inspect CSS rules and How to view and edit the layout.

The FlipView control is now sized correctly. It also functions correctly, but instead of the expected images you see the default images, missing images, and the expected images interspersed with the missing images.

There's a bug in the JavaScript code that causes this problem. In the next section, we'll explore one way to fix this bug by using the JavaScript Console window. To continue debugging, see Interactive debugging by using the JavaScript Console window

You can use the Refresh feature to modify HTML, CSS, and JavaScript code and quickly reload pages without stopping and restarting the debugger. For more info about the Refresh feature, see How to refresh an app.

To refresh your app while debugging

While the app is still running, switch to Visual Studio.
Open default.html and modify your source code by changing the height and width of the "fView" DIV element to 100%.
Click the Refresh Windows app button on the Debug toolbar (or press F4). The button looks like this: .

The app pages reload and the Simulator returns to the foreground.

As before, the images are still not showing correctly. You can continue debugging this app in the next section.

Interactive debugging by using the JavaScript Console window

You can run and update JavaScript code in JavaScript Console window. Like DOM Explorer, the JavaScript Console window enables you test changes without stopping and restarting the debugger, so you can immediately see the results in the rendered page. When you discover the desired change or changes, you then stop the debugger and make those corrections to your source code.

You can use the JavaScript Console window to:

Run scripts in either single-line or multiline mode.
View informational and error messages.
Perform other tasks, like clearing the screen. See JavaScript Console commands for the full list of commands.

Tip

If the JavaScript Console window is closed, click Debug > Windows > JavaScript Console to re-open it. The window only appears during a script debugging session.

In this procedure, we’ll continue debugging the FlipView app that we started debugging in the section Interactive Debugging by using DOM Explorer. We already saw that the FlipView control is working correctly but isn't displaying the expected images.

To debug the JavaScript code in the FlipView app

With the FlipView app running in the Simulator, type Data.items in the JavaScript Console window input prompt and press Enter.

A visualizer for the items object appears in the console window. This indicates that the items object instantiated and is available in the script context. In the console window, you can click through the nodes of an object to view property values (or use the arrow keys). If we click down into the items._data object, as you see in this illustration, we find that its image source references are incorrect, as expected. The default images are still present in the object, and there are missing images interspersed with the expected images.
At the prompt, type Data.items.push and press Enter. The console window shows the function implementation of push from a Windows Library for JavaScript (WinJS) project file. With a little investigation using IntelliSense, we find out that we should be using setAt to replace the default images.
To fix this problem interactively, without stopping the debugging session, open default.js and select this code from the updateImages function:
```
pages.push(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
pages.push(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
pages.push(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });
```
Copy and paste this code into the JavaScript Console input prompt.

Tip

When you paste multiline code into the JavaScript Console input prompt, the console input prompt automatically switches to multiline mode. You can press Ctrl+Alt+M to turn multiline mode on and off. To run a script in multiline mode, press Ctrl+Enter or click the arrow symbol on the lower-right corner of the window.

Correct the push function calls in the prompt, replacing pages.push with Data.items.setAt, and then click the arrow symbol to run the script. The corrected code should look like this:

Data.items.setAt.setAt(0, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223195" });
Data.items.setAt.setAt(1, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223196" });
Data.items.setAt.setAt(2, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });

Press Ctrl+Alt+M to switch the console input prompt to single-line mode, and then press Ctrl+A to select the previous input so you can remove it.
Type Data.items.length = 3 at the prompt, and then press Enter. This removes the extraneous elements from the data.
Check the Simulator again, and you'll see that the correct images are on the correct FlipView pages.
In DOM Explorer, you can see the updated DIV element, and you can navigate into the subtree to find the expected IMG elements.
Stop debugging by clicking Debug > StopDebugging or by pressing Shift+F5, and then fix the source code.

For the complete default.html page containing corrected sample code, see Debugging apps sample code (JavaScript).

Interactive debugging and break mode

You can use breakpoints and step into code while you're using JavaScript debugging tools like the JavaScript Console window. When a program that's running in the debugger encounters a breakpoint, the debugger temporarily suspends execution of the program. When execution is suspended, your program switches from run mode to break mode. You can resume execution at any time.

When a program is in break mode, you can still use the JavaScript Console window to run scripts and commands that are valid in the current application state. In this procedure, we'll use the FlipView app that we created in a previous procedure to demonstrate the use of break mode.

To set a breakpoint and debug the app

In the default.html file of the FlipView app that you previously created, right-click the updateImages() function and click Breakpoint > Insert Breakpoint.
Select Local Machine in the drop-down list next to the Start Debugging button on the Standard toolbar.
Click Debug > Start Debugging, or press F5.

The app enters break mode when execution reaches the updateImages() function, and the current line of program execution is highlighted in yellow.

You can change the values of variables to immediately affect the program state without ending the current debugging session.
Type updateImages at the prompt and press Enter. The function implementation appears in the console window.

Copy one line of the function into the prompt, and change the index value to 3:

pages.setAt(3, { flipImg: "https://go.microsoft.com/fwlink/?LinkID=223197" });

Press Enter to run the line of code.

If you want to step through the code line by line, press F11, or press F5 to continue program execution.
Press F5 to continue program execution. The FlipView app appears, and now all four pages show one of the non-default images.

To switch back to Visual Studio, press F12 or Alt+Tab.

Single-line mode and multiline mode in the JavaScript Console window

The input prompt for the JavaScript Console window supports both single-line mode and multiline mode. The interactive debugging procedure in this topic provides an example of using both of these modes. You can press Ctrl+Alt+M to switch between modes.

Single-line mode provides input history. You can navigate through the input history by using the Up Arrow and Down Arrow keys. Single-line mode clears the input prompt when you run scripts. To run a script in single-line mode, press Enter.

Multiline mode does not clear the input prompt when you run scripts. When you switch to single-line mode from multiline mode, you can clear the input line by pressing Ctrl+A and then typing any character. To run a script in multiline mode, press Ctrl+Enter or click the arrow symbol on the lower-right corner of the window.

Selecting elements

You can select DOM elements in three different ways when debugging an app:

By clicking on elements directly in the DOM Explorer window (or by using the arrow keys).
By using the Select Element button.
By using the select command, which is one of the JavaScript Console commands.

When you use the DOM Explorer window to select elements, and rest the mouse pointer on an element, the corresponding element is highlighted in the Simulator or device. You must click on the element in DOM Explorer to select it, or you can use the arrow keys to highlight and select elements).You can also select elements in DOM Explorer by using the Select element button. The following illustration shows the Select Element button.

Select Element Button in DOM Explorer

When you click Select element (or press Ctrl + B), this changes the selection mode so that you can select an item in DOM Explorer by clicking it in the app or Simulator. The mode changes back to normal selection mode after a single click. When you click Select element, the app comes to the foreground and the cursor changes to reflect the new selection mode. In this mode, when you rest the mouse pointer on elements in the Simulator or the device, a colored outline appears over the element. When you click the outlined element, DOM Explorer returns to the foreground with the specified element selected. For an example that demonstrates how to select elements by using the Select element button, see How to inspect CSS rules.

Debugging apps that use Windows Runtime Components

When you debug Windows Store apps using JavaScript that reference C# or Visual Basic WinMD files, or that include C++ Windows Runtime Components (a WinMD file and a DLL), you can specify which debugger to use. You cannot debug JavaScript and managed or native code simultaneously.

You can specify which debugger to run on the Debugging property page of the project. For more info, see How to start a debugging session (JavaScript).

Deploying apps

In some debugging scenarios for Windows Store apps built for Windows using JavaScript, you might need to deploy the app without starting it from Visual Studio. For example, apps intended to receive shared content might be started from the share UI, in which case you need to debug from the app that's sharing content. For the app that's receiving shared content, you can set the Launch Application property on the Debugging property page for the project to No. For more info about app deployment scenarios, see How to start a debugging session (JavaScript).

Enabling first-chance exceptions

By using first-chance exceptions, you can specify that an app should enter break mode when it encounters a runtime exception. When this feature is enabled, the app enters break mode even when exceptions are handled. This enables you to see some errors that would normally not be evident during debugging. Some libraries make extensive use of exceptions, and when working with these libraries it's best to leave first-chance exceptions disabled.

To enable first chance-exceptions

In Visual Studio, click Debug > Exceptions.
In the Exceptions dialog box, expand the JavaScript Runtime Exceptions node.
Select the Thrown check box for any exceptions that you want the debugger to always break on, and click OK.

Browser and Platform Support

The Visual Studio tools for JavaScript, the DOM Explorer and JavaScript Console window, are supported on the following platforms:

Windows Store apps built for Windows 8 using JavaScript
Internet Explorer 10 running on Windows 8

Go here to download Windows 8 and Visual Studio.

Share via