Как определить внешние действия в фоновом режиме?
Я новичок в среде 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
![введите описание изображения здесь]()