Помилки на веб сторінці. Усуваємо помилку сценарію в Windows

Використання коштів розробника F12 для налагодження помилок JavaScript

Це вміст посилається на старішу версію засобів розробника F12. Скачайте останню версію документації по засобам F12.

Засоби F12 дозволяють розробникам швидко налагодити код JavaScript, не виходячи з браузера. Вбудовані в кожен екземпляр Windows Internet Explorer 9 Інструментарій розробника програмного забезпечення F12 надають засоби налагодження, такі як точки зупину, перегляд контрольних і локальних змінних, а також консоль для повідомлень і негайне виконання коду.

У цій статті розглядається, як використовувати засоби розробника F12 для налагодження коду JavaScript. Ця стаття не є вичерпним навчальним посібником з налагодження, її мета - виділити інструменти, які можуть допомогти розробнику почати працювати зі створеним кодом. В Internet Explorer 9 натисніть клавішу F12, Щоб відкрити засоби розробника, і клацніть вкладку сценарій для початку роботи.

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

Запуск і зупинка відладчика

Коли ви вперше відкриваєте Інструментарій розробника програмного забезпечення F12 і клацаєте вкладку сценарій, Ваш код з'являється в лівій частині, а консоль в правій. В консолі можна побачити повідомлення: "Оновлення сторінку, щоб переглянути повідомлення, отримані до відкриття Інструментарій розробника програмного забезпечення F12." При оновленні веб-сторінки на консолі з'являться всі помилки і попередження, викликані браузером.

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

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

У більшості проектів програмування помилки діляться на синтаксичні, логічні та помилки введення даних. У поданні консолі показуються помилки і виключення JavaScript, а також виключення моделі DOM. Всередині вашого коду ви можете використовувати об'єкт консолі для передачі на консоль стану і повідомлень про помилки програми замість викликів "alert ()" або доступного простору на екрані. Наприклад, ви можете додати рядок

Window.console.log ( "The file opened successfully");

У ваш код JavaScript, щоб отримати інформацію про стан сценарію, не перериваючи його виконання. Додаткові відомості: .

Виправлення зовнішнього вигляду сценаріїв

Інструментарій розробника програмного забезпечення F12 можуть налагоджувати JavaScript на рівні рядка або оператора незалежно від способу відображення коду. Можна покроково виконувати навіть сценарії, стислі так, що вони виглядають великим блоком коду. Але іноді важко відстежувати логіку, коли код є одним блоком.

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

Переривання виконання коду

Завдання точок зупину в засобах розробника F12 аналогічно завданням в відладчика двійкового коду, таких як Microsoft Visual Studio. У лівій області клацніть зліва від рядка коду, в якій потрібно зупинитися. Точки зупинки є перемикаються, тому клацання додає точку зупину, а повторне клацання видаляє її.

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

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

Керування кількома точками зупинки за допомогою вкладки "Точки зупинки"

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

на вкладці точки зупинки розробник може включати або відключати, видаляти, вибирати і копіювати точки зупину без необхідності точно переходити до місцезнаходження потрібних точок. Щоб увімкнути або вимкнути точку зупинки, встановіть прапорець поруч із параметром, який потрібно змінити. Також можна відразу перейти до точки зупинки в коді, двічі клацнувши її в списку. Можна вибрати одночасно кілька точок зупину, натиснувши клавішу CTRL і клацаючи потрібні точки зупину.

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

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

Умовні точки зупину

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

У діалоговому вікні умов додайте правильний оператор JavaScript. Здійснюється код зупиниться в цій точці зупинки, коли результатом оператора буде значення true. Наприклад, на наступному зображенні виконання коду зупиняється, коли значення властивості oAudio.paused стає рівним false.

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

Покрокове виконання коду

Коли виконання коду зупиняється на точці зупинки, можна скористатися кнопками переходу для продовження виконання ( F5), Переривання виконання ( CTRL + SHIFT + B), Покрокового входу в функцію ( F11), Пропуску функції ( F10) Або виходу з функції ( SHIFT + F11). Коли виконання зупинено на точці зупинки або при покроковому виконанні, вікно налагодження фактично стає модальним.

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

Перегляд змінних за допомогою вкладок "Watch" і "Локальні"

вкладка Watch дозволяє визначати і переглядати контрольні змінні в налагоджувати коді. Вона містить ім'я, значення і тип заданих змінних. Можна клацнути рядок, позначену клацніть для додавання ..., На вкладці контрольні значення і ввести ім'я змінної. Якщо не хочеться вводити ім'я змінної, можна скопіювати і вставити його в список контрольних змінних.

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

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

