Progress will discontinue Telerik Platform on May 10th, 2018. Learn more

Debug in the Simulator

Filter by IDE
Select the Progress AppBuilder client you are currently using for development.

IDE

You can debug your app while running it in the simulator.

The device simulator in the extension for Visual Studio, the classic Windows desktop client and the command-line interface provides a stand-alone debugger tool, based on the WebKit Web Inspector Open Source app.

The device simulator in the in-browser client does not provide a built-in debugger tool but you can run the browser debug tool to debug your app. In Chrome and Safari, the built-in browser debugger tool is based on the WebKit Web Inspector Open Source app.

Prerequisites

  • Verify that your preferred AppBuilder client is running and you are logged in.
  • Verify that you have opened the code for your app in AppBuilder.

Procedure

In-Browser

For apps developed with TypeScript, you cannot debug the TypeScript source files. You need to debug the transpiled JavaScript files.

  1. In the top menu bar, select RunOpen Simulator.
  2. Launch the debugger tool for your browser.
    For example, in Chrome, press F12.
  3. If you want to debug TypeScript code, enable source maps.
    1. Click the cogwheel.
    2. In the Sources section, select the Enable source maps check box.
    3. Close the Options dialog.
    4. In the device simulator, click Reload.
  4. If you want to execute commands in the JavaScript console, change the current frame.
    1. In the console, click <top frame> in the toolbar below the menu bar.
    2. Select projectHost.
  5. Debug your app.

    Operation Action Description
    Inspect element In the debugger, click the inspect element icon in the top left corner and on the device, tap the element that you want to inspect Opens the Elements pane in the debugger and selects the HTML markup corresponding to the element.
    Inspect the diagnostic log In the debugger, click Console In the Console pane, you can inspect diagnostic log information such as errors and warnings, console.log() messages and so on.
    Inspect the page structure In the debugger, click Elements In the Elements pane, you can examine your Document Object Model (DOM) and Cascading Style Sheets (CSS) rules. You can make quick changes to your DOM or CSS and immediately preview how the changes affect your page. A sidebar section shows event listeners and lets you create new style rules and navigate to the rule you want to edit.
    Inspect the application resources In the debugger, click Resources In the Resources pane, you can inspect HTML5 offline data, view and modify localStorage and sessionsStorage data, inspect SQL database information and execute SQL queries from a command-line interface. You can see cookie information for all domains accessed on the current page.
    Inspect the network requests of your application In the debugger, click Network In the Network pane, you can inspect resources that are requested and downloaded over the network in real time. You can identify requests that take longer and attempt to address them to optimize your app.
    Inspect the source files of your application, insert breakpoints and debug your code In the debugger, click Sources and enable debugging, if not enabled In the Sources pane, you can open source files to add breakpoints and modify your code to debug it without affecting the corresponding file in your app.
    Inspect the values of variables and expressions In the Sources tab, open the file that contains the expression, select the expression, right-click it and select Add to Watch In the Watch Expressions panel in the Sources tab, you can track the values of variables and expressions during the debugging session.
    Inspect how the device browser interacts with the application In the debugger, click Timeline The Loading, Scripting and Rendering timelines show how and when HTML is parsed and how HTML calculates styles and performs other operations with your app.
    Inspect resource-consumption data for your application In the debugger, click Profiles and enable profiling, if not enabled In the Profiles pane, you can collect and inspect information about resource consumption. With this data, you can identify problem areas and improve performance.
    Test the performance of your app In the debugger, click Audits In the Audits pane, you can run automated tests for Network Utilization and Web Page Performance, which return a variety of suggestions for optimizing your website.
    Run JavaScript commands for testing and debugging In the debugger, click Console In the Console pane, you can run commands to interact with your application. You can evaluate expressions and issue commands to select DOM elements, command the CPU profiler, monitor events and view event listeners.

Universal

