Налагодження сценаріїв за допомогою засобів розробника

Ця документація переміщена в архів і не підтримується.

До складу засобів розробника Internet Explorer 8 входить вбудований спрощений відладчик Microsoft JScript, який дозволяє розробникам встановлювати точки зупинки і крок за кроком виконувати код JScript на стороні клієнта, не виходячи з браузера. У цьому документі коротко описані функції високого рівня з відладчика JScript. Ознайомчу інформацію про інші можливості засобів розробника в Internet Explorer 8 см. В статті Знайомство із засобами розробника в Internet Explorer 8; повний довідник по командам інтерфейсу коштів розробника см. в статті Довідник по призначеному для користувача інтерфейсу коштів розробника.

Налагодження JScript - це найважливіший етап в розробці веб-додатків. Завдяки інтуїтивно зрозумілому спрощеним отладчику JScript Інструментарій розробника програмного забезпечення дозволяють істотно спростити весь процес налагодження JScript. Встановивши Internet Explorer 8, розробники можуть налагоджувати JScript на будь-якому сайті, завантаженому в Internet Explorer.

Щоб відкрити засоби розробника в Internet Explorer 8, натисніть клавішу F12 або клацніть кнопку "Засоби розробника" на панелі команд "Сервіс".

Примітка. Незважаючи на те що відладчик JScript можна використовувати для налагодження будь-якої підсистеми з реалізацією інтерфейсів IActiveScriptSite (аналогічно Microsoft Visual Basic Scripting Edition (VBScript)), підтримується тільки налагодження JScript.

початок налагодження

Мал. 1. Інтерфейс вкладки "Сценарій"

За допомогою засобів розробника на вкладці "Сценарій" почніть процес налагодження натисканням кнопки "Почати налагодження" або клавіші F5. При натисканні цієї кнопки ініціюються наступні події:

  • У діалоговому вікні "Для налагодження потрібне оновлення веб-сторінки" вам надається можливість оновити сторінку. Якщо натиснути кнопку "ОК", почнеться налагодження і оновиться сторінка; якщо натиснути кнопку "Скасувати", налагодження не почнеться і сторінка не оновиться.
  • Якщо вікно коштів розробника закріплено за примірником Internet Explorer 8, то відразу після початку налагодження це закріплення знімається. Після закінчення налагодження вікно знову можна закріпити за примірником Internet Explorer 8.

Щоб зупинити налагодження, натисніть кнопку "Зупинити налагодження" або поєднання клавіш SHIFT + F5.

Примітка. Всі сценарії на сторінці, розташовані як в окремих файлах, так і у вбудованих блоках, доступні в списку сценаріїв незалежно від того, розпочато налагодження чи ні. Перемикання між цими файлами можливо в будь-який час на вкладці режиму "Сценарій". Джерело обраного файлу відображається в основний області вмісту.

Установка точок зупину

З області основного вмісту, в якій відображається код сценарію, можна встановити точки зупину одним із таких способів:

  • Клацнути номер рядка, щоб вставити або видалити точку зупинки.
  • Клацнути правою кнопкою миші рядок коду і вибрати команду "Вставити точку зупину".
  • Помістити курсор на рядок коду і натиснути клавішу F9, щоб вставити або видалити точку зупинки.
Точки зупинки можна встановлювати незалежно від того, запущений відладчик чи ні. Як тільки точка зупинки встановлено, поруч з номером рядка коду з'являється значок точки зупину і код в цьому рядку виділяється.

Точка зупинки дозволяє призупинити виконання сценарію безпосередньо перед рядком, на якій встановлена ​​ця точка, при цьому в отладчике виділяється наступний рядок, яку потрібно виконати. Під час налагодження будь-яка помилка виконання призводить до того, що відладчик зупиняється в місці виникнення помилки. Щоб запобігти зупинці виконання при помилку, скасуйте вибір перемикача "Зупинка при помилку" або натисніть клавіші CTRL + SHIFT + E. Коли виконання призупинено отладчиком, браузер не реагує на призначений для користувача введення.

Мал. 2. Встановлення точок зупину і управління ними

На вкладці "Точки зупинки" в отладчике відображається список усіх доступних точок зупину. Тут можна подивитися розташування всіх точок зупину, а також ім'я файлу і номер рядка, на якій встановлена ​​точка зупинки. Щоб перейти до місця розташування точки зупину в вихідному коді, двічі клацніть точку зупину в списку. Щоб відключити точку зупину, не видаляючи її, зніміть прапорець поруч з точкою зупинки. Щоб видалити точку зупинки, клацніть її правою кнопкою і в контекстному меню виберіть команду "Видалити". Інформація про точках зупинки зберігається в Internet Explorer до тих пір, поки не будуть закриті Інструментарій розробника програмного забезпечення, навіть якщо ви переходите зі сторінки поточного веб-сайту.