Щоб побачити різницю, відкрийте наступний приклад в Internet Explorer 9 і виконайте вказані дії.

JavaScript debugging example

Завантажте приклад в Internet Explorer 9.
натисніть F12, Щоб відкрити засоби розробника F12, і клацніть вкладку сценарій.
У лівій області, перейдіть до першої функції, клацніть правою кнопкою миші рядок "var a \u003d 5;" і виберіть команду Вставити точку зупину.
Натисніть кнопку почати налагодження, А потім на веб-сторінці в браузері натисніть кнопку Run (Виконати).
У засобах розробника F12 клацніть вкладку контрольні значення на правій стороні і додайте змінні "a, b, c, і d.".
Покроково виконайте код, натискаючи клавішу F11 або кнопку Крок із заходом, І перегляньте змінні на вкладці контрольні значення.

При покроковому виконанні кожної функції Популярні значення повинні змінюватися з невизначених на деякі значення.

Щоб відчути відмінності від вкладки локальні, Натисніть клавішу F5 для продовження з коштів розробника F12. На веб-сторінці в браузері натисніть кнопку Run (Виконати), щоб ще раз виконати код і повернутися в Інструментарій розробника програмного забезпечення F12. На правій панелі вкладки сценарій клацніть вкладку локальні і натисніть клавішу F11, Щоб знову крок за кроком виконати функції. Зверніть увагу, що список локальних змінних містить тільки змінні, що мають значення. У поданні локальні також показуються аргументи, що передаються в функцію, їх значення і тип.

Перегляд стека викликів

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

Спробуйте виконати вищезгаданий приклад і стежте за вкладкою стек викликів при покроковому виконанні коду з заходом в функції.

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

Налагодження декількох сценаріїв

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

Щоб змінити налаштування режиму документа

Налаштування режиму документа з правого боку рядка Меню доступна на всіх закладках коштів розробника F12, але особливо корисна ця настройка при налагодженні коду на вкладці Сценарії. Internet Explorer 9 дозволяє змінювати режим документа, щоб емулювати стандарти попередніх версій Windows Internet Explorer. В Internet Explorer 9 вихід з оголошення за замовчуванням встановлює для типу документа режим сумісності. При роботі з новою можливістю або новим стандартом, наприклад або в HTML5, деякі помилки можуть виглядати як помилки програмування, але в дійсності бути викликані пропущеним або неправильним оголошенням doctype.

Інструментарій розробника програмного забезпечення F12 для Internet Explorer 9 не можуть виправити ваш код за вас, але трохи полегшують пошук помилок JavaScript.

Оновлений: Листопад 2007

Платформа ASP.NET надає розширену підтримку налагодження веб-додатків. Однак в силу розподіленого характеру веб-додатків їх налагодження відрізняється деякими особливостями.

В цілому веб-додатки отлаживаются так само, як і інші додатки Visual Studio. Можна ставити точки зупину, запускати відладчик, призупиняти виконання коду, перевіряти значення змінних і виконувати всі функції, пов'язані з отладчиком Visual Studio. Додаткові відомості див. У розділі. На додаток до цього платформа ASP.NET підтримує режим трасування, що дозволяє вставляти в форми повідомлення інструментірованія. Докладну інформацію див. В розділах і.

Додаткові відомості про віддалену налагодженні см. В розділі.

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

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

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

перші дії

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

Визначилися, що це не поодинокий випадок. Що робити далі? Подивіться, чи видає помилку при відкритті всіх сторінок або тільки однієї. Якщо на одній, то зайдіть в інший обліковий запис на цьому ж сайті, відкрийте сторінку в іншому браузері і ПК.

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

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

Ви вирішили все ж не переходити на іншу програму? В такому випадку будемо вирішувати проблему далі.

Active X і Java можуть бути відключені або заблоковані. Це одна з найпоширеніших причин помилки сценаріїв. Що робити в такому випадку? Потрібно скинути настройки безпеки оглядача.

Запустіть програму. Натисніть на іконку у вигляді шестерінки. Вона буде поруч із зірочкою. У списку опцій виберіть розділ «Властивості браузера». Це буде передостанній пункт.

Відкриваємо другу вкладку «Безпека». Кількома по кнопці «За замовчуванням». Натискаємо на ОК.

Тимчасові файли в браузері

