Macromedia Dreamweaver MX

Отладка Web-сценариев

Но прежде, чем мы начнем говорить об отладке Web-сценариев, поговорим об ошибках и о том, как они выявляются.

Какие ошибки бывают в программах

Очень часто только что написанная программа содержит ошибки. Более то­го, если она имеет объем более десяти строк, будьте уверены — хоть одна ошибка там обязательно присутствует. (Уж не говоря о более сложных про­граммах...) Проистекает все это из пресловутой "ненадежности" людей. В самом деле, компьютеры при всех их недостатках никогда не ошибаются сами по себе. Все компьютерные ошибки всегда обусловлены либо неблаго­приятными внешними воздействиями (космическое излучение, скачки на­пряжения в сети, отсутствие дискеты в дисководе и т. п.), либо внутрен­ними (ненадежная электроника, опять же, ошибки в программах). Только люди ошибаются без всяких причин.

Ошибки в программах бывают двух видов:

□ Синтаксические ошибки — это неточности в написании самого про­граммного кода. В результате синтаксической ошибки интерпретатор или компилятор не может правильно расшифровать выражение. В этом слу­чае он выдает сообщение о синтаксической ошибке. Например, Internet Explorer огорошит нас таким сообщением — см. рис. 13.37.

□ Логические ошибки — это ошибки в логике работы программы. Про­граммный код выглядит абсолютно правильным, но работает неправиль­но. Такие ошибки выявить и исправить намного сложнее.

Обычно программист сразу же после написания программы обязательно ее проверит, "погоняет" сам, чтобы прячущиеся в ней ошибки "вылезли" нару­жу, проявились. Этот процесс и называется отладкой. За отладкой обычно следует исправление найденных ошибок и новая отладка. И так повторяется довольно долго, пока программист не будет уверен, что ошибок в его творе­нии больше нет.

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

Вообще-то все ошибки в достаточно сложной, многокомпонентной про­грамме выявить невозможно. Дело в том, что программа может устанавли­ваться на компьютерах самых разных конфигураций, и для того, чтобы быть уверенным, что программа действительно будет на всех них работать, разра­ботчик должен на всех них ее и проверить. Сами понимаете, что это физи­чески невозможно. Другое дело, что программист может пропустить какую - то ошибку, не исправить ее. Здесь можно говорить как о его невниматель­ности, так и о его ограниченности. С невнимательностью все понятно. А вот с ограниченностью...

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

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

Не стал исключением и Dreamweaver. Он позволяет вам проверить про­граммы, используемые в Web-страницах, а именно Web-сценарии. Если вы пишете сценарии сами, без отладчика вам будет трудно обойтись.

Какие же возможности предлагают нам современные программы-отлад­чики?

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

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

3. Просмотр значений переменных. Может пригодиться практически всегда.

Так, с отладчиками вообще мы разобрались. Обратимся теперь к конкрет­ному представителю этого славного семейства — встроенному отладчику Dreamweaver.

Встроенный отладчик Dreamweaver

Чтобы вызвать встроенный в Dreamweaver отладчик JavaScnpt-i<o/ia, нажми­те комбинацию клавиш <Alt>+<F12> или <Ctrl>+<Alt>+<F12>. Первая комбинация запускает отладку в первичном Web-обозревателе, а вторая — во вторичном. (О первичном и вторичном Web-обозревателях см. главу 2.) Также вы можете выбрать нужный пункт в подменю Debug in Browser меню File или меню кнопки Preview/Debug in Browser инструментария документа (см. рис. 2.31). После этого нажмите кнопку ОК в нескольких появившихся на экране окнах-предупреждениях, чтобы собственно запустить отладчик. И подождите некоторое время, пока все это загрузится и запустится.

Для того чтобы запустить отладчик Dreamweaver, вы должны иметь на своем компьютере установленную виртуальную машину Java фирмы Microsoft. Будьте внимательны: в составе Windows ХР эта виртуальная машина не поставляет­ся — вам самим придется загружать ее с сайта этой фирмы.

После загрузки и запуска отладчика Dreamweaver выведет небольшое преду­преждение с кнопкой ОК и флажком Don't show me this message again. Это предупреждение предлагает вам установить точки останова и запустить от­ладку. Закройте это окно, нажав ОК; вы можете перед этим включить фла­жок Don't show me this message again, если больше не хотите его видеть.

Само окно отладчика показано на рис. 13.38. Оно разделено на две части. В верхней части отображается выполняемый программный код, причем от­ладчик не разделяет HTML - и JavaScript-код, а отображает все вместе. В нижней части находится список переменных и их текущих значений, из­начально пустой. Вы можете изменять относительные размеры этих двух частей, перемещая мышью находящуюся между ними полоску разделителя. В самом верху окна находится инструментарий отладчика, с помощью кото­рой выполняются все доступные действия в этом окне.

Ф default. htm [ Break ] - JavaScript Debugger

1 <IDOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transit Ј 2 |<HTML>

" <HEAD>

