How to get GWT Super Dev Mode to work with IntelliJ

Question

I had a lot of issues getting Super Dev mode to work with IntelliJ. This question, and my answer below, are to document how to do this, for anyone else who might come across thi

Answer 1

IntelliJ IDEA 14 EAP now offers improved support for GWT Super Dev Mode. You will need to use the JetBrains IDE Plugin for JavaScript debugging on Chrome, and install GWT 2.6.1. You can then enable Super Dev Mode support directly under "Run configurations" - for more information, check out our blog post and this webinar for a quick demonstration.

Answer 2

@Click Upvote 's answer is not right. You don't have to replace the host html page is script tag's src attribute. Or you'll find out every GWT RPC request will send to port 9876(on which the code server runs) instead of the web server port(8080 for example).

there is a post talking about this problem here.

by the way i'm using gwt 2.6.1 and Intellij 13.0.1

Answer 3

1) Put the following lines in the module's .gwt.xml code:

<!-- Super Dev Mode Config: -->
  <add-linker name="xsiframe" />
  <set-configuration-property name="devModeRedirectEnabled" value="true" />
  <set-configuration-property name="gwt.superdevmode" value="on" />
  <set-property name="compiler.useSourceMaps" value="true"/>

2) Make two GWT run configurations in IntelliJ, one with Super Dev mode turned on, and the other with super dev mode off.

First config (Code Server):

Second config (Dev mode):

3) Run the CodeServer run config. It will give an output such as:

The code server is ready.
Next, visit: http://localhost:9876/

Visit that URL. There will be a 'Dev mode on' button. Drag it to bookmarks bar. Then, click the name of the module on this page, browse its source code to locate the .nocache.js file.

4) Within the host page html, change the path to the existing nocache.js file to point to the nocache.js file whose link was copied in step 3. E.g:

<script type="text/javascript" language="javascript" src="http://localhost:9876/Touch/Touch.nocache.js"></script>

5) Now run the 2nd run config. It will go to the gwt dev mode url, with ?gwt= etc url arguments. Remove those url arguments, and refresh the page. You should now be able to see the host page. If the code server run config is already running, then GWT code might automatically run.

6) When any changes are made to the project, simply click the 'Dev mode on' bookmarklet that was added earlier. It will give the name of the module, and a compile button. Click the Compile button, and it will recompile the module (happens fairly quickly), and refresh the page.

7) The compile button can also be dragged to the bookmark bar, to skip the step of clicking the 'Dev mode on' bookmark.

EDIT: This answer is not complete and has some issues. If someone would like to correct it, please edit it. If anyone reviewers see edits on this answer, please approve them.