超级开发模式

2020 年 6 月 19 日修订，适用于 GWT 2.9

简介

超级开发模式用一种更适合现代浏览器的新方法替换了 开发模式 的内部机制。与它的前身（我称之为经典开发模式）一样，超级开发模式允许 GWT 开发人员快速重新编译他们的代码并查看浏览器中的结果。它还允许开发人员使用调试器来检查正在运行的 GWT 应用程序。但是，它的工作方式不同。

先决条件

超级开发模式需要 xsiframe 链接器。

要为您的应用程序启用超级开发模式，您需要将以下设置添加到您的 module.xml 文件中

  • GWT 2.5.1

    <add-linker name="xsiframe"/>
<set-configuration-property name="devModeRedirectEnabled" value="true"/>
<set-property name="compiler.useSourceMaps" value="true"/>

  • GWT 2.6.1

    <add-linker name="xsiframe"/>

  • GWT 2.7 及更高版本

    从 GWT 2.7 开始，xsiframe 链接器是默认链接器。

启动超级开发模式

通过开发模式

从 GWT 2.7 开始，开发模式会自动启动超级开发模式。只需 启动开发模式 并重新加载页面，它将在需要时自动重新编译。

工作原理

在启动时，开发模式会将 GWT 应用程序的 nocache.js 文件覆盖为存根文件，这些文件会在必要时自动重新编译 GWT 应用程序。

GWT 应用程序本身是从运行在不同端口（默认情况下为 9876）上的单独 Web 服务器加载的。

不使用开发模式

您也可以在不使用开发模式的情况下运行超级开发模式。这在 GWT 的早期版本中是必需的，并且在调试运行在不同服务器上的 GWT 应用程序时也可能有用。

如果您没有使用开发模式，首先需要编译 GWT 应用程序并启动一个提供其输出文件的 Web 服务器。然后将超级开发模式代码服务器作为单独的进程启动。

代码服务器是一个普通的 Java 程序，您可以从命令行运行。以下是一些启动它的详细信息

  • jar 文件是 gwt-codeserver.jar

  • 您还需要在类路径中使用 gwt-dev.jar，以及编译 GWT 应用程序所需的任何其他内容（很可能 gwt-user.jar）。

  • main 方法位于 com.google.gwt.dev.codeserver.CodeServer 中

如果您在没有任何参数的情况下运行 CodeServer，它将打印出它的命令行参数。对于 2.12.0，以下是输出：``` Google Web Toolkit 2.12.0 CodeServer [-[no]allowMissingSrc] [-[no]compileTest] [-compileTestRecompiles count] [-[no]failOnError] [-[no]precompile] [-port port] [-src dir] [-workDir dir] [-launcherDir] [-bindAddress host-name-or-address] [-style (DETAILED|OBFUSCATED|PRETTY)] [-setProperty name=value,value…] [-[no]incremental] [-sourceLevel [auto, 1.8, 9, 10, 11, 17]] [-logLevel (ERROR|WARN|INFO|TRACE|DEBUG|SPAM|ALL)] [-[no]generateJsInteropExports] [-includeJsInteropExports/excludeJsInteropExports regex] [-XmethodNameDisplayMode (NONE|ONLY_METHOD_NAME|ABBREVIATED|FULL)] [-X[no]closureFormattedOutput] [module]

其中 -[no]allowMissingSrc 允许 -src 标志引用缺失的目录。（默认值为 OFF） -[no]compileTest 在编译模块后退出。如果编译成功，退出代码将为 0。（默认值为 OFF） -compileTestRecompiles 在编译测试期间重新编译（第一次编译之后）的次数。 -[no]failOnError 如果模块的 Java 文件存在编译错误，即使未使用，也停止编译。（默认值为 OFF） -[no]precompile 预编译模块。（默认值为 ON） -port 代码服务器运行的端口。 -src 包含 GWT 源代码的目录，将添加到类路径的开头以进行编译。 -workDir 代码服务器将写入编译器输出的目录树的根目录。如果未提供，将使用临时目录。 -launcherDir 用于启动超级开发模式的文件将被写入的输出目录。（可选。） -bindAddress 指定代码服务器和 Web 服务器的绑定地址（默认值为 127.0.0.1） -style 脚本输出样式：DETAILED、OBFUSCATED 或 PRETTY -setProperty 以 propertyName=value1[,value2…] 的形式设置属性的值。 -[no]incremental 通过重用先前编译的数据来更快地编译。（默认值为 ON） -sourceLevel 指定 Java 源代码级别（默认值为 1.8） -logLevel 日志记录详细程度：ERROR、WARN、INFO、TRACE、DEBUG、SPAM 或 ALL（默认值为 INFO） -[no]generateJsInteropExports 为 JsInterop 目的生成导出。如果未提供 -includeJsInteropExport/-excludeJsInteropExport，则生成所有导出。（默认值为 OFF） -includeJsInteropExports/excludeJsInteropExports 在生成 JsInterop 导出时包含/排除成员和类。可以多次设置标志以扩展模式。（如果通过 -generateJsInteropExports 启用导出，该标志仅起作用） -XmethodNameDisplayMode 实验性：指定 chrome devtools 的方法显示名称模式：NONE、ONLY_METHOD_NAME、ABBREVIATED 或 FULL（默认值为 NONE） -X[no]closureFormattedOutput 实验性：启用适合由 Closure Compiler 后编译的 Javascript 输出（默认值为 OFF） 和 module 代码服务器应编译的 GWT 模块。（例如：com.example.MyApp） ```

