Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.
2 out of 3 rated this helpful - Rate this topic

Quickstart: Debug HTML, CSS, and JavaScript

applies to both windows and phone

For Store apps built using JavaScript, Visual Studio provides a comprehensive debugging experience that includes features that are familiar to Internet Explorer and Visual Studio developers. These features are supported for Windows Store and Windows Phone Store apps. This topic provides an overview of debugging features specific to these JavaScript apps and 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. Using DOM inspection tools and the JavaScript Console window, you can interact with the live DOM and app code without stopping and restarting the debugger. 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 Store apps using JavaScript, and provides links to additional info.

DOM Explorer

DOM Explorer is a DOM inspection tool that provides a view of the live DOM rather than the original source code. It gives you access to dynamic information about the CSS styles, computed 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:

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, by viewing object visualizers, 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:

Refresh

Refresh allows you to edit source code and then reload pages without stopping and restarting the debugger. For more info, see Refresh an app (JavaScript).

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 app deployment and how to start debugging sessions, see:

Breakpoints, stepping through code

For info about setting breakpoints and stepping through code, see:

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 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 make the changes to your source code.

Tip Tip

To avoid stopping and restarting the debugger when you make changes to your source code, you can refresh your app by using the Refresh Windows app button on the Debug toolbar (or by pressing F4). For more info, see Refresh an app (JavaScript).

You can use DOM Explorer to:

  • Inspect rendered HTML, CSS, and JavaScript code and navigate the DOM element subtree.

  • Dynamically edit attributes and CSS styles for rendered elements and immediately see the results.

  • Inspect how CSS styles have been applied to page elements, and trace the rules that have been applied.

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

Tip Tip

If the DOM Explorer window is closed, choose 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 contains several errors.

To debug by inspecting the live DOM

  1. Create a new solution in Visual Studio by choosing File > New Project.

  2. Choose JavaScript > Store, choose either Windows Apps or Windows Phone Apps, and then choose Blank App.

  3. Type a name for the project, such as FlipViewApp, and choose OK to create the app.

  4. 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"
        data-win-control="WinJS.UI.FlipView" data-win-options="{
        itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
    </div>
    
  5. Open default.css, and add the following CSS:

    #fView {
        background-color:#0094ff;
        height: 100%;
        width: 100%;
        margin: 25%;
    }
    
  6. 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.setAt(0, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223195" });
            pages.setAt(1, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223196" });
            pages.setAt(2, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223197" });
        };
    
        app.oncheckpoint = function (args) {
        };
    
        app.start();
    
        var publicMembers = {
            items: pages
        };
    
        WinJS.Namespace.define("Data", publicMembers);
    
    })();
    

    The following illustration shows what we want to see if we run this app in the Phone Emulator (it looks similar in the Simulator). However, to get the app into this state we will have to fix a number of bugs first.

    FlipView app showing expected results
  7. Choose either Simulator or Emulator 8.1 WVGA 4 inch 512MB from the drop-down list next to the Start Debugging button on the Debug toolbar:

    Select debug target list
  8. Choose Debug > Start Debugging, or press F5, to run your app in debug mode.

    This runs the app in the Simulator or the Phone Emulator, but you'll see a mostly blank screen because the styling has a few bugs in it. The first FlipView image appears in a small square near the middle of the screen.

  9. If you're running the app in the Simulator, choose the Change resolution toolbar command on the right of the Simulator to configure a screen resolution of 1280 x 800. This will ensure that values shown in the following steps match what you see in the Simulator.

  10. Switch to Visual Studio and choose the DOM Explorer tab.

    Tip Tip

    You can press Alt+Tab or F12 to switch between Visual Studio and the running app.

  11. In the DOM Explorer window, select the DIV element for the section that has an ID of "fView". Use the arrow keys to view and select the correct DIV element. (The right arrow key allows you to view an element’s children.)

    DOM Explorer
    Tip 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.

    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.

  12. Choose the Computed tab on the right.

    This tab shows the computed, or final, value for each property of the selected DOM element.

  13. Open the height CSS rule. Notice that there’s an inline style set to 100px, which appears inconsistent with the height value of 100% set for the #fView CSS selector. Strikethrough text for the #fView selector indicates that the inline style is taking precedence over this style.

    The following illustration shows the Computed tab.

    DOM Explorer Computed tab
  14. In the main DOM Explorer window, double-click the inline style for the height and width of the fView DIV element. You can now edit the values here. In this scenario, we want to remove them completely.

  15. Select width: 100px;height: 100px;, press the Delete key, and then press Enter. After you press Enter, the new values are immediately reflected in the Simulator or the Phone Emulator, although you haven't stopped your debugging session.

    Important note Important

    As you can update attributes in the DOM Explorer window, you can also update values that appear on the Styles, Computed, and Layout tabs. For more info, see Debug CSS styles using DOM Explorer and Debug layout using DOM Explorer.

  16. Switch to the app by selecting the Simulator or the Phone Emulator, or by using Alt+Tab.

    Now the FlipView control appears larger than the Simulator's or the Phone Emulator's screen size. This is not the intended result. To investigate, switch back to Visual Studio.

  17. In the DOM Explorer, select the Computed tab again and open the height rule. The fView element still shows a value of 100%, as expected from the CSS, but the computed value is equal to the Simulator's screen height (for example, 800px or 667.67px), which is not what we want for this app. To investigate, you can remove the height and width for the fView DIV element.

  18. In the Styles tab, uncheck the height and width properties for the #fView CSS selector.

    The Computed tab now shows a height of 400px. The information indicates that this value comes from the .win-flipview selector specified in ui-dark.css, which is a platform CSS file.

  19. Switch back to the app.

    Things have improved. However, there is still one more problem to fix: the margins appear too large.

  20. To investigate, switch to Visual Studio and choose the Layout tab to look at the element’s box model.

    In the Layout tab, you'll see the following values:

    • For the Simulator: 320px (Offset) and 320px (Margin).

    • For the Phone Emulator: 100px (Offset) and 100px (Margin).

    The following illustration shows how the Layout tab looks if you're using the Phone Emulator (100px offset and margin).

    DOM Explorer Layout tab

    This doesn’t seem right. The Computed tab also shows the same margin values.

  21. Choose the Styles tab and locate the #fView CSS selector. Here, you see a value of 25% for the margin property.

  22. Select the 25% and change it to 25px, and press Enter.

  23. Also in the Styles tab, choose the height rule for the .win-flipview selector and change 400px to 500px, and press Enter.

  24. Switch back to the app and you see that the placement of elements appears correct. To make fixes to the source and refresh the app without stopping and restarting the debugger, see the following procedure.