Інтернет Експлорер зберігає версії сторінки при їх запуску. Зберігаються всі копії в папці з тимчасовими файлами. Цю папку час від часу потрібно чистити. Якщо папка досягне, наприклад, обсягу декількох гігабайт, браузер почне зависати і видавати, зокрема, помилку сценарію. В цьому випадку потрібно прибрати весь вміст зазначеного сховища.

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

Знову тиснемо на вже знайому нам шестірню. Вибираємо «Властивості браузера».
Перейдіть на розділ «Загальні».
У блоці «Журнал браузера» впевнено натискаємо на кнопку «Видалити».
Поставте галочки для тимчасові файли та інші види файлів, від яких хочете позбутися, а потім підтвердіть видалення.

Блокування від антивіруса

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

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

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

Зайдіть знову в віконце «Властивості браузера».
Зайдіть на цей раз в четвертий блок «Додатково».
Приберіть галочку з рядка «Показувати повідомлення про кожну помилку сценарію». Збережіть зміни.

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

Скачайте доступні оновлення

Сценарій може некоректно виконуватися також через те, що відсутні необхідні оновлення самої системи та Інтернет Експлорер. Апдейт може вирішити повністю проблему.

Зайдіть до служби Windows у себе на ПК і переконайтеся, що всі оновлення встановлені. Якщо немає, то запустіть установку.

Використовуємо системний реєстр

Збій може з'являтися при завантаженні ОС Windows, тобто під час завантаження комп'ютера. Це далеко не серйозний збій, але все ж виправляти ситуацію потрібно. У хід піде системний реєстр. Спосіб виправлення помилки набагато складніше, ніж попередні. Якщо ви новачок, попросіть зробити це за вас більше знає користувача.
1.Запускаем вікно «Виконати» і прописуємо в рядку команду regedit.

2.Клікаем по блоку HKEY_LOCAL_MACHINE правою кнопкою миші і вибираємо «Дозволи».

3.В вікні, яке з'явиться внизу, ставимо повний доступ і читання.

4.Откриваем Додаткові параметри. Натискаємо на кнопку «Змінити» і ставимо «Дозволити

5.Подтверждаем збереження налаштувань. Кількома по ОК.

6.Перезагрузіте пристрій. Викличте командний рядок. Фінальний штрих - пропис наступної команди: regsvr32 msxml.dll. Натисніть на клавіатурі на Enter.

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

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

Інструкція

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

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

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

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

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

Firebug для Firefox

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

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

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

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

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

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

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

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 скачати можна за вказаним URL.

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

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

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

Спосіб іспектірованія кліком або наведенням розробників не влаштував: вони придумали штуку цікавіше. У 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-документ

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

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

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

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

"End tag li implied, but there were open elements" (2 instances): Ні явного закриває тега, хоча браузер здогадується, де він повинен бути. Повідомлення вказує на рядок після рядка, у якій очікувався закриває тег, але ви знайдете потрібне місце.
"Unclosed element strong": Це дуже проста помилка - елемент) вказує на те, що його зміст має велике значення, серйозність або терміновість. Браузери зазвичай відображають вміст жирним шрифтом. "\u003e не закрите, і повідомлення вказує прямо на відкриває тег.
"End tag strong violates nesting rules": Елемент неправильно вкладений - на цьому рівні немає парного відкриваючого тега.
"End of file reached when inside an attribute value. Ignoring tag": Загадкове повідомлення. Справа в тому, що десь (швидше за все, в кінці документа) неправильно прописано властивість елемента, і кінець файлу опинився всередині цієї властивості. У браузері не видно посилання - швидше за все, проблема поруч з нею.
"End of file seen and there were open elements": Файл закінчився, але деякі елементи не закриті. Повідомлення вказує на кінець файлу, в даному випадку не закрите елемент 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.

Багато існує статей на Хабре, що описують цікаві і складні аспекти веб-розробки, але багато існує читачів, які, перебуваючи на початку своєї кар'єри веб-розробника, хотіли б бачити матеріал, який дозволив би зробити перший крок від «PHP за 24 години» до розробки на серйозному рівні, і я хотів би поділитися своїм досвідом в цій справі.

Особливості веб-додатки роблять його розділеним на дві частини: клієнтську і серверну. На стороні клієнта працює код на JavaScript (може бути, десь можна знайти і VBScript, але ми, мабуть, не будемо розглядати цей випадок), на серверної ж - багато що, в принципі, але ми розглянемо PHP, найбільш популярна мова для серверної частини веб-додатків. Так само цікаво було б поговорити про налагодження і профілювання Flash-додатків на стороні клієнта, але порушена тема і так обширна, так що поки залишимо це.

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

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

Налагодження і профілювання клієнтського коду

