Web Toolkit Blog
The official source of information about GWT.
Introducing the Debug Panel for GWT
Wednesday, July 15, 2009
The primary intent of the Debug Panel for the
Google Web Toolkit
(GWT) is to provide the developer of a GWT application performance data about the application as well as tools to debug the client side application code. Web applications built with GWT run mainly in the client's environment, over which the developer has little control or access. The Debug Panel provides tools to the developer to help lift the shroud over the client environment to help diagnose problems, help tune and improve performance as well as assist with application testing.
As with any application, testing and quality assurance is important to a GWT application. Because a GWT application is user facing, performance testing is very important. However, measuring the performance of an application running in a browser is not easy. With all the moving parts of the client code - RPCs, DOM updates, etc. - and the fact that with GWT you are no longer writing JavaScript, it can be hard to locate bottlenecks. Automating the performance tests and getting accurate numbers on RPC response time is even harder. This is where the
Debug Panel for GWT
comes into the picture. It is an external library that can easily be added to any GWT Web application and will provide you with that performance data, an insight into what goes on behind the scenes and help you automate the whole thing, too.
Here is a sample screenshot of the Debug Panel in action:
Here, the Debug Panel shows us the statistics of an invocation of the
EchoService
as well as the startup times. It is clear from the example that RPC finished quickly. It shows that the slowest component was waiting for the server to respond at 121ms. While serializing the request and deserializing the response both took 19ms, updating the UI with the data returned from the server only took 2ms. These are the kinds of numbers you would want to see!
Here is another example screenshot of the Debug Panel:
This time, the application was run in Hosted Mode and there was an exception during the RPC. Once you compile your application to JavaScript, the stack trace will be a JavaScript stack trace of course. The exception panel in the Debug Panel is also an example of the extensibility of the Debug Panel. As a GWT application developer, you can add your own panels to the Debug Panel that are customized to your application. The Debug Panel provides you with a framework to display your application's debug data as well as a lightweight component to add to your main application, so it can communicate the relevant data to the Debug Panel, without affecting runtime performance much.
In fact, you can plug the Debug Panel into an existing application without changing the application's code. This also means that there is no change required in the compiled JavaScript. Therefore, you can serve your GWT web application both with the Debug Panel enabled, to internal IP's for example, or disabled for everybody else.
Check out an
online example
of the Debug Panel, check out the
example's source
to see how easy it is to use or check out the
Google Code project
for more information.
Pascal Muetschard, Software Engineering Team
Labels
accessibility
1
crash
1
dev mode
2
English
172
googlenew
1
gwt
1
IE
1
internet explorer
1
Web Toolkit Blog
172
Archive
2016
Oct
2014
Dec
Nov
Sep
May
Jan
2013
Nov
Oct
Jul
Mar
Feb
2012
Dec
Oct
Sep
Jul
Jun
Jan
2011
Nov
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2010
Dec
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2009
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2008
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Feb
Jan
2007
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2006
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Feed
