Отстраняване на грешки в JavaScript за начинаещи

  • Необходими знания: Основен JavaScript
  • Изисква: Уеб браузър, един от: Google Chrome, Firefox (с Firebug) или Opera
  • Време на проекта: 30 минути

През последните пет години, благодарение до голяма степен на възхода на рамки като jQuery и Prototype, JavaScript се издигна, за да се превърне в език от първо ниво за скриптове в мрежата. Тази повишена популярност и лекота на използване доведе до създаването на пълноценни приложения като Gmail, които съдържат хиляди редове JavaScript код, които изискват екипи от талантливи разработчици за създаване.

В резултат на тази нарастваща сложност обаче, когато нещо се обърка, разработчиците се нуждаят от мощни инструменти за отстраняване на грешки в JavaScript, за да изкоренят бързо причината за проблема и да го отстранят ефективно. Просто където изхвърляне през тревога() диалогът просто вече няма да го отреже.



В този урок ще очертая някои от функциите на съвременните инструменти за разработчици, които можете да използвате днес, за да направите отстраняването на грешки в JavaScript по-малко болезнено. Ще се съсредоточим предимно върху инструментите за разработчици на Chrome и Firebug, но много от тези функции са налични в други инструменти като Opera Dragonfly.



  • Прочетете всички наши статии за уеб дизайн тук

01. Конзолата - преглед

В повечето инструменти за разработчици вашият най-добър приятел е Конзола ; многофункционален панел, използван за регистриране на грешки, проверка на DOM, отстраняване на грешки в JavaScript и много други. В зависимост от браузъра ви е лесно да стартирате този панел по всяко време, като използвате:

  • Инструменти за разработчици на Chrome и Opera Dragonfly - Ctrl + Shift + I
  • Firebug - F12

За да ви помогне със скриптове за отстраняване на грешки, панелът на конзолата автоматично ще покаже всички грешки във вашия код, които са възникнали по време на изпълнението. До всяка грешка се предоставят файл и номер на ред и щракването върху съобщението ще премине към този ред за вградено отстраняване на грешки в JavaScript - удобно!



Няма повече сигнали () - регистриране на данни в конзолата

Конзолата обаче не е само за пасивно показване на грешки. Той също така отговаря на команди, които му предавате чрез API конзола и API на командния ред . Може би най-известният и най-полезният инструмент е .log () команда.

Когато пишете каквато и да е форма на код, е полезно да можете да отпечатате стойността на променлива, за да я проверите. Във времена, минали от разработчик, може да са използвали тревога() диалог за осигуряване на визуална разпечатка.



В днешно време по-добро решение е console.log метод, който отпечатва стойността, предадена му в панела на конзолата по следния начин:

dquo;); // отпечатва “Captain’s Log” на панела на конзолата

Може да използваме това, за да отпечатаме стойността на изчислената променлива. Например:

функция calcPhotos () {
total_photos_diff = total_photos - prev_total_photos;
// Влезте в конзолата
console.log (total_photos_diff);
}

Ползата от този подход над използването на тревога() диалогът е, че изпълнението на кода не се спира и следователно можем да отпечатваме резултата от променлива няколко пъти и да наблюдаваме как се променя, без да се налага намеса.

var t = 3,
р = 1;


функция calcPhotos (total_photos, prev_total_photos) {
var total_photos_diff = total_photos - prev_total_photos;

// Влезте в конзолата
console.log (total_photos_diff);

// Актуализиране на стойности
t = t * 1,3;
р = р * 1,1;
}


setInterval (function () {
calcPhotos (t, p);
}, 100);

02. Отличима сеч

В примера по-горе цикълът кара много променливи да се регистрират в конзолата. Лесно е да се види колко бързо става визуално смазващо, ако се изхвърлят много променливи.
Много хора са наясно със стандартната функция на регистрационния файл, но също така е полезно да знаете, че има и други команди на API на конзолата, които ви позволяват да правите разлика между различните типове данни, които се регистрират в конзолата. Може би най-полезните от тях са:

console.info () : предоставя визуална икона „информация“ и цветно кодиране (синьо) за обозначаване на разговор „Информация“ в дневника. Полезно за обозначаване, когато се случва нещо важно

JavaScript отстраняване на грешки

console.warn () : предоставя визуална икона за „предупреждение“ и цветно кодиране (жълто) за обозначаване на повикване в дневника „Предупреждение“. Полезно за регистриране, когато нещо излиза извън приемливия диапазон

JavaScript отстраняване на грешки

console.error () : предоставя визуална икона за „грешка“ и цветно кодиране (червено) за обозначаване на повикване в дневника „Грешка“. Полезно за обозначаване, когато нещо е причинило състояние на грешка, което трябва да подчертаете