至少，您需要提供要编译的 GWT 模块的名称。

服务器启动后，它将打印出它的 URL

The code server is ready.
Next, visit: https://127.0.0.1:9876/

在浏览器中加载此 URL。它提供了两个书签，您可以将它们拖放到浏览器的书签栏中。

然后转到包含要调试的 GWT 应用程序的网页。（您需要在必要时启动此服务器；它不会为您提供。）

单击开发模式开启书签，它将显示一个对话框

然后，您可以单击编译来重新编译要重新编译的应用程序，它将重新编译并重新加载页面。

提示：每个编译按钮也是一个书签，所以如果您愿意，可以将其拖放到工具栏中。

书签的工作原理

按下“编译”按钮会向代码服务器发送请求以重新编译 GWT 应用程序。

代码服务器以草稿模式（大多数优化关闭）运行 GWT 编译器，并使编译器的输出在类似于以下 URL 的 URL 上可用

https://127.0.0.1:9876/hello/hello.nocache.js

然后在 会话存储 中设置一个特殊值，并重新加载页面。

以下是会话存储变量的样子

> window.sessionStorage["__gwtDevModeHook:hello"]
  "https://127.0.0.1:9876/hello/hello.nocache.js"

重新加载页面后，原始 hello.nocache.js 脚本将在会话存储中查找此特殊键（具有相同的模块名称），并自动重定向到提供的 URL。

调试

超级开发模式将整个 GWT 应用程序编译为 JavaScript，类似于生产模式。这意味着我们不能像在经典开发模式中那样使用普通的 Java 调试器。相反，我们将使用浏览器的调试器。（我建议现在使用 Chrome。）

浏览器调试器设计用于调试 JavaScript。但是，SourceMaps 标准 允许调试器显示 Java（和其他语言）的源代码，而不是 JavaScript 文件。

在 Chrome 中，您可能需要在调试器设置中打开源映射

启用此设置后，您应该能够在 Chrome 开发者工具的“Sources”面板中浏览 GWT 应用程序中的所有 Java 源代码。（您也可以按 Control-P 搜索源文件。）

基于源映射的调试工作原理

使用超级开发模式时，浏览器的调试器将从代码服务器下载 Java 文件。以下是浏览器调试器可能用于下载文件的示例 URL

https://127.0.0.1:9876/sourcemaps/hello/com/google/gwt/core/client/GWT.java

差异

与经典开发模式相比，超级开发模式的方法有一些优点

  • 它支持移动浏览器。（不需要浏览器插件。）

  • GWT 应用程序运行速度更快，因为 Java 和 JavaScript 之间的调用不再需要网络往返。

  • 开发人员可以在同一个调试会话中调试 Java、JavaScript 以及可能的其他客户端语言。这在从 GWT 调用 JavaScript 库时特别有用。

  • 浏览器调试器具有高级功能（例如 DOM 断点），这些功能对于调试 GWT 代码非常有用。

但是，也有一些缺点需要注意

  • 代码服务器没有身份验证，会向任何请求的用户提供您的所有 Java 源代码。因此，建议您仅在本地主机或防火墙后面运行它。（默认情况下使用本地主机。）

  • 不支持 https。请参阅 问题 7535 获取更新。

  • 虽然所有现代浏览器都支持源映射，但基于源映射的调试目前在 Chrome 中效果最佳。我们希望浏览器支持会得到改善，但目前，您将不得不依靠其他调试技巧来调试某些浏览器。例如，您可以使用 `GWT.log` 和 `java.util.logging` 将消息记录到浏览器控制台中，并在 Java 代码中添加对 `GWT.debugger` 的调用来添加断点。

  • 在 Chrome 调试器中检查变量时，字段名称和值是 JavaScript，而不是 Java。

  • 超级开发模式不支持像开发模式那样运行 Java Web 应用程序（war 文件）。在 2.7 及更高版本中，您可以使用开发模式，它将自动启动超级开发模式，否则您需要运行单独的 Java servlet 引擎。

  • 由于超级开发模式不在 JVM 中运行 GWT 应用程序，因此某些运行时检查不会发生。例如，当数组索引超出范围时，不会出现任何 `IndexOutOfBoundsException`。

祝您编码愉快！