Примітка. У багатьох сценаріях точка зупинки може стати недійсною. Недійсна точка зупинки відключається, і над значком точки зупину з'являється значок попередження. Точка зупинки стає недійсною, якщо ви йдете з веб-сайту, на якому вона встановлена. Вона може стати недійсною, якщо встановлюється в неправильному місці в режимі, відмінному від режиму відладки, або процес налагодження починається там, де відладчик не знаходить відповідний код. Вона може також стати недійсною, якщо оновлюється сторінка, на якій вона встановлена, і при цьому змінюється вихідний код.

Коли встановлена ​​точка зупинки, виконання припиняється в цій точці щоразу, коли вона зустрічається. Якщо потрібно призупинити виконання в точці зупинки тільки при дотриманні певної умови, задайте умова для цієї точки зупину. Щоб задати умову точки зупину, зробіть наступне:

  1. Клацніть правою кнопкою миші точку зупину в основний області вмісту або в області "Точки зупинки". З'явиться контекстне меню.
  2. Виберіть команду "Умова.". Відкриється діалогове вікно.
  3. У діалоговому вікні "Умовна точка зупинки" введіть умову і натисніть кнопку "ОК".
В результаті відладчик припинить виконання в цій точці зупинки тільки тоді, коли ця умова буде істинним.

управління виконанням

За допомогою точок зупину призупиняється виконання сценарію, щоб можна було перевірити стан кодів в цій точці. Коли виконання зупинено в точці зупинки, ви можете перевірити хід виконання за допомогою будь-якої з наступних кнопок:

Продовжити виконання сценарію без припинення, поки не зустрінеться інша точка зупинки або помилка сценарію. Призначена клавіша: F5.