<ТГП_Е>Иван И. Иванов</JTTLЈ>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; <SCRIPT 1 anguage= "JavaScript'' TYPE= "text/JavaScript'"

Function MM_di spl ayStatusMsg (msgStr) { //vl. O status=msgStr;

Variable Name

Рис. 13.38. Окно встроенного отладчика Dreamweaver

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

Теперь мы должны, как предлагает Dreamweaver, установить точки останова и запустить отладку. Давайте так и сделаем.

Чтобы установить точку останова, поставьте текстовый курсор на нужной строке программного кода (кода JavaScript, а не HTML) и нажмите клавишу
<F7>. Вы также можете выбрать пункт Set/Remove Breakpoint в контекст­ном меню или нажать одноименную кнопку инструментария отладчика (рис. 13.39, слева). Точка останова обозначается специальным маркером — небольшим красным кружком, стоящим на серой полосе с номерами строк напротив соответствующей строки кода — см. рис. 13.40.

О т

Рис. 13.39. Кнопки Set/Remove Breakpoint и Remove All Breakpoints

Инструментария отладчика

Рис. 13.40. Маркер точки останова

Если вы случайно ошиблись и поставили точку останова не там, поставьте на строке, где стоит точка останова, текстовый курсор и снова нажмите клавишу <F7>, кнопку Set/Remove Breakpoint или пункт в контекстном ме­ню. Вы также можете убрать одновременно все точки останова в коде, на­жав кнопку Remove All Breakpoints (рис. 13.39, справа) или выбрав в контек­стном меню одноименный пункт.

Расставив точки останова, можно запускать код на выполнение. Для этого нажмите кнопку Run инструментария отладчика (рис. 13.41, слева) или кла­вишу <F8>. Кнопка Stop Debugging (рис. 13.41, справа) позволит вам от­ключить отладчик и продолжить выполнение JavaScript-кода без него.

Рис. 13.41. Кнопки Run и Stop Debugging инструментария отладчика

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

Дойдя до ближайшей установленной вами точки останова, выполнение кода временно прервется. Маркер точки останова в этом случае примет такой вид — см. рис. 13.42. Чтобы запустить его дальше, нажмите кнопку Run ин­струментария отладчика или клавишу <F8>.

Рис. 13.42. Маркер точки останова, на которой остановилось выполнение кода

Вы также можете использовать кнопки Step Over, Step Into и Step Out ин­струментария отладчика для пошагового выполнения кода, выражение за выражением. Эти кнопки показаны на рис. 13.43.

Р F) (*>

Рис. 13.43. Слева направо: кнопки Step Over, Step Into и Step Out

Инструментария отладчика

Нажатие кнопки Step Over или клавиши <F9> вызывает простой переход на следующее выражение.

Кнопка Step Into (нажатие клавиши <F10>) аналогична Step Over за одним исключением. Если следующее выражение программного кода является вы­зовом функции, то далее начнет выполняться первое выражение кода функ­ции, т. е. вы как бы "зайдете" в функцию. Имейте в виду, что "зайти" таким образом можно только в функции, созданные самим программистом.

Кнопка Step Out (нажатие клавиши < F11 >) действует только тогда, когда выполняется код какой-либо функции. При ее нажатии выполняется весь код функции, и очередная остановка происходит на выражении, следующим за вызовом этой функции, т. е. кнопка Step Out позволит вам "выйти" из функции.

Теперь обратимся к списку переменных, находящемуся в нижней части ок­на отладчика. Вы видите, что этот список, как и многие списки Dream­weaver, представляет собой таблицу, состоящую из двух колонок. В первой колонке — Variable Name — отображается имя переменной или свойства, а во второй — Value — его значение. Вы можете выделить любую строку в списке и выполнить над ней некоторые действия.

Над самим списком находятся две кнопки со знаками "плюс" и "минус". Их назначение уже должно быть вам понятно. Кнопка со знаком "плюс" добав­ляет новую строку в список, после чего вам останется ввести в добавленную строку имя нужной переменной или нужного свойства и нажать клавишу <Enter> (рис. 13.44). Кнопка со знаком "минус" позволит вам удалить выде­ленную в списке строку. Как видите, все очень удобно, за исключением то­го, что, как вы уже заметили, русские буквы опять отображаются некор­ректно.

SHAPE \* MERGEFORMAT

|| Variable Na

Document. ММ relurnValue

Рис. 13.44. Две переменные и их значения в списке переменных отладчика

Также вы можете изменить имя переменной (свойства) или его значение. Для этого выберите нужную строку в списке и щелкните мышью по значе-

Нию в колонке Variable Name или Value. После этого введите новое имя или значение в появившееся в строке поле ввода и нажмите клавишу <Enter>.

Чтобы закончить отладку, либо закройте окно отладчика и окно Web - обозревателя, либо нажмите кнопку Stop Debugging. В первом случае вы­полнение всех сценариев будет прервано, а сам Web-обозреватель — выгру­жен, а во втором — выполнение продолжится без отладчика.