PyCharm 2017.2 Help

Running and Debugging Dart Web Applications

This feature is supported in the Professional edition only.

You can run a Dart web application in any browser, while debugging is supported only in Dartium and Chrome. To run a Dart web application, open the main HTML file of your application in a browser. Debugging a Dart web application is initiated through a run configuration of the type JavaScript Debug.

PyCharm integrates with the pub serve tool to compile Dart code into JavaScript if necessary. When you open a Dart web application in a browser, it normally starts with a built-in server URL like http://localhost:63342/project-name/web/index.html. However, the built-in server is not used to serve the application. Instead, PyCharm automatically starts pub serve (on a random free port, e.g. 54321) and the browser page is redirected to the pub serve URL (like http://localhost:54321/index.html).

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

Running a Dart web application

Open the HTML file with a Dart reference or select it in the Project view. On the context menu of the editor or selection, click Open in Browser and choose the required browser in the list.

Debugging a Dart web application

Debugging of Dart web applications is supported only in Dartium and Chrome. A debugging session is initiated via a run configuration of the type JavaScript Debug.

Before you start, install the JetBrains IDE Support Chrome extension. Find more about that and about additional configuration of the debugger in Configuring JavaScript Debugger and JetBrains Chrome Extension.

To create a JavaScript Debug run/debug configuration

  1. Open the HTML file that references Dart or select the file in the Project view.
  2. On the context menu, choose Create '<HTML_file_name>'. The Run/Debug Configuration: JavaScript Debug dialog opens.
  3. Choose the browser to debug the application in. If you choose Dartium which has a built-in Dart virtual machine, the Dart code is executed natively. If you choose Chrome, the Dart code is compiled into JavaScript through the dart2js or dartdevc tool.
  4. The URL field already shows the URL address of the application in the format http://localhost:<built-in server port>/<project-name>/<relative path to the HTML file>. During a debugging session, the browser will be redirected from this URL to the pub serve URL.

To start debugging

  1. Configure and set breakpoints in the Dart code.
  2. Initiate a debugging session: choose the created run configuration from the Edit configurations drop-down list on the toolbar and click debug. PyCharm opens the specified URL in the chosen browser.
  3. In the Debug Tool Window that opens, step through the program, stop and resume program execution, examine it when suspended, etc.

See Also

Last modified: 9 August 2017