Призупинити виконання безпосередньо перед виконанням наступного оператора сценарію. Натисніть кнопку або натисніть клавіші CTRL + SHIFT + B для активації цієї команди, потім виконайте необхідні дії з налагодження.

  • Зупинка при помилку

    Призупинити виконання в точці, де сталася помилка. Ця команда активна за замовчуванням. Якщо ви не хочете, щоб виконання припинялося в точках виникнення помилок, натисніть цю кнопку, щоб відключити команду; проте в будь-якому випадку для кожної виникаючої помилки на консолі буде з'являтися повідомлення про помилку. Швидкий доступ для включення / відключення команди: CTRL + SHIFT + E.

    Виконати наступний рядок сценарію і призупинити виконання, навіть якщо наступний рядок знаходиться всередині нового методу. Призначена клавіша: F11.

    Продовжити виконання до наступного рядка сценарію в поточному методі, а потім призупинити виконання. Корисно для обходу викликів методів. Призначена клавіша: F10.

    Продовжити виконання сценарію до наступного рядка в методі, викликаному поточним методом. Корисно для виходу з циклів і викликів методів. Швидкий доступ: SHIFT + F11.

    Перевірка значень змінних

    В області "Локальні" і області "Дивитися" можна подивитися значення будь-якої змінної. Для перевірки значень змінних виконайте наступні дії:

    • Запустіть відладчик натисканням кнопки "Почати налагодження".
    • Встановіть точки зупину на шляху виконання.
    • Виконайте сценарії.
    Під час виконання відладчик призупиниться в першій виявленої точці зупинки. Як тільки виконання призупинено, можна перевірити і змінити змінні в області "Локальні" і області "Дивитися".

    В області "Локальні" відладчика відображаються імена, значення і типи всіх змінних, доступних в поточній області видимості сценарію. Якщо змінна знаходиться поза області видимості, вона недоступна і не відображається в області "Локальні". Спостерігати за такими змінними та об'єктами, що знаходяться "поза області видимості", можна в будь-який час в області "Дивитися".

    Можна переглядати змінні з різних областей видимості, додаючи їх в область "Дивитися". Додати змінні в область "Дивитися" можна декількома способами.

    1. В основній області вмісту виберіть текст сценарію, потім клацніть правою кнопкою миші, щоб активувати контекстне меню, і виберіть команду "Додати контрольні значення". Обраний текст буде додано до списку контрольних значень.
    2. В області "Локальні" клацніть правою кнопкою миші змінну або об'єкт, а потім виберіть команду "Додати контрольні значення".
    3. В області "Дивитися" клацніть "Клацніть для додавання", а потім введіть ім'я змінної, яку збираєтеся відслідковувати. Текст "Клацніть для додавання" можна знайти внизу списку контрольних значень як останній елемент списку в області "Дивитися".

    Мал. 3. Перевірка змінних в області "Локальні"

    При кожному виконанні рядка коду відладчик оновлює значення змінних в областях "Локальні" і "Дивитися". Оновлені значення позначаються текстом червоного кольору. Щоб змінити значення змінної в області "Локальні" або "Дивитися", двічі клацніть значення, введіть нове значення та натисніть клавішу Enter. Можна також натиснути правою кнопкою миші об'єкт і вибрати команду "Змінити значення", щоб почати зміна. По завершенні натисніть клавішу ENTER для фіксації або ESC для скасування зміни.

    Перевірка стека викликів

    Використання консолі для виконання операторів коду

    В області "Консоль" відладчика надається консоль для оперативного виконання операторів сценарію. Введіть будь-якої допустимий оператор або ім'я змінної і натисніть клавішу ENTER (або клацніть "Запустити сценарій"), щоб виконати цей оператор в контексті поточної сторінки і в тому місці, де призупинено виконання.

    Для завдання значень змінних використовуйте стандартний синтаксис призначення:

    При натисканні кнопки "Багаторядковий режим" вікно введення збільшується, дозволяючи ввести кілька рядків. Змінюється також режим роботи клавіші ВВЕДЕННЯ, так що при натисканні цієї кнопки не виконується сценарій, а створюється новий рядок. Тут можна ввести кілька рядків коду, а потім виконати їх натисканням кнопки "Запустити сценарій". У вікні введення, розмір якого можна змінювати, пропонуються додаткові елементи управління в контекстному меню.

    Область "Консоль" можна використовувати в будь-який час, навіть якщо відладчик не запущено. Коли виконання зупиняється в точці зупинки, введені в цій області команди виконуються в області видимості точки зупину; коли виконання не призупинено, команди виконуються в глобальній області.

    Використання консолі для ведення журналу попереджень і повідомлень про помилки

    Всі помилки сценарію в конкретному екземплярі Internet Explorer реєструються в області "Консоль", коли відкрито вікно "Засоби розробника". Щоб перейти до місця помилки, клацніть інформацію про вихідний код, зазначену для помилки.

    Для реєстрації повідомлень в області "Консоль" можна також використовувати API console.log. Замість того щоб використовувати виклик window.alert () і створювати незліченні діалоги, викличте console.log для виведення рядків в область "Консоль". Щоб відрізняти повідомлення, використовуйте різні API console.log, наприклад:

    Ці команди консолі можна викликати зі списком аргументів, які об'єднуються для створення вихідний рядки. У форматі аргументів можна використовувати підстановочні шаблони в стилі printf. Наприклад, для виклику console.log можна використовувати один з наступних способів:

    • console.log ( "Змінна x =" + x + ", а змінна y =" + y)
    • console.log ( "Змінна x =", x, ", а змінна y =", y)
    • console.log ( "Змінна x =., а змінна y =.", x, y)
    Однак в команді console.assert як перший аргумент необхідно вираз для оцінки істинності чи хибності. Якщо вираз оцінюється як істинне, то повідомлення перевірочного твердження не виводиться на консоль; в іншому випадку повідомлення виводиться на консоль. приклад:

    Повідомлення консолі можна фільтрувати, щоб показати або приховати їх в області консолі. Щоб вибрати повідомлення, які потрібно показати або приховати в області "Консоль", задайте "Фільтр" наступним чином: клацніть правою кнопкою миші область "Консоль" і перемістіть курсор на елемент "Фільтр". З'являється список доступних фільтрів, в якому відзначено активний фільтр.

    Крім цього об'єкт консолі можна розширити, щоб додати нові функціональні можливості для потреб розробки. Наприклад, можна видозмінити метод для виведення повідомлень налагодження на консоль. Для додавання команди console.debug можна додати в код JScript наступні фрагменти коду:

    У попередньому прикладі приймаються два аргументи і просто виводяться в область "Консоль" з мінімальним форматуванням. Після визначення команди console.debug можна видозмінити аргументи функції і режим роботи так, як вам потрібно. Таким чином, об'єкт консолі можна використовувати для додавання будь-якої кількості нових команд, які необхідні.

    Примітка. Оскільки в новій команді ви використовуєте існуючі команди консолі, "Фільтр" як і раніше можна застосувати. Наприклад, в команді console.debug з попереднього прикладу використовується команда console.warn для виведення повідомлень в область "Консоль". Якщо зняти прапорець "Попередження консолі" в списку "Фільтр", ніякі повідомлення з команди console.warn не з'являться в області "Консоль".

    • Щоб очистити всі повідомлення console.log, використовуйте функцію console.clear () в коді або в командному рядку області "Консоль". Функція console.clear () не видаляти ні повідомлення про помилки сценарію, ні коди, введені в командному рядку області "Консоль".
    • Щоб повністю очистити область "Консоль", клацніть правою кнопкою миші в області "Консоль" і виберіть команду "Очистити консоль". При цьому видаляються всі повідомлення з області "Консоль".

    Схожі статті