调试

至此，您已经完成了 StockWatcher UI 的实现以及所有客户端功能。但是，您发现“变化”字段中存在错误。变化百分比计算不正确。

在本节中，您将使用 Eclipse 在开发模式下运行 StockWatcher 时调试您的 Java 代码。

  1. 找到错误。
  2. 修复错误。
  3. 在开发模式下运行 StockWatcher 来测试错误修复。

优势

您可以在将 Java 源代码编译成 JavaScript 之前对其进行调试。此 GWT 开发流程可帮助您利用 Java IDE 中的调试工具。您可以

  • 设置断点。
  • 逐行执行代码。
  • 深入代码。
  • 检查变量的值。
  • 显示已挂起线程的堆栈帧。

JavaScript 开发的一大吸引力在于，您可以进行更改并通过刷新浏览器立即查看结果，而无需进行缓慢的编译步骤。GWT 开发模式提供了完全相同的开发周期。您**不需要**为每次更改重新编译；这就是开发模式的意义所在。只需单击“刷新”即可查看您的更新后的 Java 代码的运行效果。

查找错误

分析问题

screenshot StockWatcher Bug

查看“价格”和“变化”字段中的值，您可以看到，由于某种原因，所有变化百分比都只有正确值的十分之一。

“变化”字段的值由 updateTable(StockPrice) 方法加载。

  /**
   * Update a single row in the stock table.
   *
   * @param price Stock data for a single row.
   */
  private void updateTable(StockPrice price) {
    // Make sure the stock is still in the stock table.
    if (!stocks.contains(price.getSymbol())) {
      return;
    }
    
    int row = stocks.indexOf(price.getSymbol()) + 1;
    
    // Format the data in the Price and Change fields.
    String priceText = NumberFormat.getFormat("#,##0.00").format(
        price.getPrice());
    NumberFormat changeFormat = NumberFormat.getFormat("+#,##0.00;-#,##0.00");
    String changeText = changeFormat.format(price.getChange());
    String changePercentText = changeFormat.format(price.getChangePercent());
    
    // Populate the Price and Change fields with new data.
    stocksFlexTable.setText(row, 1, priceText);
    stocksFlexTable.setText(row, 2, changeText + " (" + changePercentText
        + "%)");
  }

仅看一眼代码，您就可以看到 changePercentText 变量的值是在别处设置的，在 price.getChangePercent 中。因此，首先在该行设置断点，然后深入了解以确定计算变化百分比的错误位置。

设置断点

  1. 在您想要单步执行的代码行以及您想要检查变量值的代码行设置断点。

    • 在 StockWatcher.java 中，在 updateTable(StockPrice price) 方法中，在这两行设置断点
    String changePercentText = changeFormat.format(price.getChangePercent());

    stocksFlexTable.setText(row, 1, priceText);
    • 运行包含错误的代码。
    • 要运行 updateTable 方法中您怀疑存在错误的代码，只需在以开发模式运行的浏览器中将股票添加到股票列表即可。
    • 执行将在第一个断点处停止。
    • Eclipse 切换到调试透视图。

  2. 检查变量 priceText 和 changeText 的值。

    • 在 Eclipse 调试透视图中，查看“变量”窗格。

  3. 运行代码到下一个断点，此时 priceText 被设置。

    • 在“调试”窗格中，按下“恢复”图标。

  4. 检查变量 priceText、changeText 和 changePercentText 的值。

    • 在 Eclipse 调试透视图中，查看“变量”窗格。如果您愿意，可以重新检查数学计算以查看错误。
    • StockWatcher variables

  5. 循环回到第一个断点，此时 changePercentText 被设置。

    • 在“调试”窗格中，按下“恢复”图标。

单步执行代码

现在单步执行代码以查看 changePercentText 在哪里以及如何被计算。

  1. 单步执行到 getChangePercent 方法以查看它是如何计算 changePercentText 的值的。
public double getChangePercent() {
  return 10.0 * this.change / this.price;
}

查看 getChangePercent 方法，您可以看到问题：它将变化百分比乘以 10 而不是 100。这与您之前看到的输出完全一致：所有变化百分比都只有正确值的十分之一。

修复错误

  1. 修复计算价格变化百分比的错误。
    • 在 StockPrice.java 中，编辑 getChangePercent 方法。
public double getChangePercent() {
  return 100.0 * this.change / this.price;
}

**提示：**在 Eclipse 中，如果您发现更容易在 Java 透视图中而不是在调试透视图中进行编辑，您可以在开发模式下运行 StockWatcher 时在两者之间切换。

在开发模式下测试错误修复

此时，当您输入股票代码时，“变化”字段的计算应准确无误。试试看。

  1. 在 Eclipse 中，将所有断点都关闭，然后按下“恢复”。
  2. 在以开发模式运行的浏览器中，按下“刷新”。
  3. 添加股票。
  4. 检查“变化”字段中值的计算结果。

下一步

此时，您已经实现了所有功能需求。StockWatcher 正在运行，您已经找到了错误并修复了错误。

现在，您准备增强 StockWatcher 的视觉设计。您将将 CSS 样式规则应用于 GWT 小部件，并将静态元素（徽标）添加到页面。

第 7 步：应用样式