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 this in future (and for my own reference):

Sandblast

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.

Ingemar

thank you! Great work. While you're at it, any chance you could fix some of the serialization warnings with intellij. E.g, if I have a class which implements serializable in a shared package, and I have a private static final Logger member, I get a warning in intellij about using a member which is not serializable by gwt, even though java.util.Logging is supported by gwt. – Sandblast

Also, if I have a @UiField Element foo, and in my UiBinder class I do <i ui:field="foo" />, that gives me an error in intellij that expected: Element, found: java.lang.Object (paraphrased). – Sandblast

Answer 2

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.

Sandblast

Answer 3

@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

Selfreliance

that's correct, i've been meaning to update my answer but haven't found the time. If you'd like to edit my answer to make it correct, I can give you a bounty which will give you 100 rep and let you edit the answer. Let me know if you'd like that. – Sandblast

I'm sorry that your edit got rejected, probably by people who've never used GWT. I've asked moderators to look at it and hopefully approve it. – Sandblast