Программный код на современных компьютерах выполняется с большой скоростью. Более того, этот код зачастую представляет собой "вещь в себе"; разработчик не может "влезть" внутрь его, посмотреть, что хранится в той или иной переменной, хотя часто без этого не обойтись. В этом его ограниченность.
А человек всегда преодолевает свою ограниченность посредством созданных им машин. Поэтому были созданы специальные программы — отладчики, позволяющие "заглянуть" в программный код и увидеть, как он работает. Сейчас все средства для разработки программ имеют в своем составе такие отладчики.
Не стал исключением и Dreamweaver. Он позволяет вам проверить программы, используемые в Web-страницах, а именно Web-сценарии. Если вы пишете сценарии сами, без отладчика вам будет трудно обойтись.
Какие же возможности предлагают нам современные программы-отладчики?
1. Установка так называемых точек останова. Это особые метки в коде программы, на которых выполнение приостанавливается, после чего программист может посмотреть на результат работы своей программы. После этого выполнение программы может быть продолжено до ее конца или до следующей точки останова. Точки останова применяются, чтобы выяснить, что происходит в том или ином участке кода программы.
2. Пошаговое выполнение кода. Программист может выполнять программный код выражение за выражением и наблюдать за результатами выполнения. Пошаговое выполнение позволит точно узнать, как выполняется программа, и что происходит во время ее выполнения.
3. Просмотр значений переменных. Может пригодиться практически всегда.
Так, с отладчиками вообще мы разобрались. Обратимся теперь к конкретному представителю этого славного семейства -• встроенному отладчику Dreamweaver.
Встроенный отладчик Dreamweaver
Чтобы вызвать встроенный в Dreamweaver отладчик JavaScript-кода, нажмите комбинацию клавиш <Alt>+<F12> или <Ctrl>+<Alt>+<F12>. Первая комбинация запускает отладку в первичном Web-обозревателе, а вторая -во вторичном. (О первичном и вторичном Web-обозревателях см. главу 2.) Также вы можете выбрать нужный пункт в подменю Debug in Browser меню File или меню кнопки Preview/Debug in Browser инструментария документа . После этого нажмите кнопку ОК в нескольких появившихся на экране окнах-предупреждениях, чтобы собственно запустить отладчик. И подождите некоторое время, пока все это загрузится и запустится.
Внимание!
Для того чтобы запустить отладчик Dreamweaver, вы должны иметь на своем компьютере установленную виртуальную машину Java фирмы Microsoft. Будьте внимательны: в составе Windows XP эта виртуальная машина не поставляется — вам самим придется загружать ее с сайта этой фирмы.
После загрузки и запуска отладчика Dreamweaver выведет небольшое предупреждение с кнопкой ОК и флажком Don't show me this message again. Это предупреждение предлагает вам установить точки останова и запустить отладку. Закройте это окно, нажав ОК; вы можете перед этим включить флажок Don't show me this message again, если больше не хотите его видеть.
Оно разделено на две части. В верхней части отображается выполняемый программный код, причем отладчик не разделяет HTML- и JavaScript-код, а отображает все вместе. В нижней части находится список переменных и их текущих значений, изначально пустой. Вы можете изменять относительные размеры этих двух частей, перемещая мышью находящуюся между ними полоску разделителя. В самом верху окна находится инструментарий отладчика, с помощью которой выполняются все доступные действия в этом окне.
Программный код, отображаемый в верхней половине окна отладчика, пронумерован по строкам. Номера строк отображаются на серой полосе, тянущейся вдоль левого края всей верхней половины. Строка, которая в данный момент должна быть выполнена, помечена маленькой желтой стрелкой, направленной вправо.
Теперь мы должны, как предлагает Dreamweaver, установить точки останова и запустить отладку. Давайте так и сделаем.
Чтобы установить точку останова, поставьте текстовый курсор на нужной строке программного кода (кода JavaScript, а не HTML) и нажмите клавишу <F7>. Вы также можете выбрать пункт Set/Remove Breakpoint в контекстном меню или нажать одноименную кнопку инструментария отладчика. Точка останова обозначается специальным маркером — небольшим красным кружком, стоящим на серой полосе с номерами строк напротив соответствующей строки кода.
Если вы случайно ошиблись и поставили точку останова не там, поставьте на строке, где стоит точка останова, текстовый курсор и снова нажмите клавишу <F7>, кнопку Set/Remove Breakpoint или пункт в контекстном меню. Вы также можете убрать одновременно все точки останова в коде, нажав кнопку Remove All Breakpoints или выбрав в контекстном меню одноименный пункт.
Расставив точки останова, можно запускать код на выполнение. Для этого нажмите кнопку Run инструментария отладчика или клавишу <F8>. Кнопка Stop Debugging позволит вам отключить отладчик и продолжить выполнение JavaScript-кода без него.
Когда Web-сценарий выполняется из-под отладчика, его быстродействие невелико, особенно на маломощных компьютерах. Это происходит потому, что отладчик перехватывает и проверяет каждое выражение, выполняемое интерпретатором. Поэтому, чтобы увидеть реальное быстродействие вашего кода, "прогоните" его впоследствии без отладчика.
Дойдя до ближайшей установленной вами точки останова, выполнение кода временно прервется. Маркер точки останова в этом случае примет такой вид . Чтобы запустить его дальше, нажмите кнопку Run инструментария отладчика или клавишу <F8>.
Вы также можете использовать кнопки Step Over, Step Into и Step Out инструментария отладчика для пошагового выполнения кода, выражение за выражением.
Нажатие кнопки Step Over или клавиши <F9> вызывает простой переход на следующее выражение.
Кнопка Step Into (нажатие клавиши <F10>) аналогична Step Over за одним исключением. Если следующее выражение программного кода является вызовом функции, то далее начнет выполняться первое выражение кода функции, т. е. вы как бы "зайдете" в функцию. Имейте в виду, что "зайти" таким образом можно только в функции, созданные самим программистом.
Кнопка Step Out (нажатие клавиши <F11>) действует только тогда, когда выполняется код какой-либо функции. При ее нажатии выполняется весь код функции, и очередная остановка происходит на выражении, следующим за вызовом этой функции, т. е. кнопка Step Out позволит вам "выйти" из функции.
Теперь обратимся к списку переменных, находящемуся в нижней части окна отладчика. Вы видите, что этот список, как и многие списки Dreamweaver, представляет собой таблицу, состоящую из двух колонок. В первой колонке - Variable Name — отображается имя переменной или свойства, а во второй - Value — его значение. Вы можете выделить любую строку в списке и выполнить над ней некоторые действия.
Над самим списком находятся две кнопки со знаками "плюс" и "минус". Их назначение уже должно быть вам понятно. Кнопка со знаком "плюс" добавляет новую строку в список, после чего вам останется ввести в добавленную строку имя нужной переменной или нужного свойства и нажать клавишу <Enter> . Кнопка со знаком "минус" позволит вам удалить выделенную в списке строку. Как видите, все очень удобно, за исключением того, что, как вы уже заметили, русские буквы опять отображаются некорректно.
Также вы можете изменить имя переменной (свойства) или его значение. Для этого выберите нужную строку в списке и щелкните мышью по значению в колонке Variable Name или Value. После этого введите новое имя или значение в появившееся в строке поле ввода и нажмите клавишу <Enter>.
Чтобы закончить отладку, либо закройте окно отладчика и окно Web-обозревателя, либо нажмите кнопку Stop Debugging. В первом случае выполнение всех сценариев будет прервано, а сам Web-обозреватель — выгружен, а во втором — выполнение продолжится без отладчика.
О недостатках Web-сценариев и их преодолении было написано в главе 12. Здесь же можно только кое-что добавить. А именно, опишем две альтернативные технологии, которые можно применять вместо сценариев для расширения функциональности Web-страниц.
Прежде всего, давайте вспомним недостатки Web-сценариев, написанных на интерпретируемых языках. Таких недостатков два, и оба они могут быть критичными во многих случаях, когда Web-дизайнеру понадобится расширить функциональность своих страниц.
1. Невысокое быстродействие интерпретируемого программного кода.
2. "Открытость", т. е. легкочитаемость, интерпретируемого кода.
Оба эти недостатка являются следствием самой природы языка JavaScript и никак не решаются. Единственное: их можно обойти, не создавая слишком сложных сценариев и не реализуя в них ноу-хау. И, если вам все же придется создавать сложные сценарии, содержащие какие-либо уникальные и, не дай бог, патентованные разработки, обратите внимание на альтернативные Web-сценариям технологии.
А таких технологий всего две. И обе они являются близкими родственниками, что бы ни говорили пламенные приверженцы каждой из них. И обе они найдут свои области применения.
Первая технология вам уже знакома — это элементы ActiveX, рассмотренные нами в главе 4, посвященной графическим изображениям и вообще внедренным элементам. Напомним, что это такое.
Элементы ActiveX были разработаны как общий стандарт компонентов для использования в различных приложениях, Web-страницах и в качестве расширений самой операционной системы Windows. Эта технология представляет собой дальнейшее развитие технологии COM (Component Object Model — объектная модель компонентов), позволяющей встраивать одни программы (так называемые СОМ-серверы) в другие (СОМ-клиенты или СОМ-контейнеры). Элемент ActiveX представляет собой библиотеку DLL, содержащую сервер СОМ; как всякий СОМ-сервер, он регистрируется в особом разделе Реестра Windows, чтобы его смогли найти клиенты.