Отправляет email-рассылки с помощью сервиса Sendsay

Упражнения по яванскому письму. Javascript.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Виртуальный офис - дома" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Декабрь 2006   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
12345c

Статистика

0 подписчиков
0 за неделю
←   Все выпуски   →

Отладочный монитор без среды отладки.
краткое содержание

Отладочный монитор без среды отладки.

Описывается скрипт, выполняющий функции вывода отладочной информации в реальном времени в виртуальное плавающее окно (слой) в окне документа.
Существует дней: 248
Автор: 12345c
Другие выпуски:
Рассылка 'Упражнения по яванскому письму. Javascript.'
 
Статья.
24.12.06

Отладочный монитор

 Плавающий перетаскиваемый слой, в котором выводится отладочная информация функцией с несложным синтаксисом.

В построении новой версии скрипта падающего снега, в которой нужно иметь определение нагруженности процессора, произошло существенное событие: вместо кустарных средств вывода переменных для отладки появилось окошко, в котором удобно наблюдать динамику изменения переменных. Появилось из-за того, что неудобно и долго было писать отладку вручную, каждый раз создавая теги и переменные для вывода. Теперь вместо этого есть подключаемый скрипт, в котором предусмотрены возможности совместимости с другими скриптами. Подключить его для отладки к любой странице составляет 2 действия: вставить тег с обращением к файлу скрипта и написать функцию вывода переменных, выражений или тегов в строки отладки, которые можно как создавать, так и удалять.

Получившийся скрипт, пожалуй, важнее отлаживаемого сейчас скрипта падающего снега, так как использоваться может в работе, в отладке других скриптов. На примере "падающего снега" посмотрим, как работает монитор отладки.

 

Ссылки, относящиеся к статье.

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

Демонстрационная версия монитора DebMon - отладка реальной сложной задачи (скрипт падающего снега) с выдачей чисел - индикаторов перегрузки процессора - случай, когда монитор действительно полезен.

 

Время от времени у начинающих программистов возникает вопрос: чем просвещённые пользуются при отладке скриптов? Просвещённые отвечают разочаровывающе - кто говорит, что чуть ли не блокнотом, кто - простым текстовым редактором, будто бы им не нужно средств отладки. На самом деле, это так, потому что скриптовой язык JS достаточно развит, чтобы на нём написать несколько отладочных строк, не обременяя себя грузом отладчиков.

Конечно, начинающие быстро узнают, что есть, alert(), document.getElementById('').innerHTML, и вскоре единственное требование к редактору остаётся, чтобы руки как можно быстрее писали эти несложные строчки. Достаточно пользоваться вставкой этих отладочных функций или ещё более их сократить, определив:

g=function(X){return document.getElementById(X);}

Но существуют более сложные категории задач, где средства отладки желательны более развитые, чтобы можно было отслеживать поведение выражений в реальном времени, но по-преженму не хочется обременять себя отладчиком. В этой теме поведём разговор о том, как сделать отладчик на скрипте, который будет равнозначен окну "Watch" в отладчиках - для просмотра значений выражений. Для примера работы с таким отладчиком используем скрипт, в котором он действительно понадобился.

История написания.

Задавшись целью написать скрипт, который будет динамически определять нагрузку (точнее, перегрузку) клиентского процессора исполняющимся скриптом (т.е. самим собой) и уменьшать её так, чтобы качество анимации оставалось в пределах нормы, я начал писать отладочные строки к скрипту. В отличие от других, нединамических задач, таких строк и пояснений к ним оказалось больше трёх, переменных больше пяти, и скоро стала утомлять необходимость держать в 3-4 различных частях программы согласованные отладочные коды. Так как эта работа была совсем не работой - не срочным ни к чему не обязывающим занятием, я смог себе позволить отложить достижение конечной цели задачи - написать скрипт, измеряющий перегрузку процессора, и сосредоточиться на удобном инструменте, тем более, что видится необходимость использовать его постоянно в таких задачах. Было написано ядро мониторинга, а раз оно оказалось несложным, оставшиеся усилия были потрачены на устроение удобств пользования - отладочный монитор стал слоем, который можно таскать по странице и который привязан к координатам окна.

В результате, получился скрипт, вставка которого создаёт отладочный слой в виде виртуального окна в документе и не утомляет необходимостью выбора отладочных переменных и места расположения скриптов. Работа с ним выполняется вызовом одной функции с переменным числом параметров. 2 кнопками на окне оно может быть свёрнуто или скрипт деактивирован, чтобы не создавать дополнительной нагрузки, и тем самым быстро сравнить поведение страницы с ним и без него.

Как всегда полагается в свободно распространяемых продуктах, остался ряд пожеланий к развитию, при том, что имеющийся вариант уже достаточно практичен. Каждый может попытаться приложить руку к усовершенствованию его, и тогда сообщество потребителей на ура примет на свою доску почёта и уважения новые инструменты героя.

Представляемый инструмент открывает удивительные возможности по слежению за нагрузкой. Он есть хороший инструмент за наблюдением динамических свойств браузера, хотя для этого нужно, конечно, разобраться, что делает рабочий скрипт падающего снега, на примере которого будет показана работа отладчика. Поэтому рассмотрение инструмента придётся отделить от ещё более интересного процесса работы с ним и ограничиться в этой статье описанием свойств отладчика.

Демонстрационный пример монитора лежит в архиве и размещён на странице сайта.

Функции отладочного монитора.

Он представляет собой скрипт с рядом функций, создающих полностью генерирующееся виртуальное окно (слой) со стилями в окне документа. Достаточно в любое место программы (лучше после всех остальных скриптов) вставить 1 тег вызова внешнего скрипта.