For apps developed with TypeScript, you cannot debug the TypeScript source files. You need to debug the transpiled JavaScript files.

  1. In the top menu bar, select RunOpen Simulator.
  2. In the device simulator, from the main menu, select HelpTroubleshootingToggle Developer Tools.
  3. If you want to debug TypeScript code, enable source maps.
    1. Click the cogwheel.
    2. In the GeneralSources section, select the Enable JavaScript source maps check box.
    3. Close the Options dialog.
    4. In the device simulator, click Reload.
  4. If you want to execute commands in the JavaScript console, change the current frame.
    1. In the console, click <top frame> in the toolbar below the menu bar.
    2. Select projectHost.
  5. Debug your app.

    Operation Action Description
    Inspect element In the debugger, click the inspect element icon in the top left corner and on the device, tap the element that you want to inspect Opens the Elements pane in the debugger and selects the HTML markup corresponding to the element.
    Inspect the diagnostic log In the debugger, click Console In the Console pane, you can inspect diagnostic log information such as errors and warnings, console.log() messages and so on.
    Inspect the page structure In the debugger, click Elements In the Elements pane, you can examine your Document Object Model (DOM) and Cascading Style Sheets (CSS) rules. You can make quick changes to your DOM or CSS and immediately preview how the changes affect your page. A sidebar section shows event listeners and lets you create new style rules and navigate to the rule you want to edit.
    Inspect the application resources In the debugger, click Resources In the Resources pane, you can inspect HTML5 offline data, view and modify localStorage and sessionsStorage data, inspect SQL database information and execute SQL queries from a command-line interface. You can see cookie information for all domains accessed on the current page.
    Inspect the network requests of your application In the debugger, click Network In the Network pane, you can inspect resources that are requested and downloaded over the network in real time. You can identify requests that take longer and attempt to address them to optimize your app.
    Inspect the source files of your application, insert breakpoints and debug your code In the debugger, click Sources and enable debugging, if not enabled In the Sources pane, you can open source files to add breakpoints and modify your code to debug it without affecting the corresponding file in your app.
    Inspect the values of variables and expressions In the Sources tab, open the file that contains the expression, select the expression, right-click it and select Add to Watch In the Watch Expressions panel in the Sources tab, you can track the values of variables and expressions during the debugging session.
    Inspect how the device browser interacts with the application In the debugger, click Timeline The Loading, Scripting and Rendering timelines show how and when HTML is parsed and how HTML calculates styles and performs other operations with your app.
    Inspect resource-consumption data for your application In the debugger, click Profiles and enable profiling, if not enabled In the Profiles pane, you can collect and inspect information about resource consumption. With this data, you can identify problem areas and improve performance.
    Test the performance of your app In the debugger, click Audits In the Audits pane, you can run automated tests for Network Utilization and Web Page Performance, which return a variety of suggestions for optimizing your website.
    Run JavaScript commands for testing and debugging In the debugger, click Console In the Console pane, you can run commands to interact with your application. You can evaluate expressions and issue commands to select DOM elements, command the CPU profiler, monitor events and view event listeners.

Windows

