極客書

GWT - Debugging Application

GWT提供了調試客戶端和伺服器端代碼的可執行性。

在開發模式中，GWT應用程式是基於Java代碼的，不會轉換爲JavaScript。

當應用程式以開發模式運行時，Java虛擬機（JVM）實際上是以編譯後的Java字節碼執行應用程式代碼，使用GWT功能連接到瀏覽器窗口。

GWT使用基於瀏覽器的插件連接到JVM。

因此開發人員可以使用任何基於Java的IDE來調試客戶端GWT代碼和伺服器端代碼。

在本文中，我們將演示如何使用Eclipse調試GWT客戶機代碼。我們將完成以下任務;

  • Set break points in the code and see them in BreakPoint Explorer.
  • Step through the code line by line during debugging.
  • View the values of variable.
  • Inspect the values of all the variables.
  • Inspect the value of an expression.
  • Display the stack frame for suspended threads.

Debugging Example

本例將帶您通過簡單的步驟演示如何調試GWT應用程式。按照以下步驟更新我們在GWT-Create application−一章中創建的GWT應用程式;

Step Description
1 Create a project with a name HelloWorld under a package com.tutorialspoint as explained in the GWT - Create Application chapter.
2 Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorld.html and HelloWorld.java as explained below. Keep rest of the files unchanged.
3 Compile and run the application to verify the result of the implemented logic.

下面是修改後的模塊描述符的內容。

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

下面是修改後的樣式表文件war/HelloWorld.css的內容。

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

.gwt-Label{ 
   font-size: 150%; 
   font-weight: bold;
   color:red;
   padding:5px;
   margin:5px;
}

下面是修改後的HTML宿主文件的內容，可以容納兩個按鈕。

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>Debugging Application Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>


package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
	
   public void onModuleLoad() {
      /*create UI */
      final TextBox txtName = new TextBox(); 
      txtName.setWidth("200");
      txtName.addKeyUpHandler(new KeyUpHandler() {
         @Override
         public void onKeyUp(KeyUpEvent event) {
            if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
               Window.alert(getGreeting(txtName.getValue()));
            }				
         }
      });
      Label lblName = new Label("Enter your name: ");

      Button buttonMessage = new Button("Click Me!");

      buttonMessage.addClickHandler(new ClickHandler() {			
      @Override
      public void onClick(ClickEvent event) {
         Window.alert(getGreeting(txtName.getValue()));
      }});

      HorizontalPanel hPanel = new HorizontalPanel();	
      hPanel.add(lblName);
      hPanel.add(txtName);
      hPanel.setCellWidth(lblName, "130");

      VerticalPanel vPanel = new VerticalPanel();
      vPanel.setSpacing(10);
      vPanel.add(hPanel);
      vPanel.add(buttonMessage);
      vPanel.setCellHorizontalAlignment(buttonMessage, 
      HasHorizontalAlignment.ALIGN_RIGHT);

      DecoratorPanel panel = new DecoratorPanel();
      panel.add(vPanel);

      // Add widgets to the root panel.
      RootPanel.get("gwtContainer").add(panel);
   }  
   
   public String getGreeting(String name){
      return "Hello "+name+"!";
   }
}

Step 1 - Place BreakPoints

在HelloWorld.java的onModuleLoad（）的第一行放置斷點

GWT Applying Breakpoint

Step 2 - Debug Application

現在點擊debug application菜單並選擇application來調試應用程式。

GWT Debug Button

如果一切正常，您必須看到GWT開發模式在Eclipse中處於活動狀態，其中包含如下所示的URL。雙擊URL以打開GWT應用程式。

GWT Debug Application

一旦應用程式啓動，當我們將斷點放在入口點方法的第一行時，您將看到重點放在Eclipse斷點上。

GWT Debug Application

您可以看到掛起線程的stacktrace。

GWT Debug Stacktrace

可以看到表達式的值。

GWT Debug Expressions

您可以看到放置的斷點列表。

GWT Debug Breakpoints

現在繼續按F6，直到到達onModuleLoad（）方法的最後一行。作爲功能鍵的參考，F6逐行檢查代碼，F5步驟進一步深入，F8將繼續應用。現在您可以看到onModuleLoad（）方法的所有變量的值列表。

GWT Debug Variables

GWT客戶機代碼的調試方式與Java應用程式的調試方式相同。將斷點放置到任意行，並使用GWT的調試功能。