Налагодження для 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", потрібно відзначити гілку редактор сценаріїв – веб-сценарії – веб-налагодження, як показано на малюнку.


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


Microsoft Visual Studio


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


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


Безкоштовна редакція 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: http://tredosoft.com/Multiple_IE. Установник сам розбереться з реєстром і додасть старі dll.


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


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


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


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


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


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


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


Після установки галочок і установки 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 відкрита не на весь екран):




У залежності від Вашого монітора, віконця 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>

*

*