如何检测后端的前端操作？

Question

我是JavaScript环境的新手,它是我刚刚在系统上运行的那个.我们正在使用GWT for JavaScript.

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

我能想到的唯一方法是使用调试器和Eclipse搜索/调用层次结构设施:继续将断点放在我预期会运行的地方 - 直到我到达现场.

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

其他开发者如何做？

我是一名后端开发人员.在之前的系统中,我放了一个端口监视器--Fiddler,看到FE正在发送的请求的内容并从那里开始.

我知道这是一个天真的问题 - 请耐心等待我.

TIA.

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

编辑:

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

Answer 1

以下理所当然地认为您正在使用一个像样的IDE,并且已经将GWT项目导入到这样的IDE中.如果不是这种情况,最后会有一些帮助.

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

找到表示元素的对象(a Button,a 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类,您可以使用良好的字符串搜索.
找到网页中使用的不太常见的字符串文字.不像"添加",而是更像"用户注册".
使用IDE在项目的代码库中搜索该字符串.它应该出现在.properties文件中,或者带有常量和文字的类中,或者甚至可以在前端Java类中进行硬编码.
现在只需使用您的IDE来跟踪引用.它可能类似于.propertiesfile - > Constantsinterface - > .ui.xmlfile - >前端Java类,或文字Java类 - >前端Java类.

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

您可以尝试使用Developer Tools/Fiddler查找REST调用,这就是GWT实现RPC的方式.
所以SomeService.someRPCmethod上面的调用可能会出现在Fiddler中,作为一个http:://yourwebpage/somepath/SomeService带有一堆GET/POST参数的调用,其中一个应该是someRPCmethod(方法的名称).但情况并非总是如此.

如果您在启用了Sources的SuperDev模式下运行GWT 2.6+,您还可以尝试在前端调试Javascript,直到您到达RPC调用.见abhinav3414的回答.

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

问问前端开发人员,他们把电话放在那里,可以让你在几分钟内走上正轨;)

Answer 2

我将首先在代码中搜索您感兴趣的任何事件的侦听器，然后从那里开始。我在 EXT JS 工作，并且一直这样做。

遵循所有代码路径是唯一的保证，除非对后端的所有调用都经过某个已知的类。

监控网络也是一个好方法。

这可以在 Chrome 中通过“网络”选项卡上的“开发人员工具”来完成。