Quick Tip: Debugging a GWT application using Chrome Dev tools
Debugging is an important aspect of software development. Having the right tools can save a lot of time and headaches. Before GWT Super Dev mode, the classic Dev mode allowed to use JVM debugging. Developers could set break points within their IDE and use debug mode to track bugs and errors. Now with the Super dev mode, things are different. The whole application is compiled and run within the browser, so using JVM debugging is not possible anymore. The question that comes to mind is: is it possible to debug Java in the browser ? luckily the answer is yes.
This error does not break the app, but it is important to know what causes it.
Without source maps:
If we try going to the sources without enabling source maps, we would not be enable to tell where the error is happening in our source code.
Enabling source maps:
After enabling breakpoints we can see that the error now points to the .java file and not the .js file:
Setting a break point:
Now that we see where the error happens, we can set a breakpoint to inspect the state of the application. The breakpoint can be simply set by clicking on the line number in the editor.
Tracking the error:
Finally, we can refresh the application. The application will stop when it reaches the breakpoint. We can then inspect the call stack and the variables values.
Now that we know were the error happens exactly in our code. We can check if we misused a statement. In this case, removing this line, which was useless, was enough.
Using Chrome workspace (Optional)
Chrome workspaces allows mapping files loaded by the browser to files on disk and making changes directly to files from Chrome. This can be useful if you do not need IDE assistance, and do not want go back and forth from the browser to the IDE. To make use of Chrome workspace, you can right click on and empty spot on the Sources Tab on the left and click on “add folder to workspace”. Then, you can right click on the opened file, and click on “map to file system resource”. More on that can found at: https://developers.google.com/web/tools/setup/setup-workflow
Worth watching : DevTools: State of the Union 2017 (Google I/O ’17)