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!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s