«Класичним» способом налагодження коду на JavaScript є використання функції alert і її похідні. Пам'ятається, на початку своєї кар'єри особисто я написав функцію print_r для JavaScript, тому що не бачив можливості для виведення налагоджувальної інформації по масивах та об'єктам. Виглядало це приблизно так:
function print_r (variable) (if (variable instanceof Array || variable instanceof Object) (var key; for (key in variable) alert (key + "\u003d\u003e" + variable);) else (alert (variable);))

Про який-небудь профілювання мови, звичайно, не велося зовсім.

При такому підході навіть інформація про об'єкт console проводить революцію.

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

Mozilla Firefox

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

Так само, починаючи з версії 4, з'явилася вбудована Веб-консоль, яка реалізує частину функцій вкладки «Консоль» і «Мережа» Firebug "а, а так само деякі можливості по налагодженню CSS.

Починаючи з версії 6, з'явився Простий редактор JavaScript, який так само реалізує одну з функцій Firebug "а, і дозволяє писати і виконувати код прямо в браузері.

Починаючи з версії 10 з'явився Інспектор сторінок, який дозволяє вивчати HTML код і CSS властивості, тобто, реалізує функції вкладки «HTML».

За валідацію HTML коду як правило відповідає розширення Html Validator. Якраз його іконку, яка вказує на кількість помилок на головній сторінці сайту habrahabr.ru, можна бачити в правому нижньому кутку браузера на зображенні з Інспектором сторінок.

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

Google Chrome і Safari

Ці браузери, засновані на WebKit, володіють вбудованим інструментом розробки Web Inspector, який дуже добре розвинений і реалізує практично ті ж функції, що і Firebug. При цьому, треба віддати йому належне, він не уповільнює роботи браузера, що водиться за «старшим братом».

У Chrome він може бути викликаний після натискання клавіш Ctrl + Shift + I або просто по F12. У Safari він добре захований, і для його використання потрібно включити можливості розробки в настройках браузера. Пізніше інструменти розробника стануть доступними з пункту «Розробка» головного меню або за поєднанням клавіш Ctrl + Alt + I.

Для валідації HTML коду так само потрібно встановлювати сторонні розширення. Наприклад, для Chrome, це може бути Validity. Для Safari поки не вдалося підібрати нічого підходящого.

Opera

Opera так само має вбудований інструмент для розробників, який називається «Opera Dragonfly», і може бути викликаний в будь-який момент за поєднанням клавіш Ctrl + Shift + I. Він схожий на те, що нам представляє WebKit, і має подібні можливості і плюси, хоча, на мій особисто погляд, менш зручний.

Налагодження і профілювання серверного коду

Xdebug

Як ми домовилися на початку, ми розглядаємо випадок, коли на сервері використовується PHP. Тут «класичним» методом налагодження є echo, print_r і var_dump, але є так само і засіб для налагодження, як в кращих будинках - Xdebug. Особисто для мене, в зв'язку зі специфікою навчання в інституті, це виглядало «прямо як в Delphi».

Розширення xdebug дозволяє як мінімум проганяти код по кроках і переглядати значення змінних, що піднімає програмування на PHP на новий рівень. Про тонкощі роботи з xdebug була відповідна. XDebug зазвичай доступний в репозиторіях GNU / Linux, в Windows його так само не дуже складно встановити, скопіювавши dll файл.

При використанні цього розширення, з сервера на комп'ютер розробника надходить вхідні повідомлення (за замовчуванням на порт 9000), яке він повинен обробити. Для цього необхідно відповідним чином налаштувати свою IDE.

До речі кажучи, використання IDE так само є неодмінною умовою руху вперед. Деякі програмісти вважають, що різницю між програмуванням в блокноті з підсвічуванням коду і в IDE можна побачити тільки на великих проектах, але особисто я дотримуюся думки, що різниця видна навіть на програмі «Hello world!» - одна автопідстановка імен та аргументів стандартних функцій чого вартий.

XHProf

Про розширення

Так, xdebug надає можливості по профілізації, але розробка Facebook "а для цих цілей, XHProf, особисто мені більше подобається. Я, сказати чесно, не проводив ніяких тестів, але вважається, що дане розширення набагато краще підходить для production-серверів і для профілювання при реальних навантаженнях.

установка

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

# Отримуємо вихідні wget http://pecl.php.net/get/xhprof-0.9.2.tgz # Розпаковуємо вихідні tar -xvf xhprof-0.9.2.tgz # Переходимо в каталог, де міститься код розширення cd xhprof-0.9. 2 / extension / # Проводимо компіляцію і тест phpize ./configure make make test # Проводимо установку цивілізовано checkinstall
Файл конфігурації xhprof.ini надає нам приблизно такі можливості:

