Debug GWT Applications in IntelliJ

debug-gwt-intellij.md

Debug GWT Applications in IntelliJ

This is a short introduction about how to use IntelliJ to debug your GWT application running in SuperDevMode.

Prerequisites

• JetBrains IDE Support extension for Crhome: https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji
• GWT application running in SuperDevMode

Setup

1. In IntelliJ add a new Run/Debug Configuration of type 'JavaScript Debug'
2. Give it a name and enter the URL of your GWT application (that's the one you get if you press 'Copy to Clipboard' in the 'GWT Development Mode' window)
3. Choose Chrome as the browser
4. Add mapping(s) between your local files and remote URLs. Therefore choose the local path of your (top level) package in the section named 'Remote URLs of local files (optional):' and map it to the related URL of the code server.
   Say you have the local path src/main/java/org/jboss/hal/client and your GWT module has the short name hal. Then the remote URL would be http://127.0.0.1:9876/sourcemaps/hal/org/jboss/hal/client.
5. If you have a maven multi module (which is the case for me) you can repeat the last step for each module you want to map. In that case you only need to make sure that you don't map the same URL twice. Use more specific mappings in that case.

Debug

1. Make sure your GWT application is running in SuperDevMode. I'm using the GWT Maven Plugin from Thomas Broyer (https://tbroyer.github.io/gwt-maven-plugin/plugin-info.html) and execute mvn gwt:devmode from the command line. But actually it's up to you how you start SuperDevMode.
2. Choose your Run/Debug Configuration and click 'Debug' or press ⇧F9
3. The start page of your GWT application should be loaded in Chrome.
4. In the browser you should see a hint saying "JetBrains IDE support is debugging this browser."
5. Depending on your application you should see some output in the console view of IntelliJ.
6. Add breakpoints in your code. If you setup the mappings correctly, IntelliJ should be activated pausing at your breakpoint. You can now inspect the local variables and walk down the stack.
7. Have fun

Let me know if you have problems setting up remote debugging.

"Give it a name and enter the URL of your GWT application (that's the one you get if you press 'Copy to Clipboard' in the 'GWT Development Mode' window)" - what does "'GWT Development Mode' window" mean? I am stuck on your item #2. What url do i put? I need to debug remote server. The instructions assume I already know EVERYTHING about GWT and how to run it - why then would I need instructions in the first place? Is there way to dumb it down so the mere mortals can understand? Thank you so much in advance.

@hpehl please, what plugin to install into Idea to see the option 'JavaScript Debug' in Run/Debug configurations?

Hi there I'm having an issue with the following when using the debugger

Failed to load http://localhost:9876/brokerdirect/font/material-icons/MaterialIcons-Regular.woff2: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I found out that there is an existing issue https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000715304-Problem-with-Chrome-plugin-and-CORS regarding the CORS - Also on Intelij 2017.3 no need to use Chrome Extension

I've tried to update my Intelij IDEA to latest version 2018.2 and you don't need the Chrome extension anymore. And the issue with source had been already fixed.

Seems like the JavaScript debug is only available in Intellij Ultimate.

Just a quick note, this still works fine in Intellij Idea ultimate, the only difference is running gwt with gwt:run instead of the suggested mvn gwt:devmode