JavaScript отстраняване на грешки

как да направя неон във фотошоп -

Забележка: Инструментите за разработчици на Chrome понастоящем не предоставят никакво визуално разграничение между различните видове регистриране.

Използването на алтернативни разговори за регистриране осигурява семантично и визуално разграничение между информацията, която се отпечатва в конзолата, и може да помогне за четливост. Все още може да се надяваме да подобрим това допълнително, като групираме съобщенията си за грешки в блокове от свързани обаждания. Можем да направим това с помощта на console.group () :

// Започнете 1-во групиране
console.group ('Изчисляване на снимки');
console.info ('Общата разлика вече е' + total_photos_diff);
console.log (total_photos_diff);
console.groupEnd (); // крайна група

// Стартирайте 2-ро групиране
console.group ('Увеличаваща променлива');
console.log ('Общият брой снимки вече е:' + t);
console.log ('Предишните общи снимки вече са:' + p);
console.groupEnd (); // крайна група

Това създава групиран изход в конзолата. Визуалното представяне е различно в различните инструменти. Ето как изглежда в Opera Dragonfly:

JavaScript отстраняване на грешки

Примерите по-горе само надраскват повърхността на възможното с API на конзолата. Налични са много други полезни команди. Препоръчвам да прочетете Официална страница на Firebug в Wiki за списък с команди, въпреки че си струва да се отбележи, че поддръжката на различни инструменти не е непременно универсална.

04. Поставяне на пауза при изпълнение на скрипта

Влизането в конзолата е полезно, но нещата могат бързо да излязат извън контрол, ако кодът се изпълнява бързо и се опитвате да следите множество променливи.

За да улесним живота, можем да използваме инструменти за отстраняване на грешки в JavaScript, за да спрем изпълнението на код в определени точки, което ви позволява да оцените текущото състояние на кода в свободното време. Най-често срещаният начин за спиране на изпълнението на код в съвременните инструменти за разработчици е използването Пробив точки .

05. Работа с точки на прекъсване

За да зададете точка на прекъсване, отворете раздела „Скриптове“ и изберете скрипта, по който работите, от списъка. Сега намерете реда, където искате да спрете изпълнението, и щракнете в полето, за да активирате точката на прекъсване - трябва да се появи визуален индикатор. Сега презаредете страницата и изпълнението ще бъде спряно в определената точка:

JavaScript отстраняване на грешки

При пауза на изпълнението вече можете да задържите курсора на мишката върху която и да е променлива и дебъгерът ще изведе подсказка с информация за нейната стойност в момента.

След като сте готови, можете да изберете да продължите изпълнението на кода, като използвате един от Бутони за контрол на изпълнението които обикновено се намират в горната част на страничните панели. Възможностите за преминаване през кода са:

  • “Продължи”: продължава изпълнението на кода, докато не се срещне друга точка на прекъсване.
  • “Step Over”: стъпки през кода ред по ред, така че да можете да видите как всеки ред влияе на актуализираните променливи. Ако вашият код извика друга функция, отстраняването на грешки в JavaScript няма да премине в неговия код. Вместо това той ще бъде „прекрачен“ и фокусът ще остане върху текущата функция.
  • “Step Into”: подобно на Step over, с изключение на това, че когато щракнете върху “Step Into” при извикване на функция, дебъгерът премества изпълнението си на първия ред в дефиницията на функцията.
  • „Стъпка навън“: ако сте влезли в дефиниция на функция, като щракнете върху бутона „Стъпка навътре“, щракването върху бутона „Излизане“ води до изпълнение на останалата част от дефиницията на функцията и дебъгерът премества изпълнението си в родителската си функция.

Докато преминавате, можете да използвате страничните панели, за да ви помогне да следите промените в състоянието на кода си, включително актуализации на локални променливи, затваряне и глобален обхват.

06. Условни точки на прекъсване

Тъй като точките на прекъсване спират изпълнението на кода, понякога е желателно те да се задействат само когато са изпълнени определени условия. Ако вашият код използва цикъл, който се задейства например на всеки 50ms, вероятно не искате дебъгерът да спира при всяка итерация. Можем да избегнем това с помощта на
условна точка на прекъсване .

JavaScript отстраняване на грешки

В примера по-горе изпълнението на кода ще се счупи само когато total_photos_diff променливата е по-голяма от 200, спестявайки ни много допълнителни кликвания в дебъгера. За да активирате условна точка на прекъсване, щракнете с десния бутон върху точката на прекъсване в полето и изберете „Редактиране на точка на прекъсване“, за да разкриете диалога за условната точка на прекъсване.

07. Задаване на точки на прекъсване от кода

Не винаги е удобно или дори желателно да задавате точки на прекъсване с помощта на интерфейса на dev tools.
Понякога е по-лесно да стартирате дебъгера директно от вашия код. Това може да стане чрез използването на ключовата дума за отстраняване на грешки. Примерът по-долу показва как можете да поставите на пауза изпълнението на код чрез условен оператор във вашия код:

ако (total_photos_diff> 300) {
дебъгер; // стартиране на дебъгера и пауза на изпълнението
}

Други начини за пауза на изпълнението

Освен ръчно задаване на точки на прекъсване, инструментите за разработчици ви предоставят и редица възможности за спиране на изпълнението на кода в зависимост от различни сценарии.

08. Прекъсване на DOM мутация

Ако искате да отстраните грешка в част от кода, която обработва DOM мутация, тогава инструментите за разработчици предоставят начин за спиране на изпълнението на кода, когато DOM възел се промени.

Използвайки панела Elements, щракнете с десния бутон върху възела, който се модифицира, и ще получите набор от опции за Break on DOM промяна. Презаредете и следващия път, когато елементът промени изпълнението на скрипта, ще спре.

Можете да проследявате кои точки на прекъсване сте задали, използвайки страничния панел DOM Breakpoints.

09. Поставете пауза на всички / неприхванати изключения

Повечето dev инструменти ви позволяват да поставите на пауза изпълнението на скрипта, когато се срещне изключение. В инструментите за разработчици на Chrome тази функция може да се превключва с помощта на иконата „Пауза“ в долния ред на интерфейса.

JavaScript отстраняване на грешки

Можете да изберете дали да прекъснете всички изключения или просто тези изключения, които не се обработват от вашия скрипт. Примерът по-долу показва неизловено изключение и такова, което е „уловено“ (обработено чрез try / catch).

var t = 3,
р = 1;


функция calcPhotos (total_photos, prev_total_photos) {
var total_photos_diff = total_photos - prev_total_photos;

// Започнете 1-во групиране

console.info ('Общата разлика вече е' + total_photos_diff);


// Актуализиране на стойности
t = t + 5;
p = p + 1;

// Неуловено изключение - ще направи пауза
ако (total_photos_diff> 300) {
хвърли 0;
}

// Изключение се улавя чрез try / catch
// Ще прави пауза само когато е активна „пауза при ВСИЧКИ очаквания“
ако (total_photos_diff> 200) {
опитвам {
$$ ('# nonexistent-element'). hide ();
} улов (д) {
console.error (e);
}
}

}


setInterval (function () {
calcPhotos (t, p);
}, петдесет);

10. Въведение в стека на повикванията

Ако срещнете грешка във вашия скрипт, спирането на изключения ще спре изпълнението в точката в кода, където е била хвърлена грешката. Какво обаче, ако не е очевидно какво е причинило грешката? Какво е довело до възникването на грешката? Как да открием тази информация?

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

Стекът повиквания показва пълния път на изпълнение, който е довел до точката, където кодът е бил поставен на пауза, като ви предоставя изглед от птичи поглед на потока на кода, довел до грешката.

В примера по-долу умишлено съм хвърлил грешка в incrementValues ​​() функция, която е извела дебъгера. Инструментите за разработчици показват пълния стек повиквания, довел до грешката, което ми позволява да се върна назад през потока на кода, за да определя всички потенциални проблеми.

JavaScript отстраняване на грешки

11. Допълнително четене и ресурси

Надяваме се, че горните примери са предоставили полезен преглед на някои от методите, които са на ваше разположение, за да улеснят отстраняването на грешки в JavaScript само малко по-лесно.

Тази статия обаче очертава само вкус на това, което може да се постигне. За да научите повече, препоръчвам да отделите малко време със следните ресурси, за да разберете наистина истинската сила на вашите инструменти за разработчици:

  • Firebug Wiki : Firebug е оригиналният „инструмент за разработчици“ и в него Wiki има богата информация за различните налични API и инструменти.
  • Документи на Chrome Developer Tools : Документите за инструменти за разработчици на Chrome предоставят богата информация за извличане на максимума от техните инструменти. Дори и най-опитните ще научат нещо тук.
  • Видео: ' Chrome Dev Tools Reloaded ”: Заснети в Google I / O 2011, Пол Ирландски и Павел Фелдман предоставят отличен преглед на силата на инструментите за разработка на Chrome. Трябва да се гледа!
  • Документи за отстраняване на грешки в Opera Dragonfly : дори ако не използвате Opera ежедневно, концепциите, описани в тяхната документация, са приложими за повечето инструменти за разработчици.
  • Таблица с инструменти за разработчици на Chrome : удобен разпечатка за работа с инструментите на Chrome Dev.

Хареса ли ви това? Прочетете тези!