GWT Dev Mode or Super Dev Mode on Mobile Devices?

Question 1

I know that I cannot install the browser developer plugin??

Yes. You are correct. A big No. You need to have GWT plugin to debug the byte code in your IDE.

Unfortunately there is no workaround as of now, at least for my knowledge.

If you want to debug Javascript, generated by GWT also quite difficult because by default GWT compiler generates obfuscated code.

If you want to try with java scriptlook at the compiler options:

Question 2

If you're using MGWT library (http://code.google.com/p/mgwt/), you can easily recompile your GWT module from your mobile device, so you can débug user interface appearance.

import this class

import com.googlecode.mgwt.ui.client.util.SuperDevModeUtil;

call this method in your EntryPoint class

SuperDevModeUtil.showDevMode();

You will find more details in the article by Daniel Kurka about Super Dev Mode

But you can't do step-by-step by adding breakpoints in your Java code.

Question 3

GWT Super Dev mode works on Android mobile devices as it does not longer require any browser plug in.

You need to have some support for bookmarklets that now turn super dev mode on and off. If this is not possible with your browser, instead of clicking on the bookmarklet you can execute your own JavaScript to activate the super dev mode on that page.

URL of the bookmarklet looks like

javascript:%7B%20window.__gwt_bookmarklet_params%20%3D%20%7B'server_url'%3A'http%3A%2F%2F192.168.55.55%3A1234%2F'%7D%3B%20var%20s%20%3D%20document.createElement('script')%3B%20s.src%20%3D%20'http%3A%2F%2F192.168.1.5%3A9876%2Fdev_mode_on.js'%3B%20void(document.getElementsByTagName('head')%5B0%5D.appendChild(s))%3B%7D

This is essentially encoded JavaScript, and you can use URLDecoder like this to decode it. It will be something like

javascript:
  { 
    window.__gwt_bookmarklet_params = 
      {'server_url':'http://192.168.55.55:1234/'}; 
    var s = document.createElement('script'); 
    s.src = 'http://192.168.1.5:9876/dev_mode_on.js'; 
    void(document.getElementsByTagName('head')[0].appendChild(s));
  }

If you run your GWT code inside native Android app, such JavaScript can be executed on WebView using its loadUrl method and the development mode starts directly inside your app.

Otherwise you may try to visit such a "javascript URL" from your device in one or another way. This may also work on non Android devices like iPhone.

Question 4

Old thread but for anyone looking for an answer on how to do this for an Android device.

First you must use SuperDevMode. When launching SuperDevMode (CodeServer) add the following argument :

-bindAddress 0.0.0.0

So you will have something like

-bindAddress 0.0.0.0 -logLevel INFO -port 9876 -launcherDir c:/inetpub/wwwroot/wawa be.abc.cba.wawa

Now navigate to this website using your pc and put devmode on.

When you now navigate to the same website using your mobile device, it will auto recompile the app and you will be working against your superDevMode code on your mobile device.

Now, when using an Android device, you can even use Chrome remote tools to view the DOM-tree, Console log, Network trafic, set breakpoints and much more. For this you must launch a Chrome on your desktop, and connect this to your mobile device.

Check out : https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3 for an explanation of how to this. Note that for this to work your device must be connected by USB ; USB debugging must be enabled ; Android SDK tools have to be installed ; and device must be detected by ADB