Running and Debugging Dart Web Applications
On this page:
When running and debugging Dart web applications, PhpStorm 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
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 PhpStorm session. You can stop the tool by clicking 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.
- 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.
Do one of the following:
- Choose 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: Click the icon that indicates the desired browser.
Debugging a Dart web application
Install and configure the Chrome Extension in your browser:
- Open the Chrome Web Store at https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji.
- On the JetBrains IDE Support page that opens, click the Add to Chrome button . 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.
- Make sure the extension connects to PhpStorm 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 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 PhpStorm.
- Configure and set breakpoints in the Dart code.
- On the main menu, choose .
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.
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.
- Initiate a debugging session: choose the created run configuration from the Edit configurations drop-down list on the toolbar and click . PhpStorm opens the specified URL in the chosen browser and opens the Debug Tool Window.
- 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. ,