Debugging

oVirt GWT applications

Vojtech Szöcs

Software Engineer, Red Hat

April 4, 2017

Before GWT 2.0

Writing web apps today is a tedious and error-prone process.

You spend 90% of your time working around browser quirks, and JavaScript's lack of modularity makes sharing, testing, and reusing AJAX components difficult and fragile.

 

  • debug via Hosted Mode using embedded browser

    • Firefox on Linux

    • WebKit on Mac

    • IE on Windows =)

Hosted Mode

GWT 2.0 (2009)

  • Hosted Mode becomes Development Mode

  • In-browser development via GWT Developer Plugin

    • NPAPI-based plugin available for Firefox, Chrome, Safari and IE

    • later on, NPAPI support was cut from Firefox 27+ and other browsers

    • one option is to use a dedicated Firefox 26 with custom profile

 

  • Debug process in a nutshell
    • start Dev Mode (code server)
    • connect your Java IDE to Dev Mode via JPDA
    • run your webapp with GWT Developer Plugin activated

(Classic) Dev Mode

Demo Time

$ gwtUserAgent='gecko1_8,safari' # Firefox and Chrome/Safari

# build oVirt Engine via `make install-dev` as you normally would

$ cd $OVIRT_SRC
$ make gwt-debug DEBUG_MODULE=webadmin \
 DEV_EXTRA_BUILD_FLAGS_GWT_DEFAULTS="-Dgwt.userAgent=$gwtUserAgent"

GWT 2.6 (2014)

  • New debug method called Super Dev Mode

    • no browser plugin required

    • recompile your webapp into JavaScript on-demand

    • your webapp's Java code is not executed in code server's JVM

    • debugging happens directly in the browser

    • using source maps to map JavaScript symbols to Java

 

  • It has some disadvantages
    • not being able to use Java IDE
    • generates lots of JavaScript (compared to production build)

Super Dev Mode

  • Debug process in a nutshell

    • start Super Dev Mode (code server)

    • run your webapp

    • turn on SDM ("Dev Mode On" bookmark)

    • compile your webapp for the 1st time (auto reload)

    • recompile your webapp on demand

Super Dev Mode (Cont.)

  • Use ulimit -v and start Chrome in that shell to avoid freeze/hang

  • In Chrome Dev Tools, use Ctrl-P to open Java sources

  • Use chrome://system to see tab memory usage

  • Chrome logs are pretty useless when debugging tab crashes

 

  • Initial JavaScript download size comparison (oVirt master)
production (optimized) ~6 M
draft (unoptimized) ~81 M [x 13.5]
SDM-generated ~116 M [x 19.3]

Demo Time

$ gwtUserAgent='gecko1_8,safari' # Firefox and Chrome/Safari

# build oVirt Engine via `make install-dev` as you normally would

$ cd $OVIRT_SRC
$ make gwt-debug DEBUG_MODULE=webadmin \
 DEV_EXTRA_BUILD_FLAGS_GWT_DEFAULTS="-Dgwt.userAgent=$gwtUserAgent" \
 DEV_BUILD_GWT_SUPER_DEV_MODE=1

SDBG project

  • Eclipse (Java IDE) debugger for Super Dev Mode

 

  • Getting started

    • install "Eclipse IDE for Java EE Developers"
    • import > Existing Maven Projects > ovirt-engine
    • build & run Engine and start Super Dev Mode
    • create "Launch Chrome" debug configuration and run it

SDBG project (Cont.)

  • How it works

    • SDBG detects the Chrome instance being launched

    • SDBG interfaces with that instance via Chrome Dev Tools

    • SDBG creates Java debug session with breakpoint & symbol mapping, using source maps provided by Super Dev Mode code server

 

  • Limitations (already tracked as issues)
    • class field & local variable names not fully de-obfuscated
    • conditional breakpoints not supported, but there's a nice workaround

When to use what (1)

  • Classic Dev Mode

    • use any Java IDE you like, but need a NPAPI-capable browser

    • still the most reliable way to debug oVirt GWT applications

    • use this for deeper, full-on-Java debugging

    • old browsers might render the page differently

 

When to use what (2)

  • Super Dev Mode

    • use any browser you like, but debug your webapp in the browser
    • does not scale well for really big GWT applications
    • oVirt WebAdmin + Chrome = Dev Tools crashing

 

  • Side notes
    • this is the current default debug method in GWT

When to use what (3)

  • SDBG

    • use Eclipse Java IDE and Chrome browser specifically
    • has some limitations, offset by fast SDM recompiles
    • it actually works for oVirt WebAdmin
    • use this for preliminary debugging
    • use this to quickly test incremental GWT code changes

 

  • Side notes
    • might take some time to setup your Eclipse IDE

Debugging oVirt GWT applications

By Vojtech Szocs

Internal

Debugging oVirt GWT applications

More from Vojtech Szocs