PhpStorm 7.1.0 Web Help

Dart is intended for developing both client-side and server-side applications. PhpStorm supports both workflows.

  • For running and debugging the server-side code, PhpStorm provides a dedicated run/debug configuration of the type Dart Command Line Application.
  • To run and debug the client-side code 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. For details, see http://www.dartlang.org/tools/dartium/.

    To be executed in any other browser, Dart code has to be translated into JavaScript. This operation is referred to as transpilation and the tools that perform it are called transpilers.

    PhpStorm supports integration with the dart2js tool which is a part of the Dart SDK. The dart2js transpiler translates Dart code into JavaScript.

On this page:

Running server-side Dart code
  1. Create a run configuration.
    1. On the main menu, choose Run | Edit Configurations.
    2. Click the Add New Configuration toolbar button add.png, and choose Dart Command Line Application on the context menu.
    3. In the Run/Debug Configuration: Dart Command Line Application dialog box that opens, specify the Dart file to start the application from. The file must contain a main() method. Optionally specify the options to launch the Dart Virtual Machine with and the program options to start the application with.
    4. Click OK to save the configuration settings.
  2. Choose the newly created configuration in the Select run/debug configuration drop-down list on the tool bar and click the Run toolbar button run.
  3. View the results in the Console tab of the Run tool window.
Debugging server-side Dart code
  1. Configure and set breakpoints in the Dart code.
  2. Create a run configuration.
    1. On the main menu, choose Run | Edit Configurations.
    2. Click the Add New Configuration toolbar button add.png, and choose Dart Command Line Application on the context menu.
    3. In the Run/Debug Configuration: Dart Command Line Application dialog box that opens, specify the Dart file to start the application from. The file must contain a main() method. Optionally specify the options to launch the Dart Virtual Machine with and the program options to start the application with.
    4. Click OK to save the configuration settings.
  3. Choose the newly created configuration in the Select run/debug configuration drop-down list on the tool bar and click the Debug toolbar button debug.
  4. Step through the program, stop and resume program execution, examine it when suspended, etc.
Preparing to run client-side Dart code in Dartium from PhpStorm
  1. Download Dartium at https://www.dartlang.org/tools/dartium/ and install it according to the instructions.
  2. Replace the Chrome browser settings in PhpStorm with the Dartium settings:
    1. Open the PhpStorm settings (File | Settings | IDE Settings ) and click Web Browsers.
    2. On the Web Browsers page, specify the path to the Dartium executable file in the Chrome text box and select the Active check box next to it. For more details, see Configuring Browsers.
  3. If you have a Chrome instance running, disable the JetBrains Chrome Extension or close the browser.
Running client-side Dart code in Dartium

No run configuration is required for launching applications with injected Dart from PhpStorm.

  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+F2Alt+F2Alt+F2Alt+F2Alt+F2Alt+F2 or Ctrl+Alt+F2Alt+F2Alt+F2Alt F2Alt F2Alt F2. Then select the Chrome browser from the pop-up menu.
    • Hover your mouse pointer over the code to show the browser icons bar: browserIcons Click the icon that indicates the Chrome browser.
Running client-side Dart code in a browser of your choice (not Dartium)

No run configuration is required for launching applications with injected Dart from PhpStorm.

  • Do one of the following:
    • Choose View | Preview file in on the main menu or press Alt+F2Alt+F2Alt+F2Alt+F2Alt+F2Alt+F2 or Ctrl+Alt+F2Alt+F2Alt+F2Alt F2Alt F2Alt F2. Then select the desired browser from the pop-up menu.
    • Hover your mouse pointer over the code to show the browser icons bar: browserIcons Click the icon that indicates the desired browser.
Debugging client-side Dart code in Dartium

No transpilation into JavaScript is required when you debug your Dart code in Dartium.

  1. Configure the JavaScript debugger.
  2. Configure and set breakpoints in the Dart code.
  3. Proceed as if you were debugging JavaScript:
    1. Create a run/debug configuration of the type JavaScript Debug.
    2. Initiate a debugging session. For details about local and remote debugging, about debugging single files and entire applications, see Debugging JavaScript.
    3. Install and configure the JetBrains Chrome Extension. For details, see Live Editing of HTML, CSS, and JavaScript.
    4. Step through the program, stop and resume program execution, examine it when suspended, etc.
Debugging client-side Dart code in a browser of your choice (not Dartium)
  1. Transpile the Dart code into Javascript.
  2. In the editor, open the HTML files with the Dart references.
  3. Manually replace the references to the Dart files with the references to the JavaScript files that were generated through the transpilation.
  4. Configure the JavaScript debugger.
  5. Configure and set breakpoints in the Dart code. Although actually debugging will be performed against the generated JavaScript, PhpStorm will emulate Dart debugging using the generated source-maps that set correspondence between lines in the the Dart and in the JavaScript code.
  6. Proceed as if you were debugging JavaScript:
    1. Initiate a debugging session. For details about local and remote debugging, about debugging single files and entire applications, see Debugging JavaScript.
    2. If you are using Chrome, install and configure the JetBrains Chrome Extension. For details, see Using JetBrains Chrome Extension.
    3. Step through the program, stop and resume program execution, examine it when suspended, etc.

See Also

Concepts:

Procedures:

Reference:

External Links:

Web Resources: