От време на време разработчиците правят грешки в кодирането. Грешка в програма или скрипт се нарича грешка.
Процесът на намиране и коригиране на грешки се нарича отстраняване на грешки и е нормална част от процеса на разработка. Този раздел обсъжда инструменти и техники, които могат да ви помогнат да отстраните грешки в задачи.
Съобщения за грешка в IE
Най-лесният начин за проследяване на грешки е да активирате информацията за грешки във вашия браузър. По подразбиране Internet Explorer показва икона за грешка в лентата на състоянието, когато възникне грешка на страница.
Щракването двукратно върху тази икона ще ви отведе до диалогов прозорец, показващ информация за конкретна грешка.
Тъй като тази икона е лесна за пренебрегване, Internet Explorer ви дава възможност да показвате автоматично диалоговия прозорец Грешка, когато възникне грешка.
За да активирате тази опция, изберете Инструменти → Интернет опции → Раздел Разширени. и накрая поставете отметка в квадратчето "Показване на известие за всеки скрипт", както е показано по-долу -
Съобщения за грешки във Firefox или Mozilla
Други браузъри като Firefox, Netscape и Mozilla изпращат съобщения за грешка в специален прозорец, наречен JavaScript Console или Error Console. За да видите конзолата, изберете Инструменти → Конзола за грешки или Уеб разработка.
За съжаление, тъй като тези браузъри не предоставят визуална информация, когато възникне грешка, трябва да държите конзолата отворена и да следите за грешки, докато изпълнявате скрипта си.
Известия за грешки
Известията за грешки, показвани в конзолата или през диалоговите прозорци на Internet Explorer, са резултат както от синтактични, така и от грешки по време на изпълнение. Тези известия за грешки включват номера на реда, където е възникнала грешката.
Ако използвате Firefox, можете да щракнете върху наличната грешка в конзолата за грешки, за да се придвижите до точния ред в скрипта за грешка.
Как да отстраните грешки в скрипт
Има различни начини за отстраняване на грешки във вашия JavaScript - Използвайте JavaScript Validator
Един от начините да тествате своя JavaScript код за странни грешки е да го стартирате през програма, която го проверява, за да се увери, че е валиден и че следва официалните правила за синтаксис на езика. Тези програми се наричат парсери или накратко просто валидатори и често се предлагат с комерсиални HTML и JavaScript редактори.
Най-удобният JavaScript валидатор е JavaScript Lint на Douglas Crockford, който е достъпен безплатно в JavaScript Lint на Douglas Crockford.
Просто посетете тази уеб страница, поставете JavaScript код (само JavaScript) в предоставената текстова област и щракнете върху бутона jslint. Тази програма ще анализира вашия JavaScript код, като гарантира, че всички дефиниции на променливи и функции следват правилния синтаксис. Той също така ще проверява JavaScript изрази като if и while, за да се увери, че те също са в правилния формат
Добавете код за отстраняване на грешки към вашите програми
Можете да използвате методите alert () или document.write () във вашата програма, за да отстраните грешките в кода си. Например, можете да напишете нещо подобно:
var debugging = true; var whichImage = "джаджа"; if (отстраняване на грешки) предупреждение ("Извиква swapImage () с аргумент:" + whichImage); var swapStatus = swapImage (whichImage); if (отстраняване на грешки) предупреждение ("Излиза swapImage () с swapStatus =" + swapStatus);
Чрез разглеждане на съдържанието и реда на предупреждение (), както се появяват, можете лесно да тествате функционалността на програмата си.
Как да използвате инструмента за отстраняване на грешки в JavaScript
Дебъгерът е приложение, в което всички аспекти на изпълнението на скрипта са под контрола на програмиста. Програмите за отстраняване на грешки осигуряват фин контрол върху състоянието на скрипт чрез интерфейс, който ви позволява да проверявате и задавате стойности и да контролирате потока на изпълнение.
След като скриптът се зареди в инструмента за отстраняване на грешки, той може да се изпълнява един ред наведнъж или да бъде инструктиран да спре на конкретни точки на прекъсване. Когато изпълнението е спряно, програмистът може да провери състоянието на скрипта и неговите променливи, за да определи дали нещо не е наред. Можете също да видите променливи, за да промените техните стойности.
- Използвайте много коментари. Коментарите ви позволяват да обясните защо сте написали скрипта по начина, по който сте го направили, и да обясните особено трудни части от кода.
- Винаги използвайте отстъп, за да запазите кода си четим. Отстъпът също така ви улеснява да съпоставяте начални и крайни тагове, фигурни скоби и други HTML и скриптови елементи.
- Напишете модулен код. Групирайте вашите изявления във функции, когато е възможно. Функциите ви позволяват да групирате свързани изрази и да тествате и използвате повторно части от вашия код с минимални усилия.
- Бъдете последователни в начина, по който наименувате своите променливи и функции. Опитайте се да използвате имена, които са достатъчно дълги, за да имат смисъл и да описват съдържанието на променлива или целта на функция.
- Използвайте последователен синтаксис, когато наименувате променливи и функции. С други думи, дръжте ги с малки или главни; ако предпочитате нотация Camel-Back, използвайте я последователно.
- Проверете дългите скриптове по модулен начин. С други думи, не се опитвайте да напишете целия скрипт, преди да тествате която и да е част от него. Напишете частта и я стартирайте, преди да добавите следващата част от кода.
- Използвайте описателни имена на променливи и функции и избягвайте използването на едносимволни имена.
- Внимавайте за цитати. Не забравяйте, че кавичките се използват по двойки около низове и че и двата кавички трябва да са в един и същи стил (един или два).
- Гледайте вашите знаци за равенство. Не трябва да използвате един = за целите на сравнението.
- Декларирам променливи изрично с помощта на ключовата дума var.
Представете си, че работите върху това невероятно ново уеб приложение и вашите тестери са ви помолили да коригирате следните грешки:
- Съобщението в лентата на състоянието „Зареждане...“ не изчезва, когато приложението приключи зареждането.
- Езикът по подразбиране е норвежки, дори в английските версии на IE и Firefox.
- Някъде в кода беше генерирана глобална променлива prop.
- По някаква причина всички елементи във визуализатора на DOM имат атрибута "clone".
Работещи дебъгери
- Във Firefox трябва да се уверите, че имате инсталирано разширението Firebug. Изберете „Инструменти> Firebug> Отвори Firebug”.
- В Opera 9.5+ изберете „Инструменти> Разширени> Инструменти за разработка.
- В IE бета изберете „Инструменти> Панели> Панели на браузъра> IE Developer Toolbar.
- В Safari или WebKit първо активирайте менюто за отстраняване на грешки (1), след което изберете „Разработка> Покажи уеб инспектора“
Грешка № 1: "Зареждане..." съобщение
Ако погледнете приложението, което се отстранява, първо ще видите това, което е показано на фигура 1.ориз. 1: Първоначален изглед на нашето JavaScript приложение в Dragonfly и Firebug, съответно.
Когато разглеждате източника в инструмента за отстраняване на грешки, забележете функцията clearLoadingMessage () в самото начало на кода. Това е добро място за контролно-пропускателен пункт.
Как да го инсталирате:
- Щракнете в лявото поле на номера на реда, за да зададете точка на прекъсване на първия ред
- Презаредете страницата.
Когато страницата се презареди, скриптът ще бъде спрян и ще видите какво е показано на фигура две.
ориз. 2: Програмите за отстраняване на грешки спряха в точка на прекъсване вътре в clearLoadingMessage.
Нека да разгледаме кода на функцията. Както можете да видите, той актуализира два DOM елемента, а ред 31 споменава лентата на състоянието. Изглежда като getElements ("p", ("class": "statusbar")). InnerHTML търси елемента на лентата на състоянието в дървото на DOM. Как можем бързо да проверим нашето предположение?
Поставете тази инструкция в командния ред, за да тествате. Фигура три показва три екранни снимки (Dragonfly, Firebug и IE8) след прочитане на елемента innerHTML или outerHTML, върнат от командата, която разглеждате.
За да проверите, направете следното:
- Намерете командния ред:
* Във Firebug превключете към раздела „Конзола“.
* В Dragonfly вижте прозореца с код на JavaScript по-долу.
* В IE8 намерете раздела „Конзола“ вдясно. - Поставете getElements ("p", ("class": "statusbar")). InnerHTML в командния ред.
- Натиснете Enter.
ориз. 3: Извеждане на изхода на командата съответно към Dragonfly, Firebug и IE8.
Командният ред е много полезен инструмент, който ви позволява бързо да проверявате малки парчета код. Интеграцията на конзолата на Firebug е много полезна - ако вашата команда изведе обект, получавате много интелигентен изглед. Например, ако това е DOM обект, ще видите маркиран резултат.
Можете да използвате конзолата, за да направите по-задълбочено проучване. Линията на JavaScript, която изучаваме, изпълнява следните три неща:
- Получава връзка към елемента на лентата на състоянието.
- Намира firstChild, с други думи, първия възел в този параграф.
- Задава свойството innerText.
getElements ( "p", ("class": "statusbar")). firstChild.innerText
Изненада, на излизане... нищо. По този начин изразът getElements ("p", ("class:" statusbar "")) .firstChild сочи към някакъв обект в DOM, който не съдържа никакъв текст или няма свойство innerText.
След това следващият въпрос е: какво всъщност е първото дете на параграф? Нека зададем този въпрос в командния ред. (Вижте четвъртата фигура).
ориз. 4: команден ред за отстраняване на грешки StDragonfly, изход [Текстов обект].
Изходът за отстраняване на грешки на Dragonfly - [Текстов обект] показва, че това е текстов възел на DOM. Така открихме причината за първия проблем. Текстовият възел няма свойство innerText, следователно задаването на стойност за p.firstChild.innerText не прави нищо. Тази грешка може лесно да бъде коригирана чрез замяна на innerText с nodeValue, което е свойство, дефинирано от стандарта W3C за текстови възли.
Сега, след като се справихме с първата грешка:
- Щракнете върху бутона Изпълни, за да прекратите скрипта.
- Не забравяйте да нулирате зададената точка на прекъсване, като щракнете отново върху номера на реда.
Втора грешка: проблем с откриването на език.
Може да сте забелязали променливата lang; / * language * / в началото на скрипта. Може да се предположи, че кодът, задаващ стойността на тази променлива, причинява проблема. Можете да опитате да намерите този код с помощта на функцията за търсене, вградена в програмите за отстраняване на грешки. В Dragonfly търсенето е точно над инструмента за преглед на кода, в Firebug - в горния десен ъгъл (виж фигура 5)За да намерите мястото, където е вероятно да възникне проблемът с локализацията, направете следното:
- Въведете lang = в полето за търсене.
- Задайте точка на прекъсване на реда, където е зададена променливата lang.
- Презаредете страницата.
ориз. 5 - Търсене в Dragonfly и WebInspector.
За да проверите какво прави тази функция:
- Щракнете върху бутона "стъпка в", за да влезете във вътрешността на функцията getLanguage.
- Натискайте го отново и отново, стъпка по стъпка през кода
- В инструмента за преглед на променливи вижте как се променят техните стойности.
var str1 = navigator.userAgent.match (/\((.*)\)/);
var ar1 = str1.split (/ \ s *; \ s * /), lang;
за (var i = 0; i< ar1.length; i++){
if (ar1 [i] .match (/ ^ (. (2)) $ /)) (
lang = ar1 [i];
}
}
Докато преминавате през кода, можете да използвате инструмента за преглед на локални променливи. Фигура 6 показва как изглежда това във Firebug и IE8 DT, ние разширихме масива ar1, за да видим неговите елементи.
ориз. 6: Панел за преглед на локални променливи на функцията getLanguage във Firebug IE8
Изразът ar1 [i] .match (/ ^ (. (2)) $ /) просто търси низ, състоящ се от два знака, като "no", "en". Въпреки това, както можете да видите на екранната снимка, Firefox има езикова информация под формата "nn-NO" (2). IE изобщо не поставя езикова информация в потребителския агент.
Така открихме втората грешка: езикът беше открит чрез търсене на двубуквен код в низа на потребителския агент, но Firefox има обозначение за език от пет знака, а IE изобщо го няма. Такъв код трябва да бъде пренаписан и заменен с откриване на език, или от страна на сървъра, като се използва HTTP заглавката Accept-Language, или като се получи от navigator.language (navigator.userLanguage за IE). Ето пример за това какво може да бъде такава функция
функция getLanguage () (
var lang;if (navigator.language) (
lang = навигатор.език;
) else if (navigator.userLanguage) (
lang = navigator.userLanguage;
}if (lang && lang.length> 2) (
lang = lang.подниз (0, 2);
}return lang;
}
Грешка трета: мистериозната променлива "prop".
ориз. 7: Глобалната променлива на prop е видима в инструмента за преглед на променливите Firebug и Dragonfly
Фигура 7 ясно показва променливата "prop". В добре написаните приложения броят на глобалните трябва да бъде сведен до минимум, тъй като те могат да причинят проблеми, когато например две части на приложението искат да използват една и съща променлива. Да предположим, че утре друг екип добавя нови функции към нашето приложение и също така декларира променлива "prop". В крайна сметка ще получим две различни части от кода на приложението, използвайки едно и също име за различни неща. Тази ситуация често води до конфликти и грешки. Можете да опитате да намерите тази променлива и да я декларирате за локална. За да направите това, можете да използвате търсенето, както направихме в предишния случай, но има и по-умен начин ...
Програмите за отстраняване на грешки за много други езици за програмиране имат концепцията за "часовник", който влиза в режим на отстраняване на грешки, когато дадена променлива се промени. Нито Firebug, нито Dragonfly в момента поддържат наблюдатели, но можем лесно да емулираме подобно поведение, като добавим следния ред в началото на кода, който тестваме:
__defineSetter __ ( "prop", функция () (дебъгер;));
Направете следното:
- Добавете код за отстраняване на грешки в началото на първия скрипт.
- Презаредете страницата.
- Обърнете внимание как е прекъснато изпълнението на скрипта.
Когато презаредите страницата, изпълнението на кода веднага ще спре там, където е дефинирана променливата "prop". Всъщност спирането ще се случи в точката, където сте добавили горния ред. Едно щракване върху бутона "излизане" ще ви отведе до мястото, където е зададена променливата.
for (подпор в атрибути) (
if (el.getAttribute (prop)! = атрибути) includeThisElement = false;
Лесно е да видите цикъл for, който декларира променлива на prop без ключовата дума var, т.е. глобален. Лесно е да се поправи, просто добавете var и поправете грешката.
Четвърта грешка: атрибутът "клонинг", който не трябва да бъде
Четвъртият бъг очевидно е бил открит от усъвършенстван тестер, използващ DOM инспектора, тъй като съществуването му не се проявява по никакъв начин в потребителския интерфейс на приложението. Ако отворим и DOM инспектора (в Firebug това е разделът "HTML", в Dragonfly се нарича "DOM"), ще видим, че много елементи имат атрибут clone, който не трябва да присъства.ориз. 8: DOM инспекторът на Dragonfly показва проблематичен код.
Тъй като това не засяга потребителите на приложението по никакъв начин, тази грешка не може да се счита за сериозна, но не забравяйте, че може значително да повлияе на производителността, тъй като скриптът задава атрибута на стотици и хиляди елементи.
Най-бързият начин да откриете този проблем е да зададете точка на прекъсване, която се задейства, когато атрибутът clone е зададен на някакъв HTML елемент. Могат ли дебъгерите да направят това?
JavaScript е много гъвкав език и една от силните му страни (или слабите страни, в зависимост от вашата гледна точка) е, че можете да замените основните функции на езика със свои собствени. Добавете тази част от кода към страницата, тя ще замени метода setAttribute на системата, карайки кода да спре, когато е зададено свойството "clone":
var funcSetAttr = Element.prototype.setAttribute; / * запазете връзката към системния метод * /
Element.prototype.setAttribute = функция (име, стойност) (
if (име == "клонинг") (
дебъгер; / * спрете скрипта * /
}
funcSetAttr.call (това, име, стойност); / * извикайте предварително запазен системен метод, така че нормалните свойства да са зададени правилно * /
};
И така, ние правим следното:
- Добавете горния код в началото на първия скрипт на страницата.
- Презаредете страницата.
Когато изпълнението спре в точка на прекъсване, искате да знаете къде се е случило извикването на setAttribute (), тоест трябва да се върнете нагоре по веригата от извиквания на функции и да видите какво се случва там. Можете да използвате стека от повиквания за това.
ориз. 9: Стек от обаждания в Dragonfly и IE8.
Фигура 10 показва стека във Firebug. В редица " setAttribute
ориз. 10: Стек от обаждания във Firebug. Последната извикана функция отляво.
Като щракнете върху имената на функциите в стека, можете да определите как сте стигнали до тази точка. Много е важно да го опитате сами, за да разберете как работи. Имайте предвид, че докато навигирате в стека, съдържанието на панела за локални променливи също се актуализира, за да покаже състоянието им в момента, в който избраната от вас функция е била изпълнена.
Как да използвате стека от повиквания, за да намерите проблемната функция:
- Щракнете върху името на функцията в стека, която искате да видите.
- Имайте предвид, че локалните променливи се актуализират със стойностите, които имат в избрания контекст.
- Не забравяйте, че ако използвате бутоните за стъпки, те ще ви преместят от мястото, където сте спрели, дори ако сте в различна част от стека.
for (var prop в атрибутите) (
el.setAttribute (реквизит, атрибути);
}
където ще видите извикването на setAttribute. Панелът с локални променливи показва, че стойността на променливата "prop" наистина е "клонинг". Променливата на prop е дефинирана в цикъл for ... in. Това ни казва, че това е името на едно от свойствата на обекта "атрибути". Този обект се предава на функцията като втори параметър. Ако отидете едно ниво по-нагоре в стека, ще видите следния код:
var form = makeElement („форма“, (действие: '/ login', метод: 'публикация', име: 'loginform'), документ .тяло);
Вторият параметър на метода е подчертан с удебелен шрифт - този обект няма свойство клониране. И така, откъде дойде?
Нека се върнем отново към функцията makeElement и да разгледаме отблизо променливата на атрибута и нейното свойство "clone". Можете да щракнете върху стойността на функцията на това свойство, за да се придвижите до мястото, където е присвоено, то ще бъде маркирано в синьо
ориз. 11: Firebug ни показва къде е дефинирано свойството клониране.
Така че открихме причината за четвъртата грешка: методът клониране се добавя към всички обекти с помощта на Object.prototype. Този подход се счита за лоша практика, тъй като в for ... in цикли на обекти всички свойства, които задавате чрез Object.prototype, ще бъдат видими. Това може да доведе до много фини грешки.
За да коригирате тази грешка, можете да преместите метода clone от прототипа на обекта директно към самия обект и след това да замените всички извиквания на obj.clone () с Object.clone (obj), както е показано в примера:
// ЛОШО, не си струва да се прави
Object.prototype.clone = функция () (
var obj = ();
for (var prop в това) (
obj = това;
}
връщане на обект;
}
// Код. демонстриране на използването на метода clone ():
var myObj1 = ("id": "1");
var myObj2 = myObj1.clone ();
Направете го по-добре така:
Публикувано на 26 март 2013 г
Инструментите за разработчици на Chrome са най-удобният инструмент за уеб разработка според мен. Той съдържа цялата необходима функционалност за създаване и отстраняване на грешки в пълноценни уеб приложения. Но с него, както с всеки друг инструмент, трябва да се научите как да работите. Да започнем с основите.
Конзолата действа като интерактивен интерпретатор на JavaScript. Той също така показва грешки, които възникват, докато уеб приложението работи. В допълнение към отделен раздел, конзолата е достъпна за всички други раздели чрез натискане на Esc или иконата на конзолата в долния ляв ъгъл на екрана.
Конзолата дава на разработчика достъп до редица удобни и полезни функции. Нека разгледаме основните:
console.log (), console.error (), console.warn () и console.debug ()
Основните функции за извеждане на конзолата ви позволяват да извеждате произволни съобщения към конзолата. Те се различават по класификацията на съобщенията, които показват: error () маркира съобщенията като грешки, warn () маркира съобщенията като предупреждения, debug () маркира съобщенията като отстраняване на грешки.
Тези функции приемат неограничен брой параметри, което ви позволява да показвате няколко променливи подред и дори да ги залепите в цели изречения:
Console.log ("Време за регистриране:", 1121102802);
Има и поддръжка за форматиране:
Console.log ("Време за регистриране:% d", 1121102802);
Поддържани форматни указатели:
//% s - низ console.log ("% s", "Здравей"); //% d,% i е цяло число console.log ("% d", 1337/42); //% f е число с плаваща запетая console.log ("% f", 1337/42); //% o е DOM елемент console.log ("% o", document.body); // или console.dirxml (document.body); //% O е JavaScript елемент console.log ("% O", document.body); // или console.dir (document.body); //% c - изход с настройка на CSS стилове console.log ("% cri% cmir", "цвят: червен", "цвят: син");
console.trace ()
Показва стека от повиквания от точката в кода, където е извикан методът. Стекът от повиквания включва имена на файлове и номера на редове плюс брой извиквания към метода trace () от същата точка.
console.assert ()
Функцията assert проверява израза, предаден като първи параметър, и ако изразът е false, записва грешка в конзолата заедно със стека за извиквания:
Вар две = 3; вар три = 2; console.assert (две< three, "два меньше трех");
console.group (), console.groupCollapsed () и console.groupEnd ()
Функции за групиране на изхода. Функцията group () отваря група от съобщения, приема името на групата като параметър (поддържа се форматиране, както в console.log ()), а функцията groupEnd () затваря последната отворена група. Функцията groupCollapsed () е подобна на функцията group (), но генерираната група съобщения е свита по подразбиране.
console.time () и console.timeEnd ()
Функции за изчисляване на времето за изпълнение на кода. Функцията time () стартира таймера, а функцията timeEnd () спира таймера и извежда неговата стойност. И двете функции приемат името на таймера като задължителен параметър.
Филтър за съобщения
В долния десен ъгъл на раздела на конзолата има филтър за съобщения по тип. Всичко съответства на всички съобщения, Грешки - на грешки и изход на функцията console.error (), Предупреждения - на предупреждения и изход на функцията console.warn (), Регистри - на изхода на функцията console.log (), Debug - към изхода на console.debug (), console .timeEnd () и друга информация.
Взаимодействие с други раздели
дебъгер;
Когато браузърът достигне реда за отстраняване на грешки; във всеки код, той автоматично спира изпълнението на скрипта в този момент и отива в раздела Източници.
$ (), $$ () и $ x ()
Функциите, които улесняват избора на елементи, работят само в конзолата. Функцията $ () връща първия елемент, който съответства на предадения селектор. Контекстът за търсене може да се предаде като втори параметър:
$ ("head") // връща елемента head $ ("head", document.body) // връща null, защото тялото не съдържа елементи head
Функцията $$ () е подобна на $ (), но връща всички намерени елементи:
$$ ("script") // връща всички скриптови елементи $$ ("script", document.body) // връща всички елементи на скрипта, съдържащи се в тялото
Функцията $ x () връща всички елементи, които съответстват на XPath израз. Контекстът може да се предаде като втори параметър:
$ x ("// скрипт") // връща всички скриптови елементи $ x ("скрипт", document.body); // връща всички елементи на скрипта, съдържащи се директно в тялото
Много JavaScript рамки дефинират своя собствена функция $ () и следователно значението на функциите в конзолата също се променя.
$0 — $4
Конзолата запазва в паметта препратки към последните пет елемента, избрани в раздела Елементи. Променливите $ 0, $ 1, $ 2, $ 3 и $ 4 се използват за достъп до тях. $0 съхранява връзка към текущо избрания елемент, $1 към предишния и т.н.
$_
Променливата $ _ съхранява резултата от последната команда в конзолата. Това позволява резултатът от една команда да се използва в друга команда. Опитайте тези команди на свой ред:
1337/42; console.log ("% d", $ _);
проверявам ()
Функцията inspect () отваря предадения обект или елемент в съответния раздел:
Проверка ($ ("head script")) // ще отвори раздела "Елементи" и ще маркира първия маркер на скрипта, намерен в главата
Наскоро общувайки с моите колеги, бях изненадан, че мнозина никога не са използвали конзолния дебъгер на JavaScript, вграден в браузъра в работата си. За съжаление един от тях работи в моята фирма, няма да разкривам името му.
За тези от вас, които все още не са запознати с конзолата на браузъра на API, тази статия е написана.
Визуално отстраняване на грешки
Когато работите върху сайт, отстраняването на грешки се основава основно на визуално възприятие. Лесно е да видите неправилно подравнени колони, припокриващ се текст, да направите необходимите редакции и да опресните страницата. За PHP съобщението за грешка спира скрипта и показва проблема директно на страницата. Накратко: повечето от грешките, които могат да бъдат отстранени веднага, са лесни за виждане, след като страницата се зареди.
Конзолата на API е обект (конзола), който може да се използва за показване на информация за отстраняване на грешки (може да се използва веднага щом страницата се зареди от браузъра). Конзолата показва най-голяма ефективност при работа с JavaScript.
Отстраняване на грешки в javascript firebug
Как да проследявате събития
Firefox - Запис на събития
Firefox + Firebug + Firequery = Показване на събития, окачени с jQuery
Инхибира - изключете извън работа
Забравете за отстраняване на грешки с console.log завинаги! Научете как да използвате точки на прекъсване за отстраняване на грешки в кода в инструментите за разработчици на Chrome
Превод на статияБрандън Морели : Научете как да отстраните грешки в JavaScript с Chrome DevTools ... Публикувано с разрешение на автора.
Намирането и коригирането на грешки може да бъде трудно. Може да се изкушите да използвате console.log () извън контрол, за да накарате кода си да работи правилно. Готово е!
Тази статия е за правилния начин за отстраняване на грешки! Научете как да използвате инструментите за разработчици на Chrome, за да задавате точки на прекъсване и да изследвате кода си. Този подход често е най-ефективният начин за намиране и коригиране на грешки във вашия код.
Този урок ви показва как да отстраните грешки в един конкретен проблем, но подобен работен процес е полезен за отстраняване на грешки на всички видове JavaScript грешки.
Стъпка 1: възпроизведете грешката
Възпроизвеждането на грешка - първата стъпка към отстраняването на грешки - означава откриване на поредица от действия, които водят до появата й. Може да се наложи да възпроизвеждате грешката много пъти, така че е препоръчително да премахнете всички ненужни стъпки.
За да възпроизведете грешката, която ще поправим в този урок, следвайте инструкциите по-долу:
- Ето уеб страницата, с която ще работим за тази статия. Отворете го в нов раздел: DEMO.
- Демо за Номер 1въведете 5.
- Въведете 1 за номер 2.
- Кликнете върху Добавете номер 1 и номер 2.
- Погледнете етикета под входовете и бутоните. Тя казва 5 + 1 = 51.
Опа! Това е грешен резултат. Резултатът трябва да е 6. Това е грешката, която ще поправим.
Стъпка 2: Спиране на изпълнението на код с помощта на точка на прекъсване
DevTools ви позволява да поставите на пауза кода си в средата на неговото изпълнение и да извлечете стойности от всичкипроменливи в този момент от време. Инструментът за пауза на кода се нарича точка на прекъсване. Опитай сега:
- Върнете се към демонстрацията и отворете DevTools, като натиснете Command + Option + I (Mac) или Control + Shift + I (Windows, Linux).
- Отидете в раздела Източници.
- Кликнете върху Точки на прекъсване на слушателя на събитияза да разширите менюто. DevTools разширява списък с категории събития, като напр Анимацияи Клипборд.
- Разширете категорията на събитието Мишка.
- Моля изберете щракнете върху.
- Връщайки се към демонстрацията, натиснете отново Добавете номер 1 и номер 2... DevTools ще постави на пауза и ще подчертае реда код в панела Източници:
Когато изберете щракване, задавате точка на прекъсване въз основа на всички събития за щракване. Когато има щракване върху всякаквивъзел и този възел има манипулатор на събитие за щракване, DevTools автоматично спира изпълнението на първия ред от кода на манипулатора на щракване за този възел.
Стъпка 3: Разглеждане на кода
Една от често срещаните причини за грешки е, че скриптът се изпълнява в грешен ред. Разглеждайки кода, можете да изпълнявате кода един ред в даден момент и да разберете къде точно се изпълнява в неочакван ред. Опитай сега:
- На панела Източницив DevTools щракнете Влезте в следващото извикване на функция.
Този бутон ви позволява да изпълнявате функцията onClick () един ред наведнъж. DevTools ще спре изпълнението и ще подчертае следния ред код:
Ако (inputsAreEmpty ()) (
- Сега натиснете бутона Преминете през следващото извикване на функция.
Това казва на DevTools да изпълни функцията inputAreEmpty (), без да влиза в нея. Имайте предвид, че DevTools пропуска няколко реда код. Това е така, защото inputAreEmpty () се оценява на false, така че блокът на оператора if не се изпълнява.
Това е основната идея зад изследването на кода. Ако погледнете кода get-started.js, можете да видите, че грешката вероятно е някъде във функцията updateLabel (). Вместо да проверявате всеки ред код, можете да използвате различен тип точка на прекъсване, за да поставите кода на пауза по-близо до грешката.
Стъпка 4: задайте различна точка на прекъсване
Най-често срещаните точки на прекъсване на кода са, когато имате конкретен ред код, който искате да поставите на пауза. Опитай сега:
- Разгледайте последния ред код в updateLabel ():
Вляво от кода можете да видите номера на този конкретен ред: 32 ... Кликнете върху него. DevTools ще постави синя икона върху числото. Това означава, че има точка на прекъсване на тази линия. DevTools вече винаги ще спира пред него.
- Щракнете върху бутона Възобновяване на изпълнението на скрипта:
Скриптът ще работи, докато не срещне точка на прекъсване.
- Разгледайте вече изпълнените редове код в updateLabel (). DevTools извежда стойностите на addend1, addend2 и sum.
Стойността на сумата изглежда подозрителна. Изглежда, че се оценява като низ, но трябва да е число. Това може да е причината за нашата грешка.
Стъпка 5: Проверка на стойностите на променливите
Друга често срещана причина за грешки е, че променлива или функция генерира различни стойности от очакваните. Много разработчици използват console.log (), за да видят как стойностите се променят с течение на времето, но console.log () може да бъде досаден и неефективен по две причини. Първо, може да се наложи ръчно да редактирате кода си с много повиквания console.log (). Второ, може да не знаете точно коя променлива е свързана с грешката, така че може да се наложи да заложите много променливи.
Watch Expressions е алтернатива от DevTools за console.log (). Използвайте Watch Expressions, за да проследявате стойността на променливите във времето. Както подсказва името, Watch Expressions не се ограничават само до променливи. Можете да съхранявате всеки валиден JavaScript израз в Watch Expression. Опитай сега:
- На панела ИзточнициЩракнете върху DevTools Гледам... Разделът ще се разшири.
- Кликнете върху Добавете израз.
- Въведете вида на сумата.
- Натиснете Enter. DevTools ще покаже: typeof sum: "string". Стойността вдясно от двоеточие е резултат от вашия Watch Expression.
Както се очаква, сумата се оценява като низ, но трябва да е число. Това е причината за нашата грешка в демото.