For apps developed with TypeScript, you cannot debug the TypeScript source files. You need to debug the transpiled JavaScript files.

  1. In the top menu bar, click RunIn simulator.
  2. In the device simulator, click Debugger.
  3. If you want to debug TypeScript code, enable source maps.
    1. Click the cogwheel at the bottom of the debug tools.
    2. In the Sources section, select the Enable source maps check box.
    3. Close the Options dialog.
    4. In the device simulator, click Reload.
  4. Debug your app.

    Operation Action Description
    Inspect element In the debugger, click the inspect element icon in the top left corner and on the device, tap the element that you want to inspect Opens the Elements pane in the debugger and selects the HTML markup corresponding to the element.
    Inspect the diagnostic log In the debugger, click Console In the Console pane, you can inspect diagnostic log information such as errors and warnings, console.log() messages and so on.
    Inspect the page structure In the debugger, click Elements In the Elements pane, you can examine your Document Object Model (DOM) and Cascading Style Sheets (CSS) rules. You can make quick changes to your DOM or CSS and immediately preview how the changes affect your page. A sidebar section shows event listeners and lets you create new style rules and navigate to the rule you want to edit.
    Inspect the application resources In the debugger, click Resources In the Resources pane, you can inspect HTML5 offline data, view and modify localStorage and sessionsStorage data, inspect SQL database information and execute SQL queries from a command-line interface. You can see cookie information for all domains accessed on the current page.
    Inspect the network requests of your application In the debugger, click Network In the Network pane, you can inspect resources that are requested and downloaded over the network in real time. You can identify requests that take longer and attempt to address them to optimize your app.
    Inspect the source files of your application, insert breakpoints and debug your code In the debugger, click Sources and enable debugging, if not enabled In the Sources pane, you can open source files to add breakpoints and modify your code to debug it without affecting the corresponding file in your app.
    Inspect the values of variables and expressions In the Sources tab, open the file that contains the expression, select the expression, right-click it and select Add to Watch In the Watch Expressions panel in the Sources tab, you can track the values of variables and expressions during the debugging session.
    Inspect how the device browser interacts with the application In the debugger, click Timeline The Loading, Scripting and Rendering timelines show how and when HTML is parsed and how HTML calculates styles and performs other operations with your app.
    Inspect resource-consumption data for your application In the debugger, click Profiles and enable profiling, if not enabled In the Profiles pane, you can collect and inspect information about resource consumption. With this data, you can identify problem areas and improve performance.
    Test the performance of your app In the debugger, click Audits In the Audits pane, you can run automated tests for Network Utilization and Web Page Performance, which return a variety of suggestions for optimizing your website.
    Run JavaScript commands for testing and debugging In the debugger, click Console In the Console pane, you can run commands to interact with your application. You can evaluate expressions and issue commands to select DOM elements, command the CPU profiler, monitor events and view event listeners.

Visual Studio

For apps developed with TypeScript, you cannot debug the TypeScript source files. You need to debug the transpiled JavaScript files.

  1. In the top menu bar, click AppBuilderRun <app_name> in Simulator.
  2. Click Debugger.
  3. If you want to debug TypeScript code, enable source maps.
    1. Click the cogwheel at the bottom of the debug tools.
    2. In the Sources section, select the Enable source maps check box.
    3. Close the Options dialog.
    4. In the device simulator, click Reload.
  4. Debug your app.

    Operation Action Description
    Inspect element In the debugger, click the inspect element icon in the top left corner and on the device, tap the element that you want to inspect Opens the Elements pane in the debugger and selects the HTML markup corresponding to the element.
    Inspect the diagnostic log In the debugger, click Console In the Console pane, you can inspect diagnostic log information such as errors and warnings, console.log() messages and so on.
    Inspect the page structure In the debugger, click Elements In the Elements pane, you can examine your Document Object Model (DOM) and Cascading Style Sheets (CSS) rules. You can make quick changes to your DOM or CSS and immediately preview how the changes affect your page. A sidebar section shows event listeners and lets you create new style rules and navigate to the rule you want to edit.
    Inspect the application resources In the debugger, click Resources In the Resources pane, you can inspect HTML5 offline data, view and modify localStorage and sessionsStorage data, inspect SQL database information and execute SQL queries from a command-line interface. You can see cookie information for all domains accessed on the current page.
    Inspect the network requests of your application In the debugger, click Network In the Network pane, you can inspect resources that are requested and downloaded over the network in real time. You can identify requests that take longer and attempt to address them to optimize your app.
    Inspect the source files of your application, insert breakpoints and debug your code In the debugger, click Sources and enable debugging, if not enabled In the Sources pane, you can open source files to add breakpoints and modify your code to debug it without affecting the corresponding file in your app.
    Inspect the values of variables and expressions In the Sources tab, open the file that contains the expression, select the expression, right-click it and select Add to Watch In the Watch Expressions panel in the Sources tab, you can track the values of variables and expressions during the debugging session.
    Inspect how the device browser interacts with the application In the debugger, click Timeline The Loading, Scripting and Rendering timelines show how and when HTML is parsed and how HTML calculates styles and performs other operations with your app.
    Inspect resource-consumption data for your application In the debugger, click Profiles and enable profiling, if not enabled In the Profiles pane, you can collect and inspect information about resource consumption. With this data, you can identify problem areas and improve performance.
    Test the performance of your app In the debugger, click Audits In the Audits pane, you can run automated tests for Network Utilization and Web Page Performance, which return a variety of suggestions for optimizing your website.
    Run JavaScript commands for testing and debugging In the debugger, click Console In the Console pane, you can run commands to interact with your application. You can evaluate expressions and issue commands to select DOM elements, command the CPU profiler, monitor events and view event listeners.

