GWT Tips: Debugging JSNI methods via Intellij Idea 12 and Google Chrome

Since JSNI methods are “pure” JS it’s not possible to debug them in Idea, but there is a possibility to do it in browsers which have dev tools (Chrome, Safari, Firefox, Opera…). Compiled sources can be easily accessed in dev tools, but what if you don’t want to compile whole project to debug part of jsni code?

You can debug jsni code in gwt dev mode in browser. Let’s assume that your jsni method looks something like this:

public native void jsniMethodToDebug(String stringToShow) /*-{
    $wnd.alert(stringToShow);
}-*/;

To debug this part of code you need to make some small steps:
– open your gwt dev mode page in Chrome;
– press Shift+Ctrl+I for developer tools;
– go to tab sources;
– open you Idea and place breakpoint on method;

public native void jsniMethodToDebug(String stringToShow)

(breakpoint can be also placed on method call in code jsniMethodDebug(“SomeValue”) if you experience problems with debug performance)
– when IDE hangs on method breakpoint, go back to chrome and click “Pause script execution” or F8;
– go back to IDE and continue execution of code
– now go back to chrome and you’ll see your jsni method there.

Have a nice debug!