extension \u003d / usr / local / lib / php / extensions / no-debug-non-zts-20090626 / xhprof.so
; Каталог для логів
xhprof.output_dir \u003d "/ var / log / xhprof /"

профілювання

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

Наведемо приклад профілювання. У код додатка потрібно включити такі елементи:
// Початок скрипта, включаємо профілювання // як навантаження на процесор, так і на пам'ять xhprof_enable (XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY); / * * Основний код програми * / // Кінець скрипта, завершуємо профілювання, // записуємо результат в лог $ xhprofData \u003d xhprof_disable (); include_once XHPROF_DIR. "/ xhprof_lib / utils / xhprof_lib.php"; include_once XHPROF_DIR. "/ xhprof_lib / utils / xhprof_runs.php"; $ XhprofRuns \u003d new XHProfRuns_Default (); $ Namespace \u003d "some-unique-name"; $ RunId \u003d $ xhprofRuns-\u003e save_run ($ xhprofData, $ namespace); echo "\\ N ";
Тут константа XHPROF_DIR вказує на каталог, куди ми розпакували скачаний архів.

Для аналізу результатів потрібен той самий веб-інтерфейс. Його можна взяти в каталозі $ XHPROF_DIR / xhprof_html / - умовно позначимо його так. Наприклад, ми розташували його в доступному веб-сервера місці, і він доступний за адресою example.com/system/xhprof/, тоді для аналізу результату роботи нам потрібно звернутися до нього в такий спосіб:

Example.com/system/xhprof/?run\u003d%runId%&source\u003d%namespace%

Ми отримаємо подібний результат:

Профілювання можна включати в код програми на постійній основі або, наприклад, зробити так, щоб воно запускалося випадково з певною ймовірністю або за наявності певної умови. Наприклад, так:

$ NeedProfiler \u003d (mt_rand (0, 100)< 10 or isset($_COOKIE["xhprof"])); if ($needProfiler) xhprof_enable(XHPROF_FLAGS_CPU + XHPROF_FLAGS_MEMORY);
В такому випадку можна, маючи скарги від клієнтів або підозри, звернутися до результатів профілювання за певний часовий проміжок. За допомогою параметра namespace можна визначити, яка саме частина програми (який скрипт, контролер, стрілялки) профилировались.

Профілювання SQL запитів

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

/ ** * Запит * @param string $ sql Запит * @param array $ params Параметри * @param string $ query Скомпільований запит * @return array Результат * / public function query ($ sql, array $ params \u003d array (), & $ query \u003d "") ($ start \u003d microtime (TRUE); // Проведення запиту, включаючи "захист" параметрів $ stop \u003d microtime (TRUE); $ time \u003d $ stop - $ start; $ this -\u003e _ addProfilerData ($ sql , $ time); // Повернення результату) private function _addProfilerData ($ query, $ time) (if (is_array (self :: $ profilerData)) (self :: $ profilerData \u003d array ( "query" \u003d\u003e $ query, " time "\u003d\u003e $ time);)) public function __destruct () (if (is_array (self :: $ profilerData)) ($ this -\u003e _ writeProfilerData (); self :: $ profilerData \u003d FALSE;) // Відключення від БД ) private function _writeProfilerData () ($ values \u200b\u200b\u003d array (); foreach (self :: $ profilerData as $ row) ($ query \u003d mysql_real_escape_string ($ row [ "query"], $ this-\u003e con); $ time \u003d ( float) $ row [ "time"]; $ hash \u003d crc32 ($ row [ "query"]); $ values \u200b\u200b\u003d "($ hash," $ query ", $ time)"; ) If ($ values) ($ strValues \u200b\u200b\u003d implode ( ",", $ values); $ Sql \u200b\u200b\u003d "INSERT DELAYED INTO` profiler_queries` ( `query_hash`,` query`, `work_time`) VALUES $ strValues"; @mysql_query ($ sql, $ this-\u003e con); ))
Тут дані профілювання запитів зберігаються в таблиці profiler_queries. Ця таблиця може мати тип MyISAM або Archive, так як вони надають можливість здійснювати відкладені вставки, що не створює зайвого зволікання відповіді при профілювання. Так само для кращого пошуку запитів в таблиці краще створити стовпець типу INT, куди буде писатися crc32-хеш запиту, за яким потрібно створити індекс.

висновок

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