Помилка веб-сторінки виконати налагодження. Помилки сценарію в Internet Explorer. Причини та методи усунення. Профілювання SQL запитів Виконати налагодження веб-сторінки

Під час роботи в Інтернеті браузер Internet Explorer може повідомити, що сторінка містить помилки і може відображатися неправильно. Розглянемо кілька способів виправлення цієї проблеми.

Інструкція

Якщо немає видимих ​​труднощів у роботі браузера крім помилки, що періодично з'являється, можна спробувати відключити налагодження скриптів, щоб повідомлення більше не з'являлося (якщо помилка з'являється не на одному, а відразу на декількох сайтах, перейдіть до наступного кроку). У меню «Сервіс» відкрийте пункт «Властивості браузера», виберіть вкладку «Додатково» та позначте прапорцем «Заборонити налагодження сценаріїв». Якщо вам потрібно вимкнути сповіщення про всі помилки, зніміть прапорець для пункту «Показувати сповіщення про кожну помилку сценарію».

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

Можливо, браузер Internet Explorer під час перегляду сторінок не блокує активні сценарії, Java та ActiveX, які визначають відображення відомостей на сторінці. Щоб усунути проблему, необхідно скинути параметри безпеки браузера. Для цього в меню "Сервіс" виберіть пункт "Властивості браузера" і перейдіть на вкладку "Безпека". Натисніть кнопку "За замовчуванням", а потім "ОК". Якщо після запуску сторінки, на якій виникла помилка, проблема залишається, спробуйте наступний спосіб.

Як відомо, браузер зберігає тимчасові файли та копії сторінок в окремій папці, для подальшого звернення до них. Якщо розміри папки стають занадто великими, можуть виникнути помилки під час відображення деяких сторінок. Проблему можна вирішити періодично очищаючи папку з тимчасовими файлами. Для цього відкрийте діалогове вікно «Властивості браузера» з меню «Сервіс». На вкладці «Загальні» у групі «Історія» натисніть кнопку «Видалити». Встановіть прапорці для пунктів «Тимчасові Інтернет-файли», «Куки-файли», «Журнал», «Дані веб-форм» і натисніть «OK».

Є, звичайно, й інші – про них я обов'язково згадаю.

Firebug для Firefox

Не знаю точно, чи є FireBugпрабатьком інших засобів для розробників, але він безумовно найпопулярніший, зручний і функціональний на сьогоднішній день в.

Firebug – це додаток для Firefox, а значить його треба завантажити з сайту Firefox add-ons та встановити.

Для того, щоб викликати фаєрбаг, достатньо натиснути F12.

Можливості цього доповнення:

• Інспектування та редагування HTML, що динамічно змінюється;
• Редагування CSS на льоту;
• Налагодження JavaScript, командна строкадля виконання скриптів;
• Моніторинг мережевих запитів - можна побачити розміри та час завантаження файлів та скриптів, заголовки запитів;
• Аналізатор DOM.

Можна довго розповідати про ці можливості в деталях, але я думаю, що вони відомі всім нашим читачам, а якщо ні - Детальна інформаціяє на домашній сторінці Файєрбага або те саме в перекладі Іллі Кантора.

Окрім самого firebug’a вам може стати в нагоді корисна примочкадо нього - FireCookie, за допомогою якої (сюрприз:-) можна переглядати та змінювати куки.

WEB Developer Toolbar для Firefox

Ще один корисний додаток до Огнелісу. Виглядає воно так:

Розберемо за пунктами.

Disable

Дозволяє вимкнути JavaScript, заборонити використання кешу, що дуже корисно при розробці (дозволяє бути впевненим, що сторінка завантажилася разом із останніми оновленнями), скасувати кольори, що використовуються на сторінці та замінити їх стандартними, заборонити відправлення в заголовку реферера (сторінка, з якої був перехід).

Cookies

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

CSS

Це меню зберігає найкрутішу фічу Developer Toolbar'a - редагування CSS на льоту. Крім цього, є можливість переглядати css, забороняти і так далі, тощо. На мій погляд, тут дуже корисна наявність швидких клавіш (CTRL+SHIFT+C, наприклад, дозволяє відразу перейти до перегляду стилів сторінки)

Forms

Все для роботи з формами: показувати паролі, показувати інформацію про форми, конвертувати методи форм (GET »POST і навпаки) та багато іншого. Корисна функція «Populate Form Fields» для автоматичного заповнення полів форми (наприклад, при тестуванні сайту, коли функція запам'ятовування паролів вимкнена. В іншому не бачу в цьому пункті нічого корисного.

Images

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

Information

У цьому меню багато опцій. Можлива корисна функція відображення атрибутів class та id на сторінці. Крім цього, цікавий пункт «View Color Information» - щоб швидко отримати інформацію про кольори, які використовуються на сторінці. "View document size" - перегляд розміру сторінки. "View Response Headers" - переглянути заголовки сторінки.

Miscellaneous

Найчастіше використовується функція - очищення кешу. Крім цього тут доступні функції "Page ruler" - лінійка, "Page Magnifier" - лупа і "Line guides" - кілька ліній, які можуть бути корисні щоб підрівняти шаблон.

Outline

Виділення різних елементів сторінки - таблиць, заголовків, посилань, кадрів, блоків. Resize дозволяє змінювати розмір вікна браузера під стандартні розширення екранів. Tools тут зберігаються фічі для валідації сторінок. Як локальних, і зовнішніх. Зручний та швидкий доступдо валідації HTML, CSS, та іншого. Для валідації HTML можна використовувати CTRL+SHIFT+H.

View Source

Перегляд вихідного коду. Можливість перегляду в зовнішній програмі, перегляд згенерованого коду.

Те, що знаходиться в правому кутку, мені подобається найбільше. Це швидкий валідатор HTML, CSS та індикатор помилок JavaScript. Якщо проблем немає - значок зелений, а якщо є проблеми - червоний.

Internet Explorer Developer Toolbar

Починаючи з 8.0 debug помилок вбудований вже у цей браузер. Викликається він легко по клавіші F12. Щоправда, він убогий як програма 90 років.

Але є куди крутіший інструмент для цього браузера, так званий Internet Explorer Developer Toolbar можна завантажити за посиланням.

На вигляд цей тулбар, звичайно, схожий на firebug, але, на жаль, до нього ще не доріс. Хоча, з іншого боку, в ньому є деякі можливості, яких немає у фаєрбагу. Я б назвав Internet Explorer Developer Toolbar якимось гібридом Firebug'a та FireFox WEB Developer Toolbar'a.

Як і в firebug тут є можливість перевіряти елемент простим кліком. Але, якщо ми відразу можемо побачити padding'и і margin'и, то тут такої можливості немає.

Крім того, Internet Explorer Developer Toolbar не оновлює дерево елементів динамічно, як це робить Firebug. Тобто якщо ми змінимо щось на сторінці засобами js, за допомогою цього тулбару ми нічого не побачимо.

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

Найсмачніше тут є вбудований color picker, який дозволяє отримати будь-який колір зі сторінки за допомогою піпетки. (Для ff є окремий плагін ColorZilla).

Debug DebugBar для Internet Explorer

DebugBar для Internet Explorer можна завантажити за вказаним посиланням.

За своїм цікавим розширенням. Встановлюється як додаткова панель до браузера:

Є вбудований навіщось пошуковик, піпетка, можливість змінювати розмір вікна і, знову ж таки, навіщось можливість відсилати сторінку другові на мило. Хоча, можливо це й корисно. Але скористатися цією можливістю мені не вдалося.

Крім цього є інспектор:

Спосіб іспектування кліком або наведенням розробників не влаштував: вони вигадали цікавішу штуку. У DebugBar'e треба перетягнути приціл на потрібний елемент, щоб побачити його у дереві. Можливості редагувати CSS немає. Натомість є валідатор та вбудована консоль js.

А якщо покопатися в налаштуваннях можна знайти і таке:

І смішно та сумно.

Відомо, що у восьмий експлорер буде вбудований Developer Toolbar. Він буде схожим на той, який описувався в третьому пункті, але сподіваємося, що буде краще.

Debug DragonFly для Opera

DragonFly убудований в Оперу, починаючи з версії 9.5, тому встановлювати не треба. Щоб активувати Драгонфлай переходимо в Інструменти → Додатково → Засоби для розробників. А якщо англійською, то Tools → Advanced → Developer Tools.

Відразу попереджу, що DragonFly знаходиться в стадії Alpha2, цим пояснюються багато його глюків.

Можливості списком:

• DOM інспектор;
• Інспектування кліком (знову-таки, ми побачимо відступів, як у FireFox);
• Редагування;
• Швидкий доступ до консолі помилок.

DF - щось на зразок окремої сторінки у кадрі. Якщо ви його відкрили, воно буде відкрите для всіх вкладок (на відміну від firebug'a). Тому перед інспектуванням елемента треба вибрати зі списку сторінку, яку хочемо переглянути.

На жаль тут, як і в Internet Explorer Dav Toolbar, не відображаються елементи, що динамічно створюються. І взагалі, коли ми перевіряємо сторінку, ніякий JavaScript не запускається: посилання та кнопки не натискаються. Сподіватимемося, що коли DragonFly підійде до релізу, ми побачимо всі ці можливості.

Debug WEB Inspector у Safari

Відразу скажу, що про браузер Safariінформацію свиснув, тому за адекватність матеріалу, як кажуть, не відповідаю.

Для того, щоб увімкнути в меню Сафарі пункт «Розробка», необхідно в налаштуваннях (закладка «Додатково») увімкнути відповідний пункт:

У меню «Розробка» нам доступні такі функції:

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

За промовчанням інспектор відкривається в режимі перегляду HTML. Але його можна переключити у режим перегляду DOM. Для цього на верхній плашці є перемикач. При наведенні на елемент інспектора, він буде підсвічений на самій сторінці. Побачити відступи, змінити розмітку або CSS на льоту або побачити динамічні зміни в DOMe на льоту, як у FireBug не можна. Зате погодьтеся, виглядає дуже мило.

Якщо є бажання працювати з інспектором у вікні браузера, можна натиснути кнопку в нижньому лівому кутку.

Ще в сафарі доступна така функція, як «Шкала часу мережі» (кнопка «Network» в інспекторі):

Наочно можна побачити, коли і як довго вантажаться файли. Також можна переглянути заголовки запитів, але сам вміст переглянути, на жаль, не можна.

Debug для розробників у Google Chrome

Кульгавий з'явився на світ у просунутому вигляді, і в нього відразу є, нехай поки що криві, але все ж таки кошти для розробників.

• DOM Inspector;
• Відладчик javascript;
• Консоль JavaScript.

Для того, щоб проінспектувати якийсь елемент, на нього треба натиснути правою кнопкою і в контекстному менювибрати «Перегляд коду елемента»:

Функціонал той самий, що й у Сафарі: елементи підсвічуються при наведенні, але не доступні редагування CSS та HTML, не відстежуються зміни DOM. Ось тільки, кнопка в нижньому лівому кутку, яка повинна прикріплювати інспектора до вікна браузера не працює.

В закладці «Resources» ми можемо побачити таке:

Нелегко відрізняється від шкали в сафарі. Напівпрозорим на цій схемі зображено відносні розміри файлів, а повним кольором - час завантаження. Так чи інакше очевидно, що ця частина Хрома ще не дороблена.

У цій статті я розглянув найвідоміші розширення та вбудовані засоби для браузерів.

Є й інші, наприклад:

• Internet Explorer WEB Development Helper – хороший помічник для ASP.NET розробників (Internet Explorer);
• WEB Developer Toolbar – тулбар для Internet Explorer та FireFox. Є кілька корисних функцій;
• WEB Accessibility Toolbar – тулбар для Internet Explorer. Нічого цікавого.

Якщо є доповнення, про які я не згадав, а варто було б, або є функції згаданих розширень, які я прогав, пишіть.

Використовуйте на здоров'я!

Написати HTML – здорово, але як зрозуміти, де помилка, коли щось не працює? У цій статті описано кілька інструментів, які допомагають шукати та виправляти помилки в HTML.

Налагодження - це не страшно

Під час написання якогось коду, зазвичай все йде добре, поки не з'являється той момент, коли ви робите помилку. Отже, ваш код не працює або працює не так, як ви задумували. Якщо ви спробуєте скомпілювати непрацюючу програму на мові Rust, компілятор вкаже на помилку:

В даному випадку, повідомлення про помилку зрозуміти просто - "unterminated double quote string". Якщо ви уважно подивіться на println!(Hello, world!"); , то помітите, що тут немає подвійна лапка. Зрозуміло, повідомлення про помилки можуть ставати набагато складнішими для розуміння у міру зростання вашого коду, і навіть найпростіші випадки можуть здатися лякаючими для тих, хто нічого не знає про Rust.

Але не бійтеся налагодження! Щоб комфортно писати та налагоджувати будь-який код, потрібно розуміти мову та її інструменти.

HTML та налагодження

HTML не так складний до розуміння, як Rust. HTML не компілюється в будь-яку іншу форму перед тим, як браузер проаналізує це і покаже результат (він інтерпретується, а не компілюється). Синтаксис HTML елементівнабагато зрозуміліше, ніж у "справжніх мов програмування", таких як Rust, JavaScript, або Python. Спосіб, яким браузери читають HTML толерантний, ніж у мов програмування, що інтерпретують свій код суворіше. Це водночас і погано, і добре.

Толерантний код

То що означає толерантний? Загалом, коли ви напортачили в коді, є два типи помилок, з якими ви зіткнетеся:

• Синтаксичні помилки (Syntax errors): Це помилки у правильності написання, як це було вище, у прикладі з Rust Такі зазвичай легко виправляти, тією мірою, як ви знайомі з синтаксисом мови і знаєте, що означають повідомлення про помилки.
• Логічні помилки (Logic errors): Це помилки, що з'являються в тому випадку, якщо синтаксис коректний, але код не виконує свого призначення, тобто програма виконується неправильно. Такі виправляти складніше, ніж синтаксичні, оскільки не виводиться повідомлення, що вказують місце, де ви помилилися.

HTML не страждає від синтаксичних помилок, тому що браузер читає код толерантно, в тому сенсі, що сторінки можуть відображатися навіть якщо синтаксичні помилки є. Браузери мають вбудовані правила інтерпретації невірно написаної розмітки, і ви можете запустити що-небудь, навіть якщо ви мали на увазі інше. Це може стати справжньою проблемою!

На замітку: HTML читається толерантно, тому що коли веб тільки з'явився, було вирішено дозволити людям публікувати контент навіть за умови некоректностей у коді, так як це значно важливіше, ніж впевненість у абсолютно вірному синтаксисі. Веб не був би так популярний, якби ставився до новачків суворо.

Активне навчання: Знайомство з толерантним кодом

Час вивчити природу толерантного коду HTML.

Валідація HTML

З прикладу вище ясно, що варто перевіряти валідність HTML. У простому прикладі зверху можна просто переглянути весь код і знайти помилки, але що робити з величезними, складними сторінками?

Найкраще перевірити сторінку у сервісі валідації розмітки. Його створив та підтримує W3C – організація, яка займається специфікаціями HTML, CSS та інших веб-технологій. Сервіс перевірить ваш HTML і складе звіт про помилки в ньому.

HTML можна перевірити за адресою, завантаживши файл або просто скопіювавши на сторінку.

Активне навчання: Валідуємо HTML-документ

1. Відкрийте сервіс валідації розмітки у браузері.
2. Перейдіть до режиму Validate by Direct Input.
3. Скопіюйте весь код документа (не лише body) і вставте його в місце для введення.
4. Натисніть на Check (перевірити).

Ви побачите список помилок та іншу інформацію.

Робота з повідомленнями про помилки

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

• "End tag li implied, але вони були відкриті елементи" (2 instances): Немає явного закриває тега, хоча браузер здогадується, де він повинен бути. Повідомлення вказує на рядок після того, на якому очікувався тег, що закриває, але ви знайдете потрібне місце.
• "Unclosed element strong ": Це дуже проста помилка- Елемент) вказує на те, що його зміст має велике значення, серйозність або терміновість. Браузери зазвичай відображають вміст жирним шрифтом."> не закритий, і повідомлення вказує прямо на тег, що відкриває.
• "End tag strong violates nesting rules": Елемент неправильно вкладений - на цьому рівні немає парного тега, що відкриває.
• "End of file reached when inside an attribute value. Ignoring tag": Загадкове повідомлення. Справа в тому, що десь (швидше за все, наприкінці документа) неправильно прописано властивість елемента, і кінець файлу опинився всередині цієї властивості. У браузері не видно посилання - швидше за все, проблема поруч із нею.
• "Файл закінчився, але деякі елементи не закриті". Повідомлення вказує на кінець файлу, в даному випадку не закрито елемент example: link to Mozilla homepage ↩

↩ ↩

Досить часто користувачі можуть спостерігати ситуацію, коли у браузері (IE) з'являється повідомлення про помилку сценарію. Якщо ситуація має одиничний характер, то не варто турбуватися, але коли подібні помилки стають регулярними, то варто задуматися про характер цієї проблеми.

Помилка сценарію в Internet Explorer зазвичай викликається неправильною обробкою браузером коду HTML-сторінки, наявністю тимчасових інтернет-файлів, параметрами облікового запису, а також багатьма іншими причинами, про які і піде мовау цьому матеріалі. Також буде розглянуто методи вирішення цієї проблеми.

Перш ніж приступити до загальноприйнятих методів діагностики проблем з Internet Explorer, які викликають помилки сценарію, необхідно переконатися, що помилка виникає не тільки на одному конкретному сайті, а відразу на декількох веб-сторінках. Також потрібно перевірити веб-сторінку, на якій виникла ця проблема під іншою обліковим записом, на іншому браузері та на іншому комп'ютері. Це дозволить звузити коло пошуку причини виникнення помилки та виключити чи підтвердити гіпотезу про те, що повідомлення з'являються як наслідок наявності на ПК деяких файлів чи налаштувань.

Блокування Internet Explorer активних сценаріїв, ActiveX та Java

Активні сценарії, елементи ActiveX та Java впливають на спосіб формування та відображення інформації на сайті та можуть бути реальною причиною раніше описаної проблеми, якщо вони заблоковані на ПК користувача. Для того, щоб переконатися, що помилки сценарію виникають саме з цієї причини, необхідно просто виконати скидання параметрів безпеки браузера. Щоб це здійснити дотримуйтесь наступних рекомендацій.

• Відкрийте Internet Explorer 11
• Сервіс

• У вікні перейдіть на вкладку Безпека
• Далі натисніть кнопку За замовчуванням, а потім кнопку ОК

Тимчасові файли Internet Explorer

Щоразу при відкритті будь-якої веб-сторінки, браузер Internet Explorer зберігає на ПК локальну копію цієї інтернет-сторінки в так звані часові файли. Якщо таких файлів стає занадто багато і розмір папки, що містить їх досягає декількох гігабайт, можуть виникнути проблеми з відображенням веб-сторінки, а саме з'явиться повідомлення про помилку сценарію. Регулярне очищення папки з тимчасовими файлами може допомогти усунути цю проблему.
Щоб видалити тимчасові інтернет-файли, виконайте таку послідовність дій.

• Відкрийте Internet Explorer 11
• Сервіс
• У вікні перейдіть на вкладку Загальні
• В розділі Журнал браузеранатисніть кнопку Видалити…

• У вікні Видалення історії оглядупоставте прапорці біля пунктів Тимчасові файли Інтернету та веб-сайтів, Файли cookieта дані веб-сайтів, Журнал
• Натисніть кнопку видалити

Робота антивірусного програмного забезпечення

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

Неправильне оброблення коду HTML-сторінки

Виявляється, як правило, на одному певному сайті і говорить про те, що код сторінки повністю не адаптований для роботи з Internet Explorer. В цьому випадку, найкраще відключити налагодження скриптів у браузері. Для цього виконайте наведені нижче дії.

• Відкрийте Internet Explorer 11
• У верхньому куті браузера (праворуч) натисніть іконку Сервісу вигляді шестірні (або комбінацію клавіш Alt+X). Потім у меню виберіть пункт
• У вікні перейдіть на вкладку Додатково
• Далі зніміть прапорець з пункту Показувати сповіщення про кожну помилку сценаріюта натисніть кнопку ОК.

Це перелік найбільш частих причин, які викликають помилки сценарію в Internet Explorer, тому якщо Вам набридли подібні повідомлення, приділіть трохи уваги та вирішите проблему раз і назавжди.

на Наразііснує велика кількість різних браузерів, що в тій чи іншій мірі підтримують існуючі стандарти HTML. Особисто я віддаю перевагу браузеру від корпорації Mozilla. Цей браузер має довгу історію (він написаний на основі знаменитого браузера Netscape Navigator). Також цей браузер мені подобається тим, що він підтримує систему плагінів - додатків, що окремо розповсюджуються, при підключенні яких можна змінити функціональність і виконати налаштування під свої потреби. І, нарешті, цей браузер вільно розповсюджується з відкритими вихідними кодами, що також важливо. Тому я і вирішив описати можливості, які даний браузер надає не тільки користувачеві, а й розробнику Web сторінок, наскільки легким та зручним може бути процес налагодження написаних продуктів.

Mozilla Firefoxє одним з найпопулярніших браузерів серед розробників та web-developers. Він привертає до себе їхню увагу через ті можливості, які цей браузер надає для налагодження створених проектів, виправлення помилок, покращень. У стандартне постачання браузера включається java console (або «консоль помилок»). Ця утиліта дозволяє виконувати налагодження вбудованих сценаріїв java-script. Але, набагато більшу функціональність браузеру надають сторонні плагіни, які можна завантажити та встановити з офіційного сайту Mozilla Foundation. Зараз я хочу розглянути два з цих плагінів - це Web Developer та Firebug. Обидва з цих доповнень можуть бути завантажені за перерахованими вище посиланнями з офіційного сайту доповнень. Після їх встановлення та перезапуску браузера перед розробником відкриваються широкі можливості, які я опишу нижче, по черзі для кожного з плагінів.

Firebug plugin

Як сказано на офіційній сторінці: «Firebug інтегрується з браузером Firefox, щоб чудово збагатити інструментарій розробника. Ви зможете редагувати, налагоджувати та досліджувати CSS, HTML та Javascript «наживо», на будь-якій веб-сторінці.» І це справді так. Розглянемо деякі з функцій даного плагіна, а саме:

• Перегляд та редакція HTML.
• Побудова CSS.
• Моніторинг мережевих запитів
• Налагодження JavaScript
• Дослідження JavaScript
• Логування для JavaScript

Це далеко не повний перелік усіх його можливостей. Так проект є відкритим (opensource), будь-хто може змінювати і доповнювати функціональність.

Для роботи з плагіном необхідно натиснути клавішу F12 (Ctrl-F12 для роботи з ним в окремому вікні). Після успішного запуску отримаємо таке - рисунок 1а,1б.

Малюнок 1а. Початкове вікно плагін firebug.

Малюнок 1б. Початкове вікно плагін firebug.

Далі починається власне робота із плагіном. Скажімо, нам необхідно знайти той чи інший об'єкт у HTML-коді, або визначити, як саме реалізується з допомогою CSSпоточний фрагент. Для цього просто необхідно мишкою вибрати потрібні опції в меню вікна плагіна. У наведеному нижче прикладі - це HTML в режимі Inspect. Тепер, перейшовши на сторінку документа, під курсором миші ми помітимо прямокутну область, що ілюструє тут ділянку, з якою ведеться робота. У вікні плагіна ми побачимо ті параметри HTML та CSS, які використовуються. Також, натиснувши на кожен з них, можна проводити зміни та відстежувати їх у динаміці. Описані дії проілюстровані малюнки 2,3,4.

Розробці даного проекту вищеописані плагін був використаний саме для цих цілей. Однак, хоча тут і не був використаний java-script, плагін firebug може бути використаний також для його налагодження. Приклад налагодження зображено малюнку 5.

На цьому, як було описано вище, функціональність даного розширення не обмежується. Вивчити його повністю і використовувати у своїх потребах можна, завантаживши наведені посилання, попередньо встановивши Mozilla Firefox.

Web Developer plugin

Web Developer - друге розширення для браузера Mozilla Firefox, дуже потужне та функціональне, яке дозволяє робити швидке та ефективне налагодження. Після встановлення у вікні браузера з'явиться додаткова панель з інструментами, зображена на малюнку 6.

Подальша робота з плагіном інтуїтивно зрозуміла. Наприклад, якщо нам потрібно виконати роботу з CSS (хоча не так повнофункціонально, як з плагіном Firebug), то можна натиснути меню CSS і заблокувати, увімкнути або вимкнути.

Дуже зручним для розробника є можливість переглянути, як виглядатиме його проект на моніторах, з різною роздільною здатністю. Для цього потрібно використовувати вкладку Resize. Тут можна вручну поставити необхідні дозволиекрана (800x600, 1024x768 тощо), а потім вільно перемикатися між ними, наближати або видаляти зміст. Ця функціональна можливість зображена малюнку 7.

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

Список використаних джерел

• 1. www.getfirebug.com
  Офіційний веб-сайт доповнення.
• 2. http://addons.mozilla.org
  Офіційний сайт компанії Mozilla, де розміщується плагіни для браузера Firefox, інформація для розробників, інформація щодо використання плагінів.
• 3. http://chrispederick.com/work/web-developer/
  Офіційний сайт розробника плагіну WebDeveloper.

Під час роботи в Інтернеті браузер Internet Explorer може видавати повідомлення про те, що сторінка містить помилки та може відображатися неправильно. Розглянемо кілька способів виправлення цієї проблеми.

Інструкція

Якщо немає видимих ​​труднощів у роботі браузера крім помилки, що періодично з'являється, можна спробувати відключити налагодження скриптів, щоб повідомлення більше не з'являлося (якщо помилка з'являється не на одному, а відразу на декількох сайтах, перейдіть до наступного кроку). У меню «Сервіс» відкрийте пункт «Властивості браузера», виберіть вкладку «Додатково» та позначте прапорцем «Заборонити налагодження сценаріїв». Якщо вам потрібно вимкнути сповіщення про всі помилки, зніміть прапорець для пункту «Показувати сповіщення про кожну помилку сценарію».

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

Можливо, браузер Internet Explorer під час перегляду сторінок не блокує активні сценарії, Java та ActiveX, які визначають відображення відомостей на сторінці. Щоб усунути проблему, необхідно скинути параметри безпеки браузера. Для цього в меню "Сервіс" виберіть пункт "Властивості браузера" і перейдіть на вкладку "Безпека". Натисніть кнопку "За замовчуванням", а потім "ОК". Якщо після запуску сторінки, на якій виникла помилка, проблема залишається, спробуйте наступний спосіб.

Як відомо, браузер зберігає тимчасові файли та копії сторінок в окремій папці, для подальшого звернення до них. Якщо розміри папки стають занадто великими, можуть виникнути помилки під час відображення деяких сторінок. Проблему можна вирішити періодично очищаючи папку з тимчасовими файлами. Для цього відкрийте діалогове вікно «Властивості браузера» з меню «Сервіс». На вкладці «Загальні» у групі «Історія» натисніть кнопку «Видалити». Встановіть прапорці для пунктів «Тимчасові Інтернет-файли», «Куки-файли», «Журнал», «Дані веб-форм» і натисніть «OK».

Досить часто користувачі можуть спостерігати ситуацію, коли в Internet Explorer (IE) з'являється повідомлення про помилку сценарію. Якщо ситуація має одиничний характер, то не варто турбуватися, але коли подібні помилки стають регулярними, то варто задуматися про характер цієї проблеми.

Помилка сценарію в Internet Explorer, як правило, викликається неправильною обробкою браузером коду HTML-сторінки, наявністю тимчасових інтернет-файлів, параметрами облікового запису, а також багатьма іншими причинами, про які йтиметься в даному матеріалі. Також буде розглянуто методи вирішення цієї проблеми.

Перш ніж приступити до загальноприйнятих методів діагностики проблем з Internet Explorer, які викликають помилки сценарію, необхідно переконатися, що помилка виникає не тільки на одному конкретному сайті, а відразу на декількох веб-сторінках. Також потрібно перевірити веб-сторінку, на якій виникла проблема під іншим обліковим записом, на іншому браузері та на іншому комп'ютері. Це дозволить звузити коло пошуку причини виникнення помилки та виключити чи підтвердити гіпотезу про те, що повідомлення з'являються як наслідок наявності на ПК деяких файлів чи налаштувань.

Блокування Internet Explorer активних сценаріїв, ActiveX та Java

Активні сценарії, елементи ActiveX та Java впливають на спосіб формування та відображення інформації на сайті та можуть бути реальною причиною раніше описаної проблеми, якщо вони заблоковані на ПК користувача. Для того, щоб переконатися, що помилки сценарію виникають саме з цієї причини, необхідно просто виконати скидання параметрів безпеки браузера. Щоб це здійснити дотримуйтесь наступних рекомендацій.

• Відкрийте Internet Explorer 11
• Сервіс

• У вікні перейдіть на вкладку Безпека
• Далі натисніть кнопку За замовчуванням, а потім кнопку ОК

Тимчасові файли Internet Explorer

Щоразу при відкритті будь-якої веб-сторінки, браузер Internet Explorer зберігає на ПК локальну копію цієї інтернет-сторінки в так звані часові файли. Якщо таких файлів стає занадто багато і розмір папки, що містить їх досягає декількох гігабайт, можуть виникнути проблеми з відображенням веб-сторінки, а саме з'явиться повідомлення про помилку сценарію. Регулярне очищення папки з тимчасовими файлами може допомогти усунути цю проблему.
Щоб видалити тимчасові інтернет-файли, виконайте таку послідовність дій.

• Відкрийте Internet Explorer 11
• У верхньому куті браузера (праворуч) натисніть іконку Сервісу вигляді шестірні (або комбінацію клавіш Alt+X). Потім у меню виберіть пункт
• У вікні перейдіть на вкладку Загальні
• В розділі Журнал браузеранатисніть кнопку Видалити…

• У вікні Видалення історії оглядупоставте прапорці біля пунктів Тимчасові файли Інтернету та веб-сайтів, Файли cookie та дані веб-сайтів, Журнал
• Натисніть кнопку видалити

Робота антивірусного програмного забезпечення

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

Неправильне оброблення коду HTML-сторінки

Виявляється, як правило, на одному певному сайті і говорить про те, що код сторінки повністю не адаптований для роботи з Internet Explorer. В цьому випадку, найкраще відключити налагодження скриптів у браузері. Для цього виконайте наведені нижче дії.

• Відкрийте Internet Explorer 11
• У верхньому куті браузера (праворуч) натисніть іконку Сервісу вигляді шестірні (або комбінацію клавіш Alt+X). Потім у меню виберіть пункт
• У вікні перейдіть на вкладку Додатково
• Далі зніміть прапорець з пункту Показувати сповіщення про кожну помилку сценаріюта натисніть кнопку ОК.

Це перелік найчастіших причин, які викликають помилки сценарію в Internet Explorer, тому якщо Вам набридли подібні повідомлення, приділіть трохи уваги та вирішите проблему раз і назавжди.

Є, звичайно, й інші – про них я обов'язково згадаю.

Firebug для Firefox

Не знаю точно, чи є FireBugпрабатьком інших засобів для розробників, але він безумовно найпопулярніший, зручний і функціональний на сьогоднішній день в .

Firebug – це додаток для Firefox, а значить його треба завантажити з сайту Firefox add-ons та встановити.

Для того, щоб викликати фаєрбаг, достатньо натиснути F12.

Можливості цього доповнення:

• Інспектування та редагування HTML, що динамічно змінюється;
• Редагування CSS на льоту;
• Налагодження JavaScript, командний рядок для виконання скриптів;
• Моніторинг мережевих запитів - можна побачити розміри та час завантаження файлів та скриптів, заголовки запитів;
• Аналізатор DOM.

Можна довго розповідати про ці можливості в деталях, але я думаю, що вони всім нашим читачам відомі, а якщо ні – докладна інформація є на домашній сторінці Файєрбага чи те саме в перекладі Іллі Кантора.

Крім самого firebug'a вам може стати в нагоді корисна примочка до нього - FireCookie, за допомогою якої (сюрприз:-) можна переглядати та змінювати куки.

WEB Developer Toolbar для Firefox

Ще один корисний додаток до Огнелісу. Виглядає воно так:

Розберемо за пунктами.

Disable

Дозволяє вимкнути JavaScript, заборонити використання кешу, що дуже корисно при розробці (дозволяє бути впевненим, що сторінка завантажилася разом з останніми оновленнями), скасувати кольори, що використовуються на сторінці та замінити їх стандартними, заборонити відправлення в заголовку реферера (сторінка, з якої був перехід ).

Cookies

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

CSS

Це меню зберігає найкрутішу фічу Developer Toolbar'a - редагування CSS на льоту. Крім цього, є можливість переглядати css, забороняти і так далі, тощо. На мій погляд, тут дуже корисна наявність швидких клавіш (CTRL+SHIFT+C, наприклад, дозволяє відразу перейти до перегляду стилів сторінки)

Forms

Все для роботи з формами: показувати паролі, показувати інформацію про форми, конвертувати методи форм (GET »POST і навпаки) та багато іншого. Корисна функція «Populate Form Fields» для автоматичного заповнення полів форми (наприклад, при тестуванні сайту, коли функція запам'ятовування паролів вимкнена. В іншому не бачу в цьому пункті нічого корисного.

Images

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

Information

У цьому меню багато опцій. Можлива корисна функція відображення атрибутів class та id на сторінці. Крім цього, цікавий пункт «View Color Information» - щоб швидко отримати інформацію про кольори, які використовуються на сторінці. "View document size" - перегляд розміру сторінки. "View Response Headers" - переглянути заголовки сторінки.

Miscellaneous

Найчастіше використовується функція - очищення кешу. Крім цього тут доступні функції "Page ruler" - лінійка, "Page Magnifier" - лупа і "Line guides" - кілька ліній, які можуть бути корисні щоб підрівняти шаблон.

Outline

Виділення різних елементів сторінки - таблиць, заголовків, посилань, кадрів, блоків. Resize дозволяє змінювати розмір вікна браузера під стандартні розширення екранів. Tools тут зберігаються фічі для валідації сторінок. Як локальних, і зовнішніх. Зручний та швидкий доступ до валідації HTML, CSS та іншого. Для валідації HTML можна використовувати CTRL+SHIFT+H.

View Source

Перегляд вихідного коду. Можливість перегляду в зовнішній програмі, перегляд згенерованого коду.

Те, що знаходиться в правому кутку, мені подобається найбільше. Це швидкий валідатор HTML, CSS та індикатор помилок JavaScript. Якщо проблем ніяких немає - значок зелений, а якщо є проблеми - червоний.

Internet Explorer Developer Toolbar

Починаючи з 8.0 debug помилок вбудований вже у цей браузер. Викликається він легко по клавіші F12. Щоправда, він убогий як програма 90 років.

Але є куди крутіший інструмент для цього браузера, так званий Internet Explorer Developer Toolbar можна завантажити за посиланням.

На вигляд цей тулбар, звичайно, схожий на firebug, але, на жаль, до нього ще не доріс. Хоча, з іншого боку, в ньому є деякі можливості, яких немає у фаєрбагу. Я б назвав Internet Explorer Developer Toolbar якимось гібридом Firebug'a та FireFox WEB Developer Toolbar'a.

Як і в firebug, тут є можливість перевіряти елемент простим кліком. Але, якщо ми відразу можемо побачити padding'и і margin'и, то тут такої можливості немає.

Крім того, Internet Explorer Developer Toolbar не оновлює дерево елементів динамічно, як це робить Firebug. Тобто якщо ми змінимо щось на сторінці засобами js, за допомогою цього тулбару ми нічого не побачимо.

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

Найсмачніше тут є вбудований color picker, який дозволяє отримати будь-який колір зі сторінки за допомогою піпетки. (Для ff є окремий плагін ColorZilla).

Debug DebugBar для Internet Explorer

DebugBar для Internet Explorer можна завантажити за вказаним посиланням.

За своїм цікавим розширенням. Встановлюється як додаткова панель до браузера:

Є вбудований навіщось пошуковик, піпетка, можливість змінювати розмір вікна і, знову ж таки, навіщось можливість відсилати сторінку другові на мило. Хоча, можливо це й корисно. Але скористатися цією можливістю мені не вдалося.

Крім цього є інспектор:

Спосіб іспектування кліком або наведенням розробників не влаштував: вони вигадали цікавішу штуку. У DebugBar'e треба перетягнути приціл на потрібний елемент, щоб побачити його у дереві. Можливості редагувати CSS немає. Натомість є валідатор та вбудована консоль js.

А якщо покопатися в налаштуваннях можна знайти і таке:

І смішно та сумно.

Відомо, що у восьмий експлорер буде вбудований Developer Toolbar. Він буде схожим на той, який описувався в третьому пункті, але сподіваємося, що буде краще.

Debug DragonFly для Opera

DragonFly убудований в Оперу, починаючи з версії 9.5, тому встановлювати не треба. Щоб активувати Драгонфлай переходимо в Інструменти → Додатково → Засоби для розробників. А якщо англійською, то Tools → Advanced → Developer Tools.

Відразу попереджу, що DragonFly знаходиться в стадії Alpha2, цим пояснюються багато його глюків.

Можливості списком:

• DOM інспектор;
• Інспектування кліком (знову-таки, ми побачимо відступів, як у FireFox);
• Редагування;
• Швидкий доступ до консолі помилок.

DF - щось на зразок окремої сторінки у кадрі. Якщо ви його відкрили, воно буде відкрите для всіх вкладок (на відміну від firebug'a). Тому перед інспектуванням елемента треба вибрати зі списку сторінку, яку хочемо переглянути.

На жаль тут, як і в Internet Explorer Dav Toolbar, не відображаються елементи, що динамічно створюються. І взагалі, коли ми перевіряємо сторінку, ніякий JavaScript не запускається: посилання та кнопки не натискаються. Сподіватимемося, що коли DragonFly підійде до релізу, ми побачимо всі ці можливості.

Debug WEB Inspector у Safari

Відразу скажу, що про браузер Safariінформацію свиснув, тому за адекватність матеріалу, як кажуть, не відповідаю.

Для того, щоб увімкнути в меню Сафарі пункт «Розробка», необхідно в налаштуваннях (закладка «Додатково») увімкнути відповідний пункт:

У меню «Розробка» нам доступні такі функції:

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

За промовчанням інспектор відкривається в режимі перегляду HTML. Але його можна переключити у режим перегляду DOM. Для цього на верхній плашці є перемикач. При наведенні на елемент інспектора, він буде підсвічений на самій сторінці. Побачити відступи, змінити розмітку або CSS на льоту або побачити динамічні зміни в DOMe на льоту, як у FireBug не можна. Зате погодьтеся, виглядає дуже мило.

Якщо є бажання працювати з інспектором у вікні браузера, можна натиснути кнопку в нижньому лівому кутку.

Ще в сафарі доступна така функція, як «Шкала часу мережі» (кнопка «Network» в інспекторі):

Наочно можна побачити, коли і як довго вантажаться файли. Також можна переглянути заголовки запитів, але сам вміст переглянути, на жаль, не можна.

Debug для розробників у Google Chrome

Кульгавий з'явився на світ у просунутому вигляді, і в нього відразу є, нехай поки що криві, але все ж таки кошти для розробників.

• DOM Inspector;
• Відладчик javascript;
• Консоль JavaScript.

Для того, щоб проінспектувати якийсь елемент, на нього треба натиснути правою кнопкою та в контекстному меню вибрати «Перегляд коду елемента»:

Функціонал той самий, що й у Сафарі: елементи підсвічуються при наведенні, але не доступні редагування CSS та HTML, не відстежуються зміни DOM. Ось тільки, кнопка в нижньому лівому кутку, яка повинна прикріплювати інспектора до вікна браузера не працює.

В закладці «Resources» ми можемо побачити таке:

Нелегко відрізняється від шкали в сафарі. Напівпрозорим на цій схемі зображено відносні розміри файлів, а повним кольором - час завантаження. Так чи інакше очевидно, що ця частина Хрома ще не дороблена.

У цій статті я розглянув найвідоміші розширення та вбудовані засоби для браузерів.

Є й інші, наприклад:

• Internet Explorer WEB Development Helper – хороший помічник для ASP.NET розробників (Internet Explorer);
• WEB Developer Toolbar – тулбар для Internet Explorer та FireFox. Є кілька корисних функцій;
• WEB Accessibility Toolbar – тулбар для Internet Explorer. Нічого цікавого.

Якщо є доповнення, про які я не згадав, а варто було б, або є функції згаданих розширень, які я прогав, пишіть.

Використовуйте на здоров'я!

Internet Explorer 11 у Windows 8.1 і Windows 7 постачається з повністю переробленим та вдосконаленим набором засобів розробника, вбудованих у браузер, які допомагають розробникам створювати, діагностувати та оптимізувати роботу сучасних веб-сайтів та програм на багатьох пристроях. Нові засоби, які ми заради стислості називаємо просто F12, дозволяють веб-розробникам працювати швидко та ефективно.

Робочі групи Visual Studio та Internet Explorer працювали спільно, щоб створити засоби F12, в основу яких закладено принцип допомогти розробникам швидко переходити від проблеми до вирішення з використанням значимих даних. Новий набір F12 забезпечує швидку та гнучку взаємодію з Інтернетом за допомогою засобів для діагностики та виправлення проблем продуктивності, а також засобів, які допоможуть вам глибше зрозуміти, як Internet Explorer виконує розмітку та відтворення веб-додатків. Кошти F12 підтримує швидкий інтерактивний робочий процес, який використовується сучасними веб-розробниками.

Універсальний набір коштів

Новий набір F12 допомагає розробникам швидко переходити від проблеми до вирішення. Серед нових вражаючих можливостей можна назвати такі:

• Засоби аналізу відгуку інтерфейсу користувача та профілювання пам'яті, які допомагають розробникам створювати швидкі та гнучкі веб-додатки.
• Live DOM Explorer та засіб перевірки CSS, що оновлюються разом зі сторінкою, щоб розробники могли в інтерактивному режимі дослідити, як динамічний контент впливає на розмітку та стилі
• Можливість налагодження JavaScript, що швидко запускається без оновлення сторінки, щоб розробники могли швидше розпочати роботу

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

• Швидкий доступ до цих засобів за допомогою клацання правою кнопкою миші пункту меню за допомогою "елемента перевірки"
• Ефективна взаємодія з клавіатурою
• Широкі можливості копіювання елементів та компонентів із інструментальних засобів, завдяки чому їх можна вставляти у будь-який редактор без додаткового форматування

Найголовніше при цьому полягає в тому, що ці кошти тепер відображають найбільш повну і точну інформацію - від правил @media і!important в DOM Explorer до поелементної структури витрат у профільнику відгуку інтерфейсу користувача. Ці інструментальні засоби також надають значні дані; наприклад, профіль пам'яті визначає вузли DOM, які є "живими", але на які немає посилань з розмітки або дерева малювання.

Можливості нового набору F12 представлені і в Visual Studio, тому розробникам забезпечено узгоджений та безперервний досвід роботи з усіма нашими інструментами та платформами веб-розробки.

Давайте тепер коротко розглянемо ці інструменти у дії.

Профілювання програм за допомогою засобу аналізу відгуку інтерфейсу користувача

Засіб аналізу відгуку інтерфейсу користувача допомагає вам зрозуміти, де саме витрачається час ЦП, щоб ваш додаток зміг повністю реалізувати свій потенціал в області продуктивності. Цей засіб дає вам необхідне розуміння внутрішніх особливостей роботи Internet Explorer, забезпечуючи візуалізацію у часі виконання кодів HTML, CSS та JavaScript, а також важливих супутніх ефектів, таких як розмітка та складання сміття. З одного погляду ви зможете точно побачити, якою є швидкість відгуку вашої програми та її відмальовки. Це дозволить вам визначити конкретні джерела. вузьких місцьі більш осмислено підійти для його оптимізації.

Профілювання веб-сайту

Аналіз використання пам'яті програми за допомогою профілювання пам'яті

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

Хоча JavaScript є середовищем, в якому здійснюється збір сміття, програми зазвичай споживають більше пам'яті просто через те, що посилання на об'єкти не були (і не можуть бути) звільнені. Засіб аналізу пам'яті допоможе вам виявити ці проблеми, надавши інформацію по кожному об'єкту на сторінці, незалежно від того, чи він є об'єктом JavaScript або DOM. За допомогою цієї інформації ви зможете, наприклад, побачити, скільки пам'яті утримується елементом та які об'єкти підтримують його збереження. Але найголовніше, ви можете порівняти два моментальні знімки та побачити, що змінилося. Це дозволить вам зрозуміти, чому ваша програма стала використовувати більше пам'яті, і виправити це положення.

Знімок пам'яті типу "купа", що показує відключені елементи DOM

Швидке розуміння особливостей продуктивності програми за допомогою панелі моніторингу продуктивності

Щоб допомогти вам швидко виявити проблеми, що впливають на продуктивність роботи вашої сторінки, в Internet Explorer 11 є "сторінковий" віджет, званий панеллю моніторингу продуктивності, доступ до якої здійснюється за допомогою клавіш Ctrl+Shift+U або відповідного пункту меню "Інструменти" ( Alt+T). Ця панель відображає в Internet Explorer у динамічному режимі статистики для основних метрик продуктивності, таких як час відтворення, пам'ять, кількість кадрів за секунду (кадрів/с) та використання ЦП. Панель моніторингу продуктивності не вимагає використання засобів F12 і може використовуватися в сучасних браузерах.

За допомогою панелі моніторингу продуктивності ви зможете швидко виявити взаємодії сторінки, які спричиняють перебої в частоті кадрів або високе завантаження ресурсів ЦП. Ви можете потім перейти на засоби F12, щоб відтворити проблему і знайти для неї рішення.

Перевірка елементів та зміна розмітки та стилів за допомогою DOM Explorer

DOM Explorer спрощує інтерактивний процес настроювання запитів @media та правил CSS та їх властивості. Тому користувальницький інтерфейсвашої програми стає високоефективним засобом взаємодії з декількома пристроями, що мають швидкий відгук. Ви можете швидко розпочати роботу на веб-сторінці, клацнувши правою кнопкою миші та перевіривши потрібний елемент, що призводить до запуску засобів F12 разом з цим елементом, вибраним у DOM Explorer, з динамічним відображенням DOM та застосованих правил CSS. Модель DOM, що відображається, і таблиці CSS є динамічними, що дозволяє зрозуміти, як Internet Explorer інтерпретує особливості вашої розмітки, стилів і правил CSS. У міру вашої взаємодії зі сторінкою або її зміни з використанням DOM Explorer, внесені вами зміни будуть негайно відображатися.

Перевірка розмітки та стилів

DOM Explorer при внесенні змін до таблиці CSS полегшує отримання правильного значення властивості або властивостей за допомогою IntelliSense. Ви зможете легко побачити, які властивості є помилковими або виявилися нерозпізнаними, а потім копіюєте правило, щоб повторно застосувати його до вашого джерела.

Налагодження JavaScript за допомогою відладчика та консолі

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

Під час налагодження вам, ймовірно, захочеться налагодити взаємодію зі своїм веб-сайтом. Консоль є ключовим інструментом для виконання цього завдання. Ви можете отримати доступ до консолі у будь-який час, що робить використання цього інтерактивного середовища з IntelliSense та візуалізаторами об'єктів ефективним. Консоль також надає широкий діапазон спеціалізованих API, що дозволяє вам вести журнал виводу, аналізувати величину витраченого часу в певному коді та надавати візуалізаторів об'єктів, коли потрібно провести поглиблену перевірку об'єктів JavaScript.

Підбиваючи підсумки

Цей запис блогу просто містить ескіз опису нових елементів у засобах F12. Ви можете знайти повний списокнових функціональних можливостей, доступних розробникам в Internet Explorer 11 у статті "Нові можливості коштів F12" і в "Посібнику з Internet Explorer 11 Preview для розробників." Ви також можете отримати додаткові відомості в тестовій демонстрації по Internet Explorer, "F12 Adventure ".

З нетерпінням чекаємо на ваші відгуки і сподіваємося на тривалу співпрацю з спільнотою розробників. Поділіться вашими пропозиціями через засіб надсилання відгуків та пропозицій в Internet Explorer 11 або на сайті Connect.

П. Дж. Хуг (PJ Hough)
, віце-президент, Visual Studio