| // |
| // Licensed to the Apache Software Foundation (ASF) under one |
| // or more contributor license agreements. See the NOTICE file |
| // distributed with this work for additional information |
| // regarding copyright ownership. The ASF licenses this file |
| // to you under the Apache License, Version 2.0 (the |
| // "License"); you may not use this file except in compliance |
| // with the License. You may obtain a copy of the License at |
| // |
| // http://www.apache.org/licenses/LICENSE-2.0 |
| // |
| // Unless required by applicable law or agreed to in writing, |
| // software distributed under the License is distributed on an |
| // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| // KIND, either express or implied. See the License for the |
| // specific language governing permissions and limitations |
| // under the License. |
| // |
| |
| = Использование визуального отладчика в NetBeans IDE |
| :jbake-type: tutorial |
| :jbake-tags: tutorials |
| :jbake-status: published |
| :icons: font |
| :syntax: true |
| :source-highlighter: pygments |
| :toc: left |
| :toc-title: |
| :description: Использование визуального отладчика в NetBeans IDE - Apache NetBeans |
| :keywords: Apache NetBeans, Tutorials, Использование визуального отладчика в NetBeans IDE |
| |
| В этом документе даны указания по использованию визуального отладчика для поиска ошибок и отладки программного кода для визуальных элементов вашего приложения графического интерфейса. Визуальный отладчик приложений можно использовать в приложениях Java или JavaFX с графическим интерфейсом. |
| |
| В этом разделе мы рассмотрим использование визуального отладчика на примере игры "Анаграммы". В этом разделе мы продемонстрируем, как сделать снимок графического интерфейса пользователя приложения и затем использовать этот снимок для поиска исходного кода, добавления прослушивателей в событие и просмотра журнала событий компонентов графического интерфейса пользователя. |
| |
| |
| image::images/netbeans-stamp-80-74-73.png[title="Содержимое этой страницы применимо к IDE NetBeans 7.2, 7.3, 7.4 и 8.0"] |
| |
| |
| *Для работы с этим учебным курсом требуется следующее программное обеспечение и ресурсы.* |
| |
| |=== |
| |Программное обеспечение или материал |Требуемая версия |
| |
| |link:https://netbeans.org/downloads/index.html[+IDE NetBeans+] |7.2, 7.3, 7.4, 8.0 |
| |
| |link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Комплект для разработчика на языке Java (JDK)+] |версия 7 или 8 |
| |=== |
| |
| *Примечание о JUnit.* Если библиотеки JUnit не были установлены во время установки IDE, то при попытке отладки приложения появится сообщение о отсутствующем ресурсе с предложением установить JUnit. |
| |
| |
| == Создание снимка графического интерфейса пользователя |
| |
| В данном учебном курсе в качестве примера будет использована игра "Анаграммы", приложение Java для настольного компьютера, с простым графическим интерфейсом, входящим в набор примеров мастера создания проекта. После создания проекта вы начнете процесс отладки и сделаете снимок графического интерфейса приложения. |
| |
| 1. Выберите 'Файл' > 'Новый проект' (Ctrl-Shift-N; ⌘-Shift-N в Mac) в главном меню, чтобы открыть мастер создания проектов. |
| 2. В категории "Примеры" > Java выберите "Игра Анаграммы". Нажмите кнопку "Далее". |
| 3. Укажите местоположение проекта. Нажмите 'Готово'. |
| |
| При нажатии на кнопку 'Готово' IDE создает проект, который открывается в окне 'Проекты'. |
| |
| |
| |
| . Нажмите кнопку 'Отладка' на панели инструментов (Ctrl-F5; ⌘-F5 в Mac) для запуска сеанса отладки. |
| |
| Также вы можете щелкнуть правой кнопкой мыши узел проекта в окне 'Проекты' и выбрав 'Отладка'. |
| |
| Когда начнется сеанс, среда IDE запустит игру "Анаграммы" и откроет окно "Отладка". |
| |
| Дополнительные сведения о работе с отладчиком см. в разделе link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG798[+Запуск и отладка проектов приложений Java+] в документе _Разработка приложений в IDE NetBeans_. |
| |
| |
| |
| . В главном меню выберите "Отладка" > "Сделать снимок графического интерфейса пользователя". |
| |
| При выборе пункта "Сделать снимок графического интерфейса пользователя" среда IDE сделает моментальный снимок графического интерфейса пользователя и откроет снимок в главном окне. |
| |
| [.feature] |
| -- |
| |
| image::images/debug-fullscreen.png[role="left", link="images/debug-fullscreen.png"] |
| |
| -- |
| |
| В этом руководстве по использованию визуального отладчика окно "Отладка" использоваться не будет. |
| |
| |
| == Работа с визуальным отладчиком |
| |
| Снимок графического интерфейса пользователя — это средство визуальной отладки, помогающее найти исходный код для компонентов графического интерфейса пользователя. Иногда исходный код для компонентов графического интерфейса пользователя бывает трудно найти, а снимок позволяет найти исходный код по графическому интерфейсу, вместо поиска во всём коде проекта. Можно выбирать компоненты из снимка и вызывать задачи из всплывающего меню, чтобы просматривать исходный код компонента, показывать прослушиватели и создавать точки останова в компонентах. |
| |
| |
| === Поиск исходного кода компонентов |
| |
| В этом упражнении будет продемонстрировано использование снимка графического интерфейса пользователя для поиска строк исходного кода, в которых объявляется и определяется компонент. При выборе компонента на моментальном снимке графического интерфейса пользователя можно использовать всплывающее меню для вызова различных команд. |
| |
| Команды также можно вызвать из окна 'Навигатор'. Для этого щелкните правой кнопкой мыши компонент и выберите команду во всплывающем меню. |
| |
| 1. На снимке графического интерфейса пользователя нажмите кнопку "Определить". |
| |
| При выборе компонента на снимке среда IDE отобразит подробные сведения о выбранном компоненте в окне "Свойства". Если окно 'Свойства' не отображается, выберите 'Окно > Свойства' в главном меню. |
| |
| image::images/debug-snapshot.png[title="Снимок графического интерфейса пользователя"] |
| |
| Среда IDE также отображает местоположение компонента в иерархии формы в окне навигатора. |
| |
| image::images/debug-navigator.png[title="Снимок графического интерфейса пользователя"] |
| |
| |
| . Щелкните кнопку "Определить" правой кнопкой мыши и во всплывающем меню выберите пункт "Перейти к объявлению компонента". |
| |
| При выборе команды "Перейти к объявлению компонента" среда IDE открывает файл исходного кода в редакторе и перемещает курсор на ту строку в коде, в которой объявляется ``guessButton`` . |
| |
| image::images/debug-gotodeclaration.png[title="Строка кода, в которой объявлен компонент"] |
| |
| |
| . Щелкните кнопку "Определить" правой кнопкой мыши на моментальном снимке и выберите "Перейти к исходному коду компонента". |
| |
| При выборе команды "Перейти к исходному коду компонента" среда IDE открывает файл исходного кода в редакторе и перемещает курсор на строку исходного кода компонента JButton. |
| |
| image::images/debug-gotosource.png[title="Строка исходного кода компонента"] |
| |
| На снимке графического интерфейса можно воспользоваться командой 'Перейти к добавлению иерархии', чтобы найти строку исходного кода, где компонент добавляется в соответствующий контейнер. По умолчанию команда 'Перейти к добавлению иерархии' отключена. Включить эту команду можно в окне 'Параметры'. |
| |
| 1. Откройте окно 'Параметры'. |
| 2. В окне 'Параметры' перейдите на вкладку 'Отладчик Java' в категории Java. |
| |
| *Примечание.* В NetBeans IDE 7.1 вкладка 'Отладчик' находится в категории 'Разное' в том же окне 'Параметры'. |
| |
| |
| |
| . В списке категорий выберите "Визуальная отладка", а затем выберите *Отслеживать местоположения изменений в иерархии компонентов*. Нажмите кнопку "ОК". |
| |
| |
| . Остановите сеанс отладки (если он запущен). |
| |
| *Примечание.* После включения команды 'Перейти к добавлению иерархии' в окне 'Параметры' потребуется начать сеанс отладки заново и сделать новый снимок графического интерфейса. После этого можно будет использовать команду. |
| |
| |
| |
| . Начните новый сеанс отладки и сделайте снимок графического интерфейса. |
| |
| |
| . Щелкните компонент правой кнопкой мыши на моментальном снимке графического интерфейса пользователя и выберите "Перейти к добавлению иерархии". |
| |
| Среда IDE откроет исходный код в редакторе на строке, в которой добавляется компонент. |
| |
| image::images/debug-hierarchy.png[title="Строка исходного кода, в которой компонент добавлен в контейнер"] |
| |
| |
| === Экспорт событий компонента |
| |
| В этом упражнении вы научитесь использовать снимок графического интерфейса пользователя и окно "События" для просмотра событий компонента, искать прослушиватели компонентов и события, запускаемые компонентами. |
| |
| 1. Щелкните правой кнопкой мыши кнопку "Определить" на моментальном снимке и во всплывающем меню выберите "Показать прослушиватели". |
| |
| При выборе команды "Показать прослушиватели" среда IDE открывает окно "События". Как видно, узел "Особые прослушиватели" развернут. |
| |
| image::images/debug-customlisteners.png[title="Строка исходного кода, в которой компонент добавлен в контейнер"] |
| |
| |
| . Правой кнопкой мыши щелкните *com.toy.anagrams.ui.Anagrams$3* в узле "Особые прослушиватели" и во всплывающем выберите команду "Перейти к исходному тексту компонента". |
| |
| Исходный код открывается в редакторе на той строке, в которой определяется прослушиватель. |
| |
| |
| |
| . Выберите пустое текстовое поле на снимке. |
| |
| Также можно выбрать текстовое поле ``guessedWord`` в окне "Навигатор". |
| |
| При выборе текстового поля элементы в окне "События" автоматически изменятся, и в окне будут отображены прослушиватели выбранного компонента. |
| |
| |
| |
| . В окне "События" дважды щелкните узел "Журнал событий". При этом откроется окно "Выбор прослушивателя". |
| |
| Также можно щелкнуть правой кнопкой мыши узел Event Log и выбрать 'Задать события журналирования' во всплывающем меню. |
| |
| |
| |
| . В диалоге выберите прослушивающий процесс ``java.awt.event.KeyListener`` . Нажмите кнопку "ОК". |
| |
| image::images/debug-select-listener.png[title="Строка исходного кода, в которой компонент добавлен в контейнер"] |
| |
| Теперь прослушиватель прослушивает события клавиатуры в текстовом поле. |
| |
| |
| |
| . В приложении "Анаграммы" в текстовом поле введите несколько символов. |
| |
| При вводе вами символа это событие записывается в журнал. Развернув узел "Журнал событий", вы увидите, что каждое нажатие клавиши записано. Новые события появляются при каждом вводе символов в текстовое поле игры "Анаграммы". Развернув отдельное событие, например ``keyPressed`` , вы увидите свойства этого события в журнале. |
| |
| image::images/debug-eventlog.png[title="Строка исходного кода, в которой компонент добавлен в контейнер"] |
| |
| Развернув узел "Вызов из..." в каком-либо событии, вы увидите трассировку стека данного события. |
| |
| Этот учебный курс познакомил вас с основами визуальной отладки в среде IDE. Визуальный отладчик позволяет найти исходный код и записывать в журнал события компонентов графического интерфейса пользователя. Это намного упрощает отладку приложений с графическим интерфейсом. |
| |
| |
| link:https://netbeans.org/about/contact_form.html?to=3&subject=Feedback:%20Using%20the%20Visual%20Debugger[+Отправить отзыв по этому учебному курсу+] |
| |
| |
| |
| == Дополнительные сведения |
| |
| Дополнительные сведения о разработке и тестировании приложений в IDE NetBeans см. следующие ресурсы: |
| |
| * link:gui-functionality.html[+Введение в создание графического интерфейса на языке Java+] |
| * Демонстрация: link:debug-visual-screencast.html[+Использование визуального отладчика+] |
| * Демонстрация: link:debug-multithreaded-screencast.html[+Отладка многопоточного приложения+] |
| * Демонстрация: link:debug-stepinto-screencast.html[+ визуальная операция Step Into в отладчике NetBeans+] |
| * Демонстрация: link:debug-deadlock-screencast.html[+обнаружение взаимоблокировки с помощью отладчика NetBeans+] |
| * Демонстрация: link:debug-evaluator-screencast.html[+использование блока оценки фрагмента кода в отладчике NetBeans+] |
| * link:../../trails/java-se.html[+Учебная карта по основам среды IDE и программирования на языке Java+] |