<script type=text/javascript src=DebMon.js></script>

Он не мешает общим обработчикам прерываний, так как подключает свои функции к ним. Его переменные достаточно характерны, чтобы не вступить в конфликт с другими. Все внешние операции выполняется одной функцией DebMon() с не менее чем 1 параметром, все остальные - служебные. Поэтому управление им достаточно запоминаемо и просто.

Первый параметр функции DebMon() - Комментарий-шаблон, имеющий 3 назначения: комментирует строку отладки, служит шаблоном и идентифицирует строку. В нём пишут текст для чтения, скрытый текст или ничего не пишут. Строками "%N", где N - цифра, указывают места, в которые вставляются остальные параметры. Если мест в шаблоне не хватает, остальные параметры выводятся через пробел после комментария-шаблона. Если в следующий раз в программе вызовется DebMon() с тем же шаблоном, строка в окне отладки заменит прежнюю. Если выполнится DebMon() с единственным параметром и он обнаружится в списке строк отладки, строка будет удалена.

DebMon('Нехватка за %1 периодов',  frmsN,
  Math.pDigit(2,ovTime=(deltaTimeN
    -aTimeStart.length*stepTime)/aTimeStart.length);)

Запомнить эти правила и управлять строками в мониторе просто, и это есть его главное достоинство.

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

Если посмотреть на программу как на источник полезных приёмов программирования, то в мониторе реализовано несолько самих по себе поучительных механизмов. Вот их перечень:

  • подсветка кнопок, выбор цвета в зависимости от функции кнопки (DebMonHL, DebMonUL, самое простое);
  • не реализованы присваивания обработчиков прерывания (attachEvent, addEventListener), так как количество кнопок мало;
  • подключение обработчиков к существующим функциям обработки (onresize, onscroll, d.onmousemove, d.onmouseup, d.ondragstart, d.onselectstart, где d==document) - позволяет не вмешиваться в существующий на странице код при добавлении функции;
  • перетаскивание слоя по странице (поместить в удобное место окна);
  • одновременно - закрепление слоя относительно окна (а не документа), чтобы прокрутка не влияла на положение в окне;
  • сворачивание слоя в строку-заголовок, чтобы не мешал просмотру основного содержания;
  • прозрачность для слоя, иная прозрачность для свёрнутого заголовка;
  • не сделано относительное позиционирование на стилях свёрнутого и несвёрнутого слоёв - их положение при перетаскивании вычисляется, что было бы несколько сложнее;
  • не сделана генерация объекта типа слоя монитора, чтобы можно было создавать несколько мониторов. Тогда можно выдавать один монитор - для отражения начальных значений, другой - для текущих, третий - для параллельного процесса другой части задачи.

    Для демонстрации возможностей в представленный скрипт добавлены 2 ненужных строки (которые не включены в архивированную рабочую версию):

    1) при изменении размеров окна и при прокрутке выводится отладочная строка, показывающая координаты слоя (прокрутка создаётся кликом на ссылке "Добавить прокрутку" в демо-примере);

    2) она же удаляется вручную кликом по ссылке "Clear one string "Sdvig: " in debug monitor (example)", что демонстрирует функцию удаления одной отладочной строки.

    Остальные кнопки, которые видны на демонстрационном примере, запускают или останавливают отлаживаемый скрипт, результаты поведения которого отражаются в мониторе отладки. Числа указывают на нагруженность процессора в системе, и увидеть корелляцию с нагрузкой можно, включив системный монитор задач (для Windows - Ctrl-Shift-Esc).

    О нагрузке, создаваемой монитором. Конечно, он сам ухудшает динамические характеристики страницы. Чем больше вывода происходит в окно отладки, тем больше. В демонстрации это легко видеть, выключив развёрнутый вызов функции DebMon() и включив краткий, без комментариев. Если ещё и краткий вывод дезактивировать кнопкой "Clear" вверху справа, нагрузка уменьшится в данном скрипте ещё на 5%.

    // Краткий вывод монитора отладки
  DebMon('',
    Math.pDigit(3,dTimeMax),
    Math.pDigit(3,dTimeMin)
  )

    Не будем здесь описывать впечатляющие выводы, получаемые наблюдением работы отладочного скрипта в различных браузерах, как и устройство его, сделаем это в следующем выпуске рассылки, когда скрипт падающего снега в новой версии будет написан. Он позволит, опять же, получить не только один конкретный результат - украшение страниц анимацией, но и даст много других побочных, но более важных знаний о динамике скриптов в браузерах. Например, первые результаты показали, что все браузеры создают ошибку при использовании таймера вместо часов (что, скажем, не ново), но интересно то, что в IE ошибка зависит от загруженности процессора между событиями таймера (при условии неперегруженности), а в остальных браузерах - нет. И почему-то нет браузера, точно отмеряющего время по таймеру, ошибка в 5-8% существует всегда при работе демонстрационного скрипта. Впрочем, вы можете увидеть это сами на примере или подождать его комментариев к следующему выпуску.

     

    • Уровень: для программистов
     javascript.aho.ru , © I.Svetlov, 2005-2006 
    Текущая очерёдность плана статей (подписчики могут корректировать через голосование).
    9. Многуровневое меню с навигацией по наведению мыши.
    8. Ключевые слова новых технологий, которые нужно знать разработчику веб-страниц.
    3. Как писать тексты с доступом через JS без экранирования специальных символов (&lt; и другие).
    4. select и list - в них есть много общего. Как и с меню навигации. Эмулятор селекта.
    5. Древовидное меню, подход к данным, отделение данных от представления.
    6. Многонедельный календарь со ссылками. (По списку строится календарь.)

    Форум сайта рассылки, почта автора рассылки.

     
    В избранное