How to set up Dart debugging in WebStorm?

Question

I am using IntelliJ WebStorm to develop an application in Dart and I'd like to use the debugging functionality, namely the capability to use breakpoints and in process evaluation.

How do I set it up in the IDE?

Answer 1

There are couple steps that need to be completed to be able to use debugging features:

1. Install Dartium on your development machine This is a special browser based on Chromium which has the Dart VirtualMachine built in. If you installed the whole dev-pack from DartLang you probably already have it, otherwise you can find the download link on www.dartlang.com/tools/download.html .

2. Set up WebStorm to use Dartium Once installed, add Dartium as an browser to WebStorm. In WebStorm click on File > Settings > Browsers then the green plus icon on the right and navigate to the chrome.exe executable in the Dartium folder.

3. Set up Javascript debugger in WebStorm In File > Settings > Debugger > Javascript set the built in server port to a port above 50000, I use 60666 for example.

4. Install the JetBrains IDE Support extension in Dartium Download the extension here

5. Set up the port in the IDE support extension Either right click on the JB extension logo and choose Options , or copy and paste this url

chrome-extension://hmhgeddbohgjknpmjagkdomcpobmllji/options.html

to your address bar and set the port to the one you chose in previous step for example 60666

And there you go, all is well, you are ready to go debugging ;)

Just remember when you create run/debug configuration to choose Dartium as your browser of choice!