Как определить внешние действия в фоновом режиме?

Я новичок в среде JavaScript, и он работает в системе, в которой я недавно. Мы используем GWT для JavaScript.

Каков наилучший способ обнаружения соединений между внутренними процессами и фронтовые действия? Например. какой фоновый метод вызывается, когда нажата кнопка "this", нажата вкладка, окно открывается,....

Единственный способ, которым я могу думать, - использовать средства отладки отладчика и Eclipse для поиска/вызова: держать точки останова в местах, где, как я ожидаю, будет работать - пока я не попаду на место.

Есть ли/нет более эффективный способ сделать это?

Как делают другие разработчики?

Я разработчик. В предыдущей системе я установил монитор порта - Fiddler, увидел содержимое запроса, отправленного FE, и пошел оттуда.

Я знаю, что это наивно. Пожалуйста, несите меня.

ТИА.

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

ИЗМЕНИТЬ:

лучшим было бы инструмент для отладки, показывающий трассировку стека, или даже путь выполнения любым способом, рассказывая о выполняемых back-end методах и/или создавая потоки. есть ли такой инструмент?

Ответ 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 (попробуйте ctrl + щелкнуть его в вашей среде IDE).
Теперь вам просто нужно посмотреть на обработчиков, как объяснялось ранее.

Если вы не знаете Java-класс, который содержит интерфейсную логику

Чтобы найти Java-класс для данной веб-страницы, вы можете прибегнуть к хорошему поисковому поиску. Найдите нестандартный строковый литерал, используемый на веб-странице. Не что-то вроде "Добавить", но больше похоже на "Регистрация пользователя".
Используйте IDE для поиска базы кода проекта для этой строки. Он должен появляться внутри файла .properties или класса с константами и литералами или, может быть, даже жестко запрограммирован в интерфейсе класса Java.
Теперь просто используйте свою среду IDE, чтобы следовать рекомендациям. Это может быть что-то вроде .properties file → Constants interface → .ui.xml file → front-end Java class, или литералов класса Java → front-end Java class.

Если у вас нет доступа к исходному исходному коду

Вы можете попытаться использовать свои инструменты разработчика/скрипт для поиска вызовов REST, а именно, как GWT реализует RPC.
Таким образом, вызов SomeService.someRPCmethod выше может появиться в Fiddler как вызов http:://yourwebpage/somepath/SomeService с набором параметров GET/POST, один из которых должен быть someRPCmethod (имя метода). Но это не всегда так.

Если вы используете GWT 2.6+ в режиме SuperDev с включенными источниками, вы также можете попытаться отладить Javascript в интерфейсе до тех пор, пока вы не достигнете вызовов RPC. См. ответ abhinav3414.

Последний (или возможно первый!) ресурс

Спросите разработчиков-интерфейсов, они там звонят и могут найти вас в пути за считанные минуты;)

Ответ 2

У меня была аналогичная проблема, поэтому я установил расширение в моем chrome.Below - это имя расширения. Вы можете попробовать один раз.

Visual Event 2.1

Know what event is bound on each dom element

Существует еще один подход. Вы можете отлаживать свой код с внешнего интерфейса. Вы можете проверить элемент в своем браузере, а затем открыть вкладку Source.
Нажмите ctrl + P для поиска файла, в который вы хотите поместить точки отладки.
Поместите точки отладки, нажав на row number.
Таким образом вам не нужно часто заходить в затмение.

Ответ 3

Я бы начал с поиска кода для слушателей о любых событиях, которые вас интересуют, и оттуда. Я работаю в EXT JS, и я делаю это все время.

После всех проходов кода это единственная гарантия, если все вызовы бэкэнд не пройдут через какой-либо известный класс.

Мониторинг сети также является хорошим способом.

Это можно сделать в Chrome через "Инструменты разработчика" на вкладке "Сеть".

Ответ 4

В GWT у вас есть на стороне клиента "import java.util.logging.Logger;" которые выводят вашу информацию об отладке в консоль браузеров. На стороне сервера вы просто используете "System.out.println(" debug "); для отладки, которая поступает в файлы журнала Apache 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, но я не уверен в этом. Весь вывод сервера и ошибки, включая трассировки стека, будут находиться в папке/var/log/tomcat/на linux или эквиваленте в Windows. Я могу честно сказать, я еще не использовал отладки точек останова с GWT.

Клиентский и серверный код находится в отдельных классах в своих собственных папках в рамках проекта.

Ответ 5

Просто хочу упомянуть, что иногда отладчик используется в ситуациях, когда другие инструменты также могут помочь (не уверен, что это ситуация здесь, - но принесите мне еще два предложения):

(1) вы можете grep соответствующий html-ресурс, grep - прекрасный инструмент для изучения больших систем.

(2) вы можете добавить журнал, в некоторых случаях вы можете переключиться в режим отладки и увидеть тонны журнальных трасс

Ответ 6

Используйте вкладку Сеть в инструментах разработчика вашего предпочтительного браузера, который вы используете для тестирования.

CHROME

Нажмите F12 или, альтернативно, выберите из меню - инструменты > инструменты разработчика введите описание изображения здесь

FIREFOX

Нажмите F12 или, альтернативно, выберите из меню - Инструменты разработчикa > toggle введите описание изображения здесь

IE

Нажмите F12 введите описание изображения здесь