Debug Window in Embedded Application

General
1

Hi

Can someone tell me how to make Vaadin display the
debug window
 with an application, which is
embedded
 in a web page?

I am embedding my application in a
div
 as described in chapter “11.3.1 Embedding Inside a div Element” of the Vaadin Book. I tried appending
?debug
 after
appUri
 but then the page fails to load. Actually it keeps reloading in an endless loop.

I also tried to do the same with the
multiapp
 sample of the Vaadin 6.4.8 distribution and I got the same result.

Thanks for your help in advance,
Richie.

2

Adding ?debug should just work. For instance, see
http://demo.vaadin.com/sampler
 compared to
http://demo.vaadin.com/sampler?debug
.

If that’s not working, you should check the server log for problems.

Cheers,
Bobby

p.s. To Vaadin team: I didn’t realize till now that the sampler was running in debug mode. That’s a great reference!

3

It does work for
http://demo.vaadin.com/sampler
 but
sampler
 is not an embedded application.

Try it with the
multiapp
 sample bundled with the Vaadin distribution, i.e.

  2. Edit {vaadin-dist}/WebContent/multiapp.html and append
    ?debug
     after one of the
    appUri
    's of the
    vaadinConfigurations
     JS object.
  3. Open
    http://http://localhost:8888/multiapp.html

For me it keeps reloading and no applications are displayed. Or did I append
?debug
 to the wrong place?

BR,
Richie

4

You need to somehow pass the url parameter to the servlet that renders the Vaadin apps. So in the multiapp.html, where the apps are intialized, try adding the ?debug parameter there to the application url’s.

5

Well, I was hoping to do that. To clarify things here is what I did:

In
multiapp.html
:


...
<script type="text/javascript">
	var vaadin = {
		vaadinConfigurations: {
			'fb' :{
				appUri:'/FeatureBrowser?debug', 
				pathInfo: '/', 
				themeUri: '/VAADIN/themes/example', 
				versionInfo : {vaadinVersion:"6.0.0-INTERNAL-NONVERSIONED-DEBUG-BUILD",applicationVersion:"NONVERSIONED"}
			},
			'calc' :{
				appUri:'/Calc', 
				pathInfo: '/', 
				themeUri: '/VAADIN/themes/example', 
				versionInfo : {vaadinVersion:"6-INTERNAL-NONVERSIONED-DEBUG-BUILD",applicationVersion:"NONVERSIONED"}
			},
			'hello' :{
				appUri:'/HelloWorld', 
				pathInfo: '/', 
				themeUri: '/VAADIN/themes/example', 
				versionInfo : {vaadinVersion:"6.0.0-INTERNAL-NONVERSIONED-DEBUG-BUILD",applicationVersion:"NONVERSIONED"}
			}

			
		}};
</script>
...

After downloading
http://localhost:8888/multiapp.html
 what I get is a page, which keeps reloading continuously.

However, I can see that above I appended
?debug
 after the
appUri
, which may not be OK since the
pathInfo
 would come after that. I would expect to insert
?debug
 into the query string but I cannot see how to do that inside
vaadinConfigurations
.

I also tried to append
?debug
 after
pathInfo
. Then what I got was that the application simply did not appear.

Can you tell me where I should append
?debug
 inside
multiapp.html
 to get the debug window?

Thanks in advance,
Richie.

6

In this case, you need to set vaadin.debug=true; just add that in your vaadin variable before the vaadinConfigurations block.

7

Thank you for the explanation. Just to summarize (for those who do not want to go through the entire thread):

In order to get the Debug Window for a Vaadin application embedded inside a web page do the following:

  2. Add
    debug : true
     to your
    vaadin
     JS variable.
    ... <script type="text/javascript"> var vaadin = { debug : true, vaadinConfigurations: { 'fb' :{ appUri:'/FeatureBrowser', pathInfo: '/', themeUri: '/VAADIN/themes/example', versionInfo : {vaadinVersion:"6.0.0-INTERNAL-NONVERSIONED-DEBUG-BUILD",applicationVersion:"NONVERSIONED"} }, 'calc' :{ appUri:'/Calc', pathInfo: '/', themeUri: '/VAADIN/themes/example', versionInfo : {vaadinVersion:"6-INTERNAL-NONVERSIONED-DEBUG-BUILD",applicationVersion:"NONVERSIONED"} }, 'hello' :{ appUri:'/HelloWorld', pathInfo: '/', themeUri: '/VAADIN/themes/example', versionInfo : {vaadinVersion:"6.0.0-INTERNAL-NONVERSIONED-DEBUG-BUILD",applicationVersion:"NONVERSIONED"} } }}; </script> ...
  3. Append
    ?debug
     to the page URL:
    http://localhost:8888/multiapp.html?debug

Cheers,
Richie.

8

Thanks for that, I’m learning new stuff here as well :slight_smile: