Introducing the Debug Panel for GWT

Posted by Fred Sauer, Developer Advocate - Wednesday, July 15, 2009 at 4:57:00 PM

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

No comments: