Інструменти для налагодження js сценаріїв та CSS стилів
Спочатку цю статтю я хотів присвятити лише тому, що стосується налагодження сценаріїв js. Але після написання, виявилося що, питання CSS налагодження дуже пов'язане з тими ж налагоджувачами, тому створювати окрему статтю про CSS налагодження просто не має сенсу.
Javascript поєднує в собі потужність та різноманітність паралельно з примітивним налагодженням у браузерах. Постійно користуватися функцією alert() - витрата дорогоцінного часу. Тому без зовнішніх інструментів налагодження виявити помилку та правильно налаштувати сценарії у Вас швидко не вийде. Сценарії js виконує браузер, але у самих браузерів інструменти з налагодження js скриптів або відсутні або настільки примітивні, що ними навіть користуватися не хочеться.
CSS налагодження – це важлива складова крос-браузерності вашого сайту. При верстці дизайну сайту верстальники тестують сторінки в основних браузерах. Основна мета CSS налагодження це однакове візуальне відображення сторінок сайту у всіх основних браузерах.
Під кожен браузер існують спеціальні інструменти для налагодження сценаріїв js і одночасно CSS налагодження. Ці інструменти – спеціальні утиліти написані під конкретний браузер. Тому налагоджувати свої js скрипти Вам доведеться лише під одним браузером, тому що кожен браузер має свою утиліту.
Firebug
Найпопулярнішим і найзручнішим інструментом більшість вважають Firebug для браузера Firefox. І в практичній розробці сценаріїв js я теж використовую цю утиліту. З усіх представлених вище інструментів Firebug найбільш зручний у використанні та функціональніший.
На зображення показано частину консолі Firebug'а. Вкладка "Консоль " найважливіша - на ній рядково відображаються помилки виявлені під час виконання js сценаріїв. В рядкувідображається причина помилки, а праворуч назва файлу та номер рядка. При натисканні на кнопку "Профілювати" вона перейде в стан натискання. Якщо Ви відімкнете її, з'явиться таблиця з переліком функцій, які виконуються браузером у реальному режимі. Буде показано назви функцій, кількість дзвінків та час виконання цих функцій за проміжок, поки була утримана кнопка "Профілювати ". Другий за важливістю можна вважати вкладку "Сценарій ". Тут Ви можете побачити внутрішній код будь-якого вибраного js файлу. На вкладці також доступні такі цікаві параметри:
ВкладкаМережа відображає список завантажених скриптів. Якщо натиснути на будь-який файл, то буде показано інформацію про обмін заголовками між браузером та сервером, а також вміст js скрипта. У рядку також відображається розмір і час завантаження скрипта. Це може бути корисним не тільки при налагодженні сценаріїв, а й для прискорення завантаження сторінки. Можна переглядати розміри малюнків, що підвантажуються сценаріями js і оцінювати час витрачений на завантаження кожного елемента сторінки. Колірна гамма завантаження крім відображення часу на завантаження елемента (сторінки), часу DNS запиту та часу HTTP запиту, також показує час очікування відповіді сервера. Або інакше кажучи, час виконання коду php.
Крім того, Firebug дозволяє відстежувати ajax запити, переглядати заголовки відповідей і знову ж таки оцінювати час запитів.
Крім всього Firebug має командний рядок, який за бажання можна збільшити у вікно довільного розміру і в ньому наживо писати і відразу виконувати будь-який js код. Розробники Firebug створили спеціальну версію Firebug Lite, яка дозволяє налагоджувати сценарії js у всіх інших основних браузерах (Opera, IE, Safari). Правда ця версіятрохи урізана, але це все одно краще ніж нічого. Ну, і крім самої налагодження js сценаріїв, доступні такожCSS налагодження таструктура DOM сторінки. Виконання js подій (onclick, onmousemove і т.д.) дозволяє в реальному часі відстежувати зміни в HTML коді сторінки та DOM документа. Змінені частини HTML коду миттєво підсвічуються. Якщо Ви оберете елемент сторінки і натиснете на вкладку "Макет", то зможете побачити як елемент позиціонується на сторінці, а вкладка "Стиль" відобразить усі активні та перевизначені властивості елемента (перекреслена властивість).
Властивість перевизначається за останнім встановленим значенням за пріоритетністю його призначення.