Время от времени у начинающих джедаев возникает вопрос: чем просвещённые пользуются при отладке скриптов? Просвещённые отвечают разочаровывающе - кто говорит, что чуть ли не блокнотом, кто - простым текстовым редактором, будто бы для просвещённых не нужно средств отладки. На самом деле, это так, потому что скриптовой язык джедаев (JS) достаточно развит, чтобы на нём написать несколько отладочных строк, не обременяя себя грузом отладчиков.
   Конечно, начинающие быстро узнают, что есть, alert(), document.getElementById('').innerHTML, и вскоре единственное требование к редактору остаётся, чтобы руки как можно быстрее писали эти несложные строчки. Достаточно пользоваться вставкой этих отладочных функций или ещё более их сократить, определив:  
   Но существуют более сложные категории задач, где средства отладки желательны более развитые, чтобы можно было отслеживать поведение выражений в реальном времени, но по-преженму не хочется обременять себя отладчиком. В этой теме поведём разговор о том, как сделать отладчик на скрипте, который будет равнозначен окну "Watch" в отладчиках - для просмотра значений выражений. Для примера работы с таким отладчиком используем скрипт, в котором он действительно понадобился.
   История его написания.
   Задавшись целью написать скрипт, который будет динамически определять нагрузку (точнее, перегрузку) клиентского процессора исполняющимся скриптом (т.е. самим собой) и уменьшать её так, чтобы качество анимации оставалось в пределах нормы, я начал писать отладочные строки к скрипту. В отличие от других, нединамических задач, таких строк и пояснений к ним оказалось больше трёх, переменных больше пяти, и скоро стала утомлять необходимость держать в 3-4 различных частях программы согласованные отладочные коды. Так как эта работа была совсем не работой - не срочным ни к чему не обязывающим занятием, я смог себе позволить отложить достижение конечной цели задачи - написать скрипт, измеряющий перегрузку процессора, и сосредоточиться на удобном инструменте, тем более, что видится необходимость использовать его постоянно в таких задачах. Было написано ядро мониторинга, а раз оно оказалось несложным, оставшиеся усилия были потрачены на устроение удобств пользования - отладочный монитор стал слоем, который можно таскать по странице и который привязан к координатам окна.
   В результате, получился скрипт, вставка которого создаёт отладочный слой в виде виртуального окна в документе и не утомляет необходимостью выбора отладочных переменных и места расположения скриптов. Работа с ним выполняется вызовом одной функции с переменным числом параметров. 2 кнопками на окне оно может быть свёрнуто или скрипт деактивирован, чтобы не создавать дополнительной нагрузки, и тем самым быстро сравнить поведение страницы с ним и без него.
   Как всегда полагается в свободно распространяемых продуктах, остался ряд пожеланий к развитию, при том, что имеющийся вариант уже достаточно практичен. Каждый может попытаться приложить руку к усовершенствованию его, и тогда тема на ура примет на свою доску почёта и уважения новые доспехи героя. 
   
   Демонстрацию скрипта покажу не на искусственном примере, которым мог бы быть, например, скриптом отслеживания положения мышки и прочих динамических параметров. Пусть это будет рабочий и отлаживаемый скрипт падающего снега, тем более, что представляемый инструмент открывает удивительные возможности по слежению за нагрузкой. Он есть хороший инструмент за наблюдением динамических свойств браузера, хотя для этого нужно, конечно, разобраться, что делает рабочий скрипт.
   Тут возникает дилемма - или описывать наблюдение свойств в этой теме, или переходить в новую, посвящённую развитию скрипта падающего снега до уровня самоконтроля за нагрузкой процессора. Поступим так: кратко, в паре абзацев опишем наблюдаемые эффекты, но как только дело начнёт касаться рабочего (исследуемого) скрипта, рассуждения о нём пойдут в другой теме, а здесь останется описание возможностей отладочного монитора.
   
   Демонстрационный пример монитора лежит в прикреплённом архиве и размещён на странице сайта - http://js2.ru/example/xmp002/falling-snow-2.htm .

   Функции отладочного монитора.
   Он представляет собой скрипт с рядом функций, создающих полностью генерирующееся виртуальное окно (слой) со стилями в окне документа. Достаточно в любое место программы (лучше после всех остальных скриптов) вставить 1 тег вызова внешнего скрипта. Он не мешает общим обработчикам прерываний, так как подключает свои функции к ним. Его переменные достаточно характерны, чтобы не вступить в конфликт с другими. Все внешние операции выполняется одной функцией DebMon() не менее, чем 1 параметром, все остальные - служебные. Поэтому управление им достаточно запоминаемо и просто.
   Первый параметр функции DebMon() - комментарий-шаблон, имеющий 3 назначения: комментирует строку отладки, служит шаблоном и идентифицирует строку. В нём пишут текст для чтения, скрытый текст или ничего не пишут. Строками "%N", где N - цифра, указывают места, в которые вставляются остальные параметры. Если мест в шаблоне не хватает, остальные параметры выводятся через пробел после комментария-шаблона. Если в следующий раз в программе вызовется DebMon() с тем же шаблоном, строка в окне отладки заменит прежнюю. Если выполнится DebMon() с единственным параметром и он обнаружится в списке строк отладки, строка будет удалена.
   Вот и все внешние функции отладчика. Запомнить и управлять ими просто, и это есть его главное достоинство.
   Другие достоинства заключаются в удобстве пользования. Слой отладки реализован перетаскиваемым, сворачиваемым и частично прозрачным, чтобы поменьше мешать просмотру страницы.
   Для демонстрации возможностей в представленный скрипт добавлены 2 ненужных строки:
1) при ресайзе окна и при прокрутке выводится отладочная строка, показывающая координаты слоя (прокрутка создаётся кликом на ссылке "Добавить прокрутку" в демо-примере);
2) она же удаляется вручную кликом по ссылке "Clear one string "Sdvig: " in debug monitor (example)", что демонстрирует функцию удаления одной отладочной строки.
   Остальные кнопки, которые видны на демонстрационном примере, запускают или останавливают отлаживаемый скрипт, результаты поведения которого отражаются в мониторе отладки. Числа указывают на нагруженность процессора в системе, и увидеть корелляцию с нагрузкой можно, включив системный монитор задач (для Windows - Ctrl-Shift-Esc).
   Не будем здесь описывать впечатляющие выводы, получаемые наблюдением работы отладочного скрипта в разнличных браузерах, как и устройство его. Для этого пройдём в другую тему, посвящённую анализу результатов отладки, и уже не связанную с монитором, но пользующуюся его показаниями.
   О том, чего не сделано и хорошо бы сделать - если кратко, то приходят следующие идеи: вывод графиков в реальном времени; устроение в виде конструктора, чтобы была функция генерации любого количества мониторов на странице. В частности, им удобно было бы в отдельном окне высвечивать стартовые значения переменных. Использование куки для запоминания положения окна. 
   О нагрузке, создаваемой монитором. Конечно, он сам ухудшает динамические характеристики страницы. Чем больше вывода, тем больше. В демонстрации это легко видеть, выключив развёрнутый вызов функции DebMon() и включив краткий, без комментариев. Если ещё и краткий вывод дезактивировать кнопкой "Clear" вверху справа, нагрузка уменьшится в данном скрипте ещё на 5%.


Это сообщение отредактировал(а) 12345c - 3.3.2008, 13:02

Присоединённый файл ( Кол-во скачиваний: 55 )
 DebMonDemo.rar 6,92 Kb

настоящие джедаи не пользуются отладчиками кода!
;)

маразм крепчал, деревья гнулись