Лабораторная работа 8 Среда разработки NetBeans ide. Отладка JavaScript и php сценариев на удаленном web-сервере с помощью NetBeans ide и расширения xDebug.
Цель
Познакомиться со средой разработки NetBeans IDE. Выполнить установку и настройку расширения XDebug. Научиться выполнять отладку PHP проектов на удаленном web-сервере.
Теоретические сведения
NetBeans IDE – свободная интегрированная среда разработки приложений (IDE) на языках программирования Java, Python, PHP, JavaScript, C, C++ и ряда других.
Проект NetBeans IDE поддерживается и спонсируется компанией Oracle, однако разработка NetBeans ведется независимым сообществом разработчиков-энтузиастов (NetBeans Community) и компанией NetBeans Org.
Для разработки программ в среде NetBeans и для успешной инсталляции и работы самой среды NetBeans должен быть предварительно установлен Sun JDK или J2EE SDK подходящей версии.
Xdebug – свободная библиотека для разработчиков PHP.
Xdebug – это расширение для PHP, написанное Derick Rethans, одним из разработчиков языка PHP.
Выполнение
Скачайте сборку NetBeans по ссылке https://netbeans.org/downloads/. Для выполнения лабораторных работ будет достаточно сборки с поддержкой только PHP.
Выполните установку среды NetBeans IDE.
Убедимся, что на web-сервере не установлено расширение xdebug, необходимое нам для выполнения отладки PHP скриптов. В браузере открываем URL https://www.server_freebsd.mycompany.ru/index.php и получаем всю информацию по настройки PHP на web-сервере. Копируем эту информацию в буфер обмена и открываем URL http://xdebug.org/wizard.php и вставляем информацию о PHP в текстовую область страницы. Нажимаем кнопку «Analyse my phpinfo() out» и получаем информацию об установленном расширении xdebug, а точнее не установленном, и инструкцию по установке, которую предстоит выполнить.
Выполним установку расширения XDebug на web-сервер следуя инструкции с сайта. Скачиваем архив xdebug-2.3.3.tgz и используя, например, ftp «заливаем» его на web-сервер в каталог /tmp.
На сервере выполняем следующие команды
cd /tmp
tar -xvzf xdebug-2.3.3.tgz
cd xdebug-2.3.3
phpize
После последней команды должны получить примерно следующий вывод
Выполним следующие команды
./configure
make
cp modules/xdebug.so /usr/local/lib/php/20121212/
В файле /usr/local/etc/php.ini добавим следующие строки для выполнения минимальной настройки отладчика. Первая строка самая главная, она как раз и подключает расширение. Для нас так же важен будет номер порта для удаленной отладки (см. xdebug.remote_port=9000).
zend_extension=/usr/local/lib/php/20121212/xdebug.so
xdebug.remote_enable=on
xdebug.remote_log="/var/log/xdebug.log"
xdebug.remote_connect_back = 1
xdebug.remote_handler=dbgp
xdebug.remote_port=9000
xdebug.var_display_max_data=10000
xdebug.var_display_max_children=10
Выполните перезапуск web-сервера.
Убеждаемся, что xdebug успешно установлен, для этого еще раз выполняем пункт 3.
Попробуем выполнить удаленную отладку простого проекта.
На web-сервере в каталоге /usr/local/www/apache24/data/ создаем каталог lb08 и в нем файл index.php следующего содержания
<?php
echo('<!DOCTYPE HTML>');
echo('<html>');
echo('<head>');
echo('<meta charset="koi8-r"/>');
echo('<title>Лабораторная работа 8. Отладка PHP скрипта</title>');
echo('</head>');
echo('<body>');
echo('<H1>Отладка PHP скрипта на удаленном web-сервере с помощью NetBens и XDebug</H1>');
$a = 1;
$b = 3;
$c = my_summa($a, $b);
echo('<br>Считаем пример: '.$a.'+'.$b.'='.$c.'</br>');
echo('</body>');
echo('</html>');
function my_summa($p1, $p2){
return $p1+$p2;
}
?>
В NetBeans создаем новый проект на удаленном сервере. Основные этапы создания нового проекта представлены на рисунках ниже.
Для того, что бы иметь возможность выполнять отладку проекта, необходимо настроить параметры подключения к Xdebug, установленному на нашем web-сервере. В главном меню NetBeans выбираем пункт Сервис->Параметры и в разделе PHP на вкладке Отладка(Debugging) задаем идентификатор сеанса и порт отладчика (см. рисунок ниже).
Выполним пошаговую отладку сценария index.php. Для этого достаточно на панели инструментов нажать на кнопку Отладка проекта(Ctrl+F5) или выбрать пункт меню Отладка файла в раскрывающемся меню, которое появится, если выполнить клик правой кнопкой мыши в области редактирования скрипта (см. рисунок ниже).
После запуска процесса отладки проекта в браузере должна отрыться наша страничка, но она будет пустая, т.к. NetBeans перехватил выполнение скрипта и теперь его можно будет выполнить пошагово (см. рисунок ниже).
Обратите внимание, что текущая строка подсвечена зеленым цветом и в строке состояния можно увидеть статус сессии netbeans-xdebug – Выполняется.
Самостоятельно выполните пошаговую отладку, при этом посмотрите значение переменных в процессе выполнения скрипта .
Отладка JavaScript в среде NetBeans происходит аналогично, даже несколько проще, т.к. JavaScript выполняется на клиенте, а не на сервере.
В проект добавьте новый файл index.html (см. рисунок ниже). NetBeans создаст новый файл в соответствии с шаблоном и его можно будет править.
Измените файл index.html следующим образом
<!DOCTYPE html>
<html>
<head>
<title>Лабораторная работа 8. Отладка JavaScript.</title>
<meta charset="koi8-r">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
window.onload = function(){
var divList = document.getElementById("list");
var htmlList = "";
htmlList = "<ul>\n";
htmlList+= "<li>Первый элемент</li>\n";
htmlList+= "<li>Второй элемент</li>\n";
htmlList+= "<li>Третий элемент</li>\n";
htmlList+= "</ul>\n";
divList.innerHTML = htmlList;
}
</script>
</head>
<body>
<div>При загрузке страницы выподающий список заполняется с помощью JavaScript.</div>
<div id="list"></div>
</body>
</html>
Выполним пошаговую отладку JavaScript сценария на странице index.html. Предварительно проверьте настройки проекта: Свойства проекта, раздел Выполнить настройку, параметр Файл индекса должен иметь значение index.html и в разделе Браузер должен быть выбран Chrome с NetBeans Connector.
Установите Точку останова на любой строке JavaScript, он будет подсвечена красным. Теперь достаточно запустить проект на выполнение – кнопка Запустить проект (F6) на панели инструментов и можно будет пошагово выполнять инструкции скрипта (см. рисунок ниже). Если NetBeans требует установить расширение для Chrome NetBeans Connector, хотя мы уверены, что он установлен, тогда следуем инструкциям Netbeans и вручную перетаскиваем расширение на вкладку Extension в Chrome.