To refresh your app while debugging

  1. While the app is still running, switch to Visual Studio.

  2. Open default.html and modify your source code by changing the height and width of the "fView" DIV element to 100%.

  3. Choose the Refresh Windows app button on the Debug toolbar (or press F4). The button looks like this: Refresh Windows app button.

    The app pages reload and the Simulator or Phone Emulator returns to the foreground.

    For more info about the Refresh feature, see Refresh an app (JavaScript).

You can run and update JavaScript code in the 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 messages and error messages.

  • Return visualizers for objects, or view visualizers sent from app code.

  • Perform other tasks, like clearing the screen. See JavaScript Console commands for the full list of commands.

Tip Tip

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

In this procedure, we will also debug the FlipView app that worked on in the previous section, Inspecting the Live DOM. We already saw that the FlipView control is working correctly but now we want to show how to interactively debug a JavaScript coding error.

To debug the JavaScript code in the FlipView app

  1. In the BODY element of default.html, replace the existing HTML code with 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" data-win-control="WinJS.UI.FlipView" data-win-options="{
        itemDataSource: Data.items.dataSource, itemTemplate: flipTemplate }">
    </div>
    
  2. Open default.css and replace the CSS for the #fView selector with this CSS:

    #fView {
        background-color:#0094ff;
        height: 500px;
        margin: 25px;
    }
    
  3. Open default.js and replace the code with the following JavaScript 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: "http://go.microsoft.com/fwlink/?LinkID=223195" });
            pages.push(1, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223196" });
            pages.push(2, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223197" });
    
        };
    
        app.oncheckpoint = function (args) {
        };
    
        app.start();
    
        var publicMembers = {
            items: pages
        };
    
        WinJS.Namespace.define("Data", publicMembers);
    
    })();
    
  4. If a debugging target isn't already selected, choose Simulator or Emulator 8.1 WVGA 4 inch 512MB from the drop-down list next to the Start Debugging button on the Debug toolbar:

    Select debug target list
  5. Press F5 to start the debugger.

    The app runs but images are missing. APPHOST errors in the JavaScript Console window indicate that images are missing.

  6. With the FlipView app running in the Simulator or the Phone Emulator, type Data.items in the console window input prompt (next to the “>>” symbol) 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 current 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 (logo.png) are still present in the object, and there are missing images interspersed with the expected images.

    JavaScript Console window

    Importantly, there are many more items in items._data object than we expected.

  7. At the prompt, type Data.items.push and press Enter. The console window shows a visualizer for the push function, which is implemented in a Windows Library for JavaScript (WinJS) project file. In our app code, we are using push to add the correct items. With a little investigation using IntelliSense, we find out that we should be using setAt to replace the default images.

  8. 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: "http://go.microsoft.com/fwlink/?LinkID=223195" });
    pages.push(1, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223196" });
    pages.push(2, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223197" });
    

    Copy and paste this code into the JavaScript Console input prompt.

    TipTip

    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 choose the arrow symbol in the lower-right corner of the window.

  9. Correct the push function calls in the prompt, replacing pages.push with Data.items.setAt. The corrected code should look like this:

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

    If you want to use the pages object instead of Data.items, you would need to set a breakpoint in your code to keep the pages object in scope.

  10. Choose the green arrow symbol to run the script.

  11. Press Ctrl+Alt+M to switch the console input prompt to single-line mode, and then choose Clear input (the red “X”) to delete the code from the input prompt.

  12. Type Data.items.length = 3 at the prompt, and then press Enter. This removes the extraneous elements from the data.

  13. Check the Simulator or the Phone Emulator again, and you'll see that the correct images are on the correct FlipView pages.

  14. In DOM Explorer, you can see the updated DIV element, and you can navigate into the subtree to find the expected IMG elements.

  15. Stop debugging by choosing Debug > StopDebugging or by pressing Shift+F5, and then fix the source code.

    For the complete default.html page containing corrected sample code, see Debug HTML, CSS, and JavaScript sample code.

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 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 fixed version of 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

  1. In the default.html file of the FlipView app that you previously created, open the shortcut menu for the updateImages() function, and then choose Breakpoint > Insert Breakpoint.

  2. Choose Local Machine or Emulator 8.1 WVGA 4 inch 512MBin the drop-down list next to the Start Debugging button on the Standard toolbar.

  3. Choose 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.

    Using break mode with the JavaScript Console

    You can change the values of variables to immediately affect the program state without ending the current debugging session.

  4. Type updateImages at the prompt and press Enter. A visualizer for the function appears in the console window.

  5. Select the function in the console window to show the function implementation.

    The following illustration shows the console window at this point.

    JavaScript Console Window showing a visualizer
  6. Copy one line of the function from the output window to the input prompt, and change the index value to 3:

    pages.setAt(3, { flipImg: "http://go.microsoft.com/fwlink/?LinkID=223197" });
    
  7. 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.

  8. 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.

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 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 Clear input (the red “X”). To run a script in multiline mode, press Ctrl+Enter or choose the arrow symbol in the lower-right corner of the window.

You can select DOM elements in three 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 (Ctrl+B).

  • 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 running app. 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 running app. 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. When you click the outlined element, DOM Explorer returns to the foreground with the specified element selected.

Before you choose Select Element, you can specify whether to highlight elements in the running app by toggling the Display web page highlights button. The following illustration shows this button. Highlights are displayed by default.

Display web page highlights button

When you choose to highlight elements, elements that you hover over in the Simulator are highlighted. Colors for highlighted elements match the box model that appears in the Layout tab of DOM Explorer.

Note Note

Highlighting elements by hovering over them is only partially supported in the Windows Phone Emulator.

For an example that demonstrates how to select elements by using the Select element button, see Debug CSS styles using DOM Explorer.

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

  • Windows Store and Windows Phone Store apps using JavaScript

  • Internet Explorer 11 running on Windows 8.1

  • Internet Explorer 10 running on Windows 8

Go here to download Windows 8 and Visual Studio.

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.