Инструменти за отстраняване на грешки в js скриптове и CSS стилове

Първоначално исках да посветя тази статия само за отстраняване на грешки в js скриптове. Но след писането се оказа, че проблемът с отстраняването на грешки в CSS е много свързан със същите тези програми за отстраняване на грешки, така че просто няма смисъл да се създава отделна статия за отстраняване на грешки в CSS.

Javascript съчетава мощ и разнообразие паралелно с примитивното отстраняване на грешки в браузърите. Винаги използвайте функцията тревога () - загуба на ценно време. Следователно, без външни инструменти за отстраняване на грешки, няма да можете бързо да идентифицирате грешката и правилно да конфигурирате скриптовете. Js скриптовете се изпълняват от браузъра, но самите браузъри или нямат инструменти за отстраняване на грешки в JS скриптове, или са толкова примитивни, че дори не искате да ги използвате.

CSS отстраняването на грешки е съществена част от ефективността на вашия браузър в различни браузъри. Когато кодират дизайн на уебсайт, дизайнерите на оформление тестват страници в основните браузъри. Основната цел на CSS отстраняването на грешки е едно и също визуално показване на страниците на сайта във всички основни браузъри.

За всеки браузър има специални инструменти за отстраняване на грешки в js скриптове и едновременно CSS отстраняване на грешки. Тези инструменти са специални помощни програми, написани за конкретен браузър. Следователно ще трябва да отстранявате грешките на своите js скриптове само под един браузър, тъй като всеки браузър има своя собствена помощна програма.

Firebug

Повечето хора смятат Firebug for 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 кода се подчертават незабавно.
Ако изберете елемент на страница и щракнете върху раздела "Оформление", можете да видите как е позициониран елементът на страницата, а раздела "Стил" ще покаже всички активни и заменени свойства на елемента (свойство зачеркване).

Свойството е заменено при последната стойност, зададена от приоритета на местоназначението му.