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

Question

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

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

我能想到的唯一方法是使用调试器和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对象（尝试按住Ctrl键并在IDE中单击它）。
现在您只需要按照之前的说明查看处理程序。

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

要查找给定网页的Java类，您可以求助于良好的字符串搜索 找到网页中使用的不太常见的字符串文字。不像“添加”，而是更像“用户注册” 使用IDE在项目的代码库中搜索该字符串。它应该出现在.properties文件中，或者带有常量和文字的类中，或者甚至可以在前端Java类中进行硬编码。
现在只需使用您的IDE来跟踪引用。它可能类似于.properties file - ＆gt; Constants界面 - ＆gt; .ui.xml档案 - ＆gt;前端Java类，或文字Java类 - ＆gt;前端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's answer。

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

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

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中，你在客户端＆＃34; import java.util.logging.Logger;＆＃34;它将您的调试信息输出到浏览器控制台。在服务器端，您只需使用＆＃34; System.out.println（＆＃34; debug＆＃34;）;＆＃34;用于调试哪些转到Apaches Tomcat日志文件。这使得在实时服务器上进行调试变得容易一些。

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

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

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

在您用于测试的首选浏览器的开发者工具中使用网络标签。

<强> CHROME

按F12或从菜单中选择 - 工具＆gt;开发者工具

<强> FIREFOX

按F12或从菜单中选择 - Developer＆gt;切换工具

<强> IE

按F12