WebStorm 2016.3 Help

Running and Debugging Dart Web Applications

On this page:

Introduction

To run and debug a Dart Web application in a browser, you either need to use the Dartium browser or have the Dart code translated into JavaScript.

most browsers that work with JavaScript code do not natively process Dart code. The only exception is Dartium. This dart-oriented version of Chromium contains a built-in Dart VM and therefore can run Dart code directly. To be executed in any other browser, Dart code has to be compiled into JavaScript.

With the pub tool, the compilation is performed through the pub serve action using the built-in dart2js compiler.

You can run Dart Web application in any browser, while debugging is supported only in Dartium and Chrome. To run a Dart Web application you just need to open the starling HTML page in the browser of your choice. Debugging a Dart Web application is initiated through a run configuration of the type JavaScript Debug.

When running and debugging Dart web applications, WebStorm uses the Pub Serve tool. Integration with it is established through the built-in server which acts transparently as a proxy server between your application and the Pub Serve tool. In other words, integration with the Pub Serve tool works invisibly and you do not need to care about it. The tool is invoked automatically when you run or debug a Dart web application, either by opening an HTML file or by launching a run/debug configuration. The tool analyzes the <script></script> element in the HTML file. If the element references a Dart file, Pub Serve invokes the Dart2js compiler whereupon the compiled JavaScript files are passed to the browser where they are processed.

The work of the Pub Serve tool is logged in the dedicated Pub Serve tool window which opens when you start running or debugging a Dart web application for the first time during the current WebStorm session. You can stop the tool by clicking stop.png on the toolbar. As soon as you start running or debugging again, the tool restarts automatically.

Running a Dart web application

No run configuration is required for launching Dart Web applications.

  1. In the editor, open the HTML file with the Dart reference. This HTML file does not necessarily have to be the one that implements the starting page of the application.
  2. Do one of the following:
    • Choose View | Preview file in on the main menu or press Alt+F2. Then select the desired browser from the pop-up menu.
    • Hover your mouse pointer over the code to show the browser icons bar: /help/img/idea/2016.3/browserIcons.png Click the icon that indicates the desired browser.

    If you choose Dartium which has a built-in Dart virtual machine, simply the Dart code is executed. If you choose another browser, the Dart code is compiled into JavaScript through the Dart2js tool, which is a part of the Pub tool. Whether such compilation is required or not is decided by the Pub Serve tool.

Debugging a Dart web application

Debugging of Dart Web applications is supported only in Dartium and Chrome through the JetBrains Chrome Extension. A debugging session is initiated through a run configuration of the type JavaScript Debug.

  1. Install and configure the Chrome Extension in your browser:
    1. Open the Chrome Web Store at https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji.
    2. On the JetBrains IDE Support page that opens, click the Add to Chrome button chrome_extension_add_to_chrome.png. Then click Add in the Confirm New Extension dialog box that opens. Learn more at Using JetBrains Chrome Extension, chapter Installing the JetBrains Chrome Extension.
    3. Make sure the extension connects to WebStorm through the same port as the one specified in the Built-in server port field on the Debugger page of the Settings dialog box. To do that, right-click the /help/img/idea/2016.3/chrome_extenstion_jb_icon.png icon, choose Options on the context menu, and then check the value in the Port spin box. Learn more at Using JetBrains Chrome Extension, chapter Changing the Port for Connecting to WebStorm.
  2. Configure and set breakpoints in the Dart code.
  3. Create a run/debug configuration of the type JavaScript Debug:
    1. On the main menu, choose Run | Edit Configurations.
    2. Click the Add New Configuration toolbar button add.png, and choose JavaScript Debug on the context menu.
    3. In the Run/Debug Configuration:JavaScript Debug dialog box that opens, choose the browser to debug the application in. If you choose Dartium which has a built-in Dart virtual machine, simply the Dart code is executed. If you choose Chrome, the Dart code is compiled into JavaScript through the Dart2js tool, which is a part of the Pub tool. Whether such compilation is required or not is decided by the Pub Serve tool.

      Specify the URL address of the HTML file the references the Dart code to debug. Make sure that the port specified in this URL address is the same as the Built-in server port on the Debugger page of the Settings dialog box and the port specified in the settings for the Chrome Extension.

  4. Initiate a debugging session: choose the created run configuration from the Edit configurations drop-down list on the toolbar and click debug. WebStorm opens the specified URL in the chosen browser and opens the Debug Tool Window.
  5. In the Debug tool window, step through the program, stop and resume the program, examine it when suspended, etc. See Stepping Through the Program, Pausing and Resuming the Debugger Session, and Examining Suspended Program for details. ,

See Also

Last modified: 22 March 2017