javascript - 如何在后端检测前端 Action ？

Question

我是 JavaScript 环境的新手，它是在我新使用的系统上运行的环境。我们正在使用 GWT for JavaScript。

检测后端进程之间连接的最佳方法是什么和前端 Action ？例如。按下“那个”按钮时调用哪个后端方法，单击选项卡，窗口打开，......

我能想到的唯一方法是使用调试器和 Eclipse 搜索/调用层次结构工具:不断放置断点在我预计会跑的地方——直到我到达目的地。

是否有更有效的方法来做到这一点？

其他开发人员如何做？

我是一名后端开发人员。在以前的系统中，我放置了一个端口监视器-- Fiddler ,看到了 FE 发送的请求的内容，然后从那里去了。

我知道这是一个幼稚的问题——请耐心等待。

TIA。

//======================

编辑:

最好的是类似调试器的工具显示堆栈跟踪，甚至以任何方式执行路径，告诉正在运行和/或生成线程的后端方法。有这样的工具吗？

Answer 1

以下假定您使用的是一个不错的 IDE，并且您已经将 GWT 项目导入到这样的 IDE 中。如果这不是您的情况，最后会有一些帮助。

如果你知道哪个Java类包含前端逻辑，以及你感兴趣的元素

找到表示元素的对象(Button、ListBox 等)并查看附加到它的事件处理程序。
像这样:

//...
@UiField
ListBox myDropDownList;
//...
    myDropDownList.addChangeHandler(new ChangeHandler() {
        @Override
        public void onChange(ChangeEvent changeEvent) {
            SomeService.someRPCmethod(... params, callback, ...);
        }
    });

SomeService.someRPCmethod 方法实现应包含所有后端调用。

如果您知道 Java 类，但不知道所有按钮中的哪一个是您要查找的按钮

大多数 GWT 应用程序都使用 *.ui.xml 文件，这些文件就像实际网页的骨架。此 XML 文件引用 Java 类中使用的实际 Java 对象，并且通常按照它们所代表的类来命名。
找到 ui.xml 文件并查找如下内容:

...
<g:ListBox ui:field="myDropDownList" styleName="cssClassName"/>
...

这应该像这样出现在您的网页中:

<select class="cssClassName" ...>
    <option ...>

XML 文件中的位置和 CSS 类名应该可以帮助您确定要查找的元素。一旦找到它，ui:field 属性就会指向 Java 对象(尝试在您的 IDE 中按住 ctrl 并单击它)。
现在您只需按照之前的解释查看处理程序。

如果你不知道包含前端逻辑的Java类

要查找给定网页的 Java 类，您可以求助于好的 ol' 字符串搜索。
找到网页中使用的不太常见的字符串文字。不像“添加”，更像是“用户注册”。
使用您的 IDE 在项目的代码库中搜索该字符串。它应该出现在 .properties 文件中，或者包含常量和文字的类中，或者甚至可能硬编码在前端 Java 类中。
现在只需使用您的 IDE 来遵循引用。它可能类似于 .properties 文件 -> Constants 接口(interface) -> .ui.xml 文件 -> 前端 Java 类，或文字Java 类 -> 前端 Java 类。

如果您无权访问前端源代码

您可以尝试使用您的 Developer Tools/Fiddler 来查找 REST 调用，这就是 GWT 实现 RPC 的方式。
因此，上面对 SomeService.someRPCmethod 的调用可能在 Fiddler 中显示为 http:://yourwebpage/somepath/SomeService 调用GET/POST 参数，其中之一应该是 someRPCmethod(方法的名称)。但情况并非总是如此。

如果您在启用源的 SuperDev 模式下运行 GWT 2.6+，您还可以尝试在前端调试 Javascript，直到到达 RPC 调用。参见 abhinav3414's answer .

最后(或者可能是第一个!)资源

询问前端开发人员，他们将调用放在那里，可以让您在几分钟内走上正轨；)