CLI

For apps developed with TypeScript, you cannot debug the TypeScript source files. You need to debug the transpiled JavaScript files.

  1. In the command prompt, navigate to the directory that contains your app.
  2. Run the following command.

    appbuilder simulate
    
  3. Launch the debug tools.
    • On macOS systems, select ToolsDebug Tools.
    • On Windows systems, click Debugger.
  4. If you want to debug TypeScript code, enable source maps.
    1. Click the cogwheel at the bottom of the debug tools.
    2. In the Sources section, select the Enable source maps check box.
    3. Close the Options dialog.
    4. In the device simulator, click Reload.
  5. Debug your app.

    Operation Action Description
    Inspect element In the debugger, click the inspect element icon in the top left corner and on the device, tap the element that you want to inspect Opens the Elements pane in the debugger and selects the HTML markup corresponding to the element.
    Inspect the diagnostic log In the debugger, click Console In the Console pane, you can inspect diagnostic log information such as errors and warnings, console.log() messages and so on.
    Inspect the page structure In the debugger, click Elements In the Elements pane, you can examine your Document Object Model (DOM) and Cascading Style Sheets (CSS) rules. You can make quick changes to your DOM or CSS and immediately preview how the changes affect your page. A sidebar section shows event listeners and lets you create new style rules and navigate to the rule you want to edit.
    Inspect the application resources In the debugger, click Resources In the Resources pane, you can inspect HTML5 offline data, view and modify localStorage and sessionsStorage data, inspect SQL database information and execute SQL queries from a command-line interface. You can see cookie information for all domains accessed on the current page.
    Inspect the network requests of your application In the debugger, click Network In the Network pane, you can inspect resources that are requested and downloaded over the network in real time. You can identify requests that take longer and attempt to address them to optimize your app.
    Inspect the source files of your application, insert breakpoints and debug your code In the debugger, click Sources and enable debugging, if not enabled In the Sources pane, you can open source files to add breakpoints and modify your code to debug it without affecting the corresponding file in your app.
    Inspect the values of variables and expressions In the Sources tab, open the file that contains the expression, select the expression, right-click it and select Add to Watch In the Watch Expressions panel in the Sources tab, you can track the values of variables and expressions during the debugging session.
    Inspect how the device browser interacts with the application In the debugger, click Timeline The Loading, Scripting and Rendering timelines show how and when HTML is parsed and how HTML calculates styles and performs other operations with your app.
    Inspect resource-consumption data for your application In the debugger, click Profiles and enable profiling, if not enabled In the Profiles pane, you can collect and inspect information about resource consumption. With this data, you can identify problem areas and improve performance.
    Test the performance of your app In the debugger, click Audits In the Audits pane, you can run automated tests for Network Utilization and Web Page Performance, which return a variety of suggestions for optimizing your website.
    Run JavaScript commands for testing and debugging In the debugger, click Console In the Console pane, you can run commands to interact with your application. You can evaluate expressions and issue commands to select DOM elements, command the CPU profiler, monitor events and view event listeners.

Next Steps

Debug your application on device.

See Also

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.