GWT - แอปพลิเคชันการดีบัก

GWT มอบความสามารถที่ยอดเยี่ยมในการดีบักฝั่งไคลเอ็นต์และโค้ดฝั่งเซิร์ฟเวอร์

ในระหว่างโหมดการพัฒนา GWT Application อยู่ในโค้ด Java และไม่ได้แปลเป็น JavaScript

เมื่อแอปพลิเคชันกำลังทำงานในโหมดการพัฒนา Java Virtual Machine (JVM) จะเรียกใช้โค้ดแอปพลิเคชันเป็น bytecode Java ที่คอมไพล์โดยใช้ความสามารถ GWT เพื่อเชื่อมต่อกับหน้าต่างเบราว์เซอร์

GWT ใช้ปลั๊กอินที่ใช้เบราว์เซอร์เพื่อเชื่อมต่อกับ JVM

ดังนั้นนักพัฒนาจึงมีอิสระที่จะใช้ IDE ที่ใช้ Java เพื่อดีบักทั้งรหัส GWT ฝั่งไคลเอ็นต์และโค้ดฝั่งเซิร์ฟเวอร์

ในบทความนี้เราจะสาธิตการใช้งานการดีบักโค้ดไคลเอนต์ GWT โดยใช้ Eclipse เราจะทำงานต่อไปนี้ -

กำหนดจุดพักในโค้ดและดูใน BreakPoint Explorer
ทำตามขั้นตอนโค้ดทีละบรรทัดระหว่างการดีบัก
ดูค่าของตัวแปร
ตรวจสอบค่าของตัวแปรทั้งหมด
ตรวจสอบค่าของนิพจน์
แสดงสแต็กเฟรมสำหรับเธรดที่ถูกระงับ

ตัวอย่างการดีบัก

ตัวอย่างนี้จะนำคุณผ่านขั้นตอนง่ายๆในการสาธิตการดีบักแอปพลิเคชัน GWT ทำตามขั้นตอนต่อไปนี้เพื่ออัปเดตแอปพลิเคชัน GWT ที่เราสร้างในGWT - สร้างบทแอปพลิเคชัน -

ขั้นตอน	คำอธิบาย
1	สร้างโครงการที่มีชื่อHelloWorldภายใต้แพคเกจcom.tutorialspointตามที่อธิบายไว้ในGWT - สร้างแอพลิเคชันบท
2	แก้ไขHelloWorld.gwt.xml , HelloWorld.css , HelloWorld.htmlและHelloWorld.javaตามที่อธิบายด้านล่าง เก็บไฟล์ที่เหลือไว้ไม่เปลี่ยนแปลง
3	คอมไพล์และเรียกใช้แอปพลิเคชันเพื่อตรวจสอบผลลัพธ์ของตรรกะที่ใช้งาน

ต่อไปนี้เป็นเนื้อหาของตัวอธิบายโมดูลที่แก้ไข src/com.tutorialspoint/HelloWorld.gwt.xml.

<?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>

ต่อไปนี้เป็นเนื้อหาของไฟล์ Style Sheet ที่แก้ไข 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 ที่แก้ไข war/HelloWorld.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>

ให้เรามีเนื้อหาต่อไปนี้ของไฟล์ Java src/com.tutorialspoint/HelloWorld.java ซึ่งเราจะแสดงให้เห็นถึงความสามารถในการดีบักของ GWT Code

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+"!";
   }
}

ขั้นตอนที่ 1 - วางเบรกพอยต์

วางเบรกพอยต์ในบรรทัดแรกของ onModuleLoad() ของ HelloWorld.java

ขั้นตอนที่ 2 - ดีบักแอปพลิเคชัน

ตอนนี้คลิกที่

เมนูแอปพลิเคชันแก้ไขข้อบกพร่องแล้วเลือกHelloWorld แอปพลิเคชันเพื่อแก้ไขข้อบกพร่องของแอปพลิเคชัน

หากทุกอย่างเรียบร้อยดีคุณต้องเห็น GWT Development Mode ที่ใช้งานอยู่ใน Eclipse ที่มี URL ดังที่แสดงด้านล่าง ดับเบิลคลิกที่ URL เพื่อเปิดแอปพลิเคชัน GWT

ทันทีที่แอปพลิเคชันเปิดตัวคุณจะเห็นโฟกัสที่เบรกพอยต์ Eclipse เนื่องจากเราได้วางเบรกพอยต์ไว้ในบรรทัดแรกของวิธีจุดเข้า

คุณสามารถดู stacktrace สำหรับเธรดที่ถูกระงับ

คุณสามารถดูค่าสำหรับนิพจน์

คุณสามารถดูรายการจุดพักที่วางไว้

ตอนนี้ให้กด F6 จนกว่าคุณจะถึงบรรทัดสุดท้ายของเมธอด onModuleLoad () ในการอ้างอิงสำหรับปุ่มฟังก์ชัน F6 จะตรวจสอบโค้ดทีละบรรทัด F5 ขั้นตอนต่อไปและ F8 จะกลับมาใช้งานแอปพลิเคชันต่อ ตอนนี้คุณสามารถดูรายการค่าของตัวแปรทั้งหมดของ onModuleLoad () วิธีการ

โค้ดไคลเอ็นต์ GWT สามารถดีบักได้ในลักษณะเดียวกับที่สามารถดีบัก Java Application ได้ วางจุดพักไว้ที่บรรทัดใดก็ได้และเล่นกับความสามารถในการดีบักของ GWT