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

Question

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

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

我能想到的唯一方法是使用调试器和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类，您可以使用良好的字符串搜索。
找到网页中使用的不太常见的字符串文字。 不像“添加”，而是更像“用户注册”。
使用IDE在项目的代码库中搜索该字符串。 它应该出现在.properties文件中，或者带有常量和文字的类中，或者甚至可以在前端Java类中进行硬编码。
现在只需使用您的IDE来跟踪引用。 它可能类似于.properties文件 - > Constants接口 - > .ui.xml文件 - >前端Java类，或文字Java类 - >前端Java类。

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

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

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

最后（或者可能是第一个！）资源

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

Answer 2

我有类似的问题，所以我在chrome中安装了一个扩展名.Below是扩展名。 你可以尝试一次。

视觉事件2.1

Know what event is bound on each dom element

还有一种方法 ，您可以从前端调试代码。 您可以在浏览器中检查元素，然后打开“ Source选项卡。
按ctrl + P搜索要放置调试点的文件。
通过单击row number来放置调试点。
这样你就不必经常去日食了。

Answer 3

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

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

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

这可以通过“网络”标签上的“开发人员工具”在Chrome中完成。

Answer 4

在GWT中，您在客户端“import java.util.logging.Logger;” 它将您的调试信息输出到浏览器控制台。 在服务器端，您只需使用“System.out.println（”debug“）;” 用于调试哪些转到Apaches Tomcat日志文件。 这使得在实时服务器上的调试更容易一些。

GWT使用RPC进行客户端和服务器之间的通信。 发送的数据是序列化的，如果需要可以是整个类。 模块中源的三个文件夹为“客户端”，“服务器”和“共享”。

例如，用于来回发送数据的共享类:(需要空白构造函数来序列化类）

public class MySharedData implements Serializable {
    private static final long serialVersionUID = 1987236748763652L; // used for serializing data

    public List<String> lotsOfStrings = new ArrayList<String>(); // use most java vars
    public int width, height;

    public MySharedData() {} // 'need' a blank constructor
    public MySharedData(MySharedData data) { //do stuff } // also can
}

在服务器端，它可能看起来像这样：

public class MyServerRPCImpl extends RemoteServiceServlet implements MyServerRPC {
    private static final long serialVersionUID = 4435555929902374350L;

    public List<String> getStringList(int var, List<String> strs) {
        // do stuff
        System.out.println("debugging output"); // to tomcat log file
        return stringList;
    }
}

客户端将使用带有两个方法的异步回调，onSuccess（）和onFailure（），以便您可以处理呼叫失败。 使用它是有用的：

public class MyGWTApp implements EntryPoint {
    // the server RPC class
    final MyServerRPCAsync server = GWT.create(MyServerRPC.class); // create RPC instance
    final Logger log = Logger.getLogger("tag");

    public void doSomething() {
        MySharedData data = new MySharedData();
        server.getStringList(data, new AsyncCallback<List<String>>() {
            @Override
            public void onFailure(Throwable caught) {
                log.info("error"); // logging goes to the javascript console output
            }
            @Override
            public void onSuccess(List<String> result) {
                log.info("call worked");
            }
        };)
    }
}

以上是我管理日志记录的方式，因为我的项目必须直接从Tomcat服务器运行。 我也相信从Eclipse运行时的服务器日志记录将转到Eclipse的控制台日志，但我不确定。 所有服务器输出和错误（包括堆栈跟踪）都将位于Linux上的/ var / log / tomcat /文件夹中，或者位于Windows上的等效文件中。 老实说，我还没有使用断点调试GWT。

客户端和服务器代码位于项目中自己的文件夹中的单独类中。

Answer 5

只是想提一下，有时调试器用于其他工具也可以帮助的情况（不确定这是否是这里的情况 - 但只是另外两个句子）：

（1）你可以grep相关的html资产，grep是学习大型系统的绝佳工具

（2）您可以添加日志，在某些情况下，您可以切换到调试模式并查看大量日志跟踪

Answer 6

在您用于测试的首选浏览器的开发人员工具中使用“ 网络”选项卡。

铬

按F12或从菜单 - 工具>开发人员工具中选择

FIREFOX

按F12或从菜单中选择 - 开发人员>切换工具

IE

按F12