Налагодження для Internet Explorer (в Visual Studio), Різне, Інтернет-технології, статті

Введення


Існує багато інструментів для налагодження javascript. Ця стаття присвячена налагодженню на платформі Windows під Internet Explorer.


Є два основних відладчика:


Microsoft Script Editor поставляється разом з Microsoft Office. Є безкоштовна версія – це не те. Потрібна саме та, яка в постачанні Microsoft Office, причому вона не ставиться за замовчуванням. Для установки потрібно знайти і включити відповідний пункт в меню.


Microsoft Visual Studio – Середа для розробки продуктів на різних мовах. Вона також дозволяє налагоджувати javascript-сценарії, як, втім, і багато іншого.


На момент написання статті автору доводилося для налагодження редактор з Microsoft Office 2007 і Microsoft Visual Studio 2005. Істотних відмінностей в налагодженні, в общем-то, немає, але Visual Studio зручніше і надає більше можливостей.


Обидва цих редактора / отладчика налаштовуються схожим чином, але в статті описана робота переважно з Visual Studio. Втім, настройка MSE приблизно аналогічна, тому інструкції почасти можна й там.


Установка


Microsoft Script Editor


При установці Microsoft Office, в підменю “кошти Office”, потрібно відзначити гілку редактор сценаріїв – веб-сценарії – веб-налагодження, як показано на малюнку.

Установка MCE


Після цього, при стандартних шляхах, редактор / відладчик Microsoft Script Editor (MSE) буде встановлено в C: Program FilesCommon FilesMicrosoft SharedOFFICE12MSE7.EXE.


Microsoft Visual Studio


Visual Studio – велика інтегрована середа розробки, в ній велику кількість компонент, більшість яких для налагодження javascript взагалі не потрібно.


Якщо у Вас, скажімо, професійна версія Visual Studio, то при установці, щоб не засмічувати систему невикористовуваними компонентами, залишимо тільки одну галочку – навпаки web-development. В подальшому завжди можна буде поставити щось ще, якщо, наприклад, знадобиться написати програму на C #.

Установка Visual Studio


Безкоштовна редакція Visual Studio називається Visual Web Developer. Вона також дозволяє налагоджувати javascript, але не володіє багатьма можливостями професійної версії.


Internet Explorer версій до 7й включно.


Найпростіша ситуація з IE7. Цей браузер не поширюється окремо, а йде в комплекті оновлень Windows. Тому досить запустити windows update і вибрати потрібне оновлення. Альтернативний варіант – Набрати в google “ie7 install” і перейти по одній з посилань на першій сторінці.


Браузери до IE7 можна поставити як звичайні програми, але при цьому виникає маса всіляких проблем, від глюків з cookies, і до невірної обробки conditional comments. Проблеми виникають через інтеграції браузера з ОС. Різні версії браузера використовують один і той же реєстр, одні й ті ж dll-бібліотеки – звідси і конфлікти.


Тим не менше, більшість подібних проблем вирішується. Замість того, щоб шукати вирішення самому, можна встановити готовий пакет типу “все-IE-в-одному”, наприклад, “Multiple IE” від tredosoft: tredosoft.com/Multiple_IE. Установник сам розбереться з реєстром і додасть старі dll.


Проблеми налагодження після такої установки


Частина проблем з браузером Internet Explorer пов’язані не з самим браузером, а з компонентами ОС, які він використовує, такими як WinSock і Windows Scripting Host. На практиці це зазвичай проявляється так – Користувачі говорять про проблему, а відтворити її не вдається. І браузер, ніби, той же, і робиш все так само, але глюка немає.


Якщо проблему все ж необхідно поправити, то можна детально розпитати користувача про використовувану ОС, з точністю до збірки / сервіс-пака, і поставити максимально близьку ОС окремо в дуал (+)-бут або віртуальну машину.


Шанс, що ви сталкнетесь в такий необхідністю, досить малий. Автор особисто спостерігав подібне всього кілька разів. Але знати про цю залежності таки корисно.


Галочки для налагодження


Щоб викликати відладчик з Internet Explorer, потрібно прибрати дві галочки з властивостей, що забороняють налагодження. Тут і далі, буде описаний IE6, в 7ке все приблизно аналогічно.


Галочки знаходяться в меню “Властивості Оглядача” – вкладка “Додатково”.

Включення налагодження у властивостях Internet Explorer


Після установки галочок і установки Visual Studio / MCE потрібно перезапустити Internet Explorer, закривши всі вікна.


Способи запуску отладчика


Для Visual Studio / MSE загальні варіанти такі:


1. Перед завантаженням сторінки відзначити в IE “Вид – Отладчик сценаріїв – перервати на наступній інструкції”. Потім завантаження сторінки автоматом викличе відладчик на першому рядку javascript-коду, якщо вона є. Там же можна напряму вибрати “Отладчик сценаріїв – Відкрити”.


Буває, що пункт “Отладчик сценаріїв” не відображається, або він там є, але не працює. При правильному встановленні потрібного ПО, це лікується перезапуском IE.


2. У javascript-коді поставити в потрібне місце оператор debugger. Наприклад:



var i = 5


debugger


i++



Коли виконання дійде до рядка debugger – викличеться відладчик точно також, як в п.1. Цей спосіб, взагалі кажучи, входить в стандарт мови і працює з усіма отладчиками, включаючи firebug.


Виклик отладчика цим способом здійснюється через віконце з вибором:

Виклик отладчика


У цьому віконці можна вибрати між MSE / Visual Studio. Якщо відладчик вже запущений, то також можна вибрати, чи запускати новий екземпляр програми (New instance) або використовувати працюючий.


Чекбокс встановлює поточний вибір – вибором за замовчуванням, так що надалі при появі віконця достатньо буде просто натиснути enter.


3. У Visual Studio Pro є можливість підключатися до процесу: “Tools-> Attach to process”, і налагоджувати код самого додатка або, наприклад, запущені скрипти. В MSE це робиться через меню “Debug-> Processes”. При цьому відкривається список процесів, з них потрібно вибрати відповідний iexplore.exe і натиснути Attach.


Налагодження


Після підключення браузера до відладчику, в Visual Studio можна відкрити вікно Script Explorer (в MSE: Running Documents), вибрати потрібний javascript-файл, і поставити там breakpoint (и), і вони будуть працювати.


Якщо потрібний breakpoint вже пройдено на момент підключення – в браузері можна натиснути refresh. Виконання зупиниться на потрібному місці.


Вікна


Серед допоміжних вікон Visual Studio, для налагодження javascript корисні:



Віконця можна вмикати-вимикати з меню “Debug – Windows”, або через список, що випадає на панелі “Debug”.


Якщо Script Explorer раптом ніде немає, то його можна додати. Для цього на вільному місці панелі потрібно клікнути правою кнопкою, і вибрати Customize. У віконці, що з’явилося зліва в Categories вибрати Debug, а справа – знайти кнопку Script Explorer, і перетягнути її, але не всередині віконця, а поза ним – на панель Visual Studio.


Розташування та тип вікон можна змінювати різними способами, ось приклад типової конфігурації (Visual Studio відкрита не на весь екран):



Приклад типової конфігурації VS для javascript-налагодження


В залежності від Вашого монітора, віконця Locals / Watch буває зручно зробити плаваючими (floating), або перенести вниз екрану.


Вікно Immediate в цій конфігуранціі сховалося внизу (опція auto-hide, ставиться через правий клік по заголовку вікна), і викликається при натисканні на заголовку.


Гарячі клавіші


Працюють класичні hotkeys:


Виділені вираження / змінні можна додавати в Watch правою кнопкою миші.
Взагалі, можливостей дуже багато, і, саме головне, їх досить просто побачити самому.

Успішною налагодження!

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*