В това ръководство ще се научите как да отстранявате грешки и да задавате точки за прекъсване в Chrome Developer Tools, което е едно от основните умения в процеса на софтуерно разработване. Чрез Developer Tools можете да анализирате изпълнението на вашия код, да следите стойностите на променливите и да намерите грешки, преди да използвате кода си в производствена среда.
Използването на Developer Tools, особено задаването и използването на точки за прекъсване, ви позволява да наблюдавате точно състоянието на вашето приложение и да прилагате мощни техники за отстраняване на грешки. Ще ви преведем през процеса стъпка по стъпка, така че да можете да използвате тези важни умения самостоятелно.
Най-важните изводи
- Chrome Developer Tools предлагат обширни функции за отстраняване на грешки в JavaScript.
- Точките за прекъсване ви помагат да спрете изпълнението на кода, за да проверите състоянието на приложението си.
- С правилното използване на инструментите можете бързо да идентифицирате и отстраните грешки.
Ръководство стъпка по стъпка
Стъпка 1: Достъп до Developer Tools
Първо трябва да отворите Chrome Developer Tools. Можете да ги достигнете, като щракнете с десния бутон върху страницата и изберете "Изследване" или използвате комбинацията от бутони Ctrl + Shift + I (Windows) или Cmd + Opt + I (Mac). Това отваря Developer Tools в дясната част на вашия браузър.
Стъпка 2: Навигирайте към раздела „Източници“
В Developer Tools горе имате няколко раздели. Щракнете върху раздела „Източници“, за да получите достъп до скриптовете и структурата на вашето приложение. Тук можете да видите всички заредени скриптове и ресурси, които използва вашият уеб сайт.
Стъпка 3: Избор на файл за отстраняване на грешки
В раздела „Източници“ може да видите скриптовете, заредени от вашия уеб сайт. Намерете JavaScript файлът, който искате да отстраните грешки в него. Внимавайте да изберете правилния файл, особено ако има множество версии на файл, като например sourcemaps.
Стъпка 4: Задайте точка за прекъсване
За да зададете точка за прекъсване, просто щракнете върху номера на реда вляво от кода, където искате да спрете изпълнението. Ще се покаже синя точка, която показва, че точката за прекъсване е зададена успешно. Това ви помага да спрете изпълнението на това място и да прегледате състоянието на променливите.
Стъпка 5: Презаредете страницата
За да достигнете точката за прекъсване, презаредете страницата. Можете да направите това, като натиснете F5 или щракнете върху бутона за опресняване в адресната лента. Изпълнението трябва да спре в точката, където сте задали точката за прекъсване.
Стъпка 6: Преглед на изпълнението
След като изпълнението е спряло на вашата точка за прекъсване, можете да прегледате текущото състояние на вашето приложение. В дясно можете да видите стойностите на променливите, стека на извикванията и текущия обхват. Тази информация е от съществено значение за разбирането на това, което се случва във вашето приложение.
Стъпка 7: Продължаване или преглед на променливите
Можете да пуснете програмата до следващата точка за прекъсване или да я прегледате ред по ред. За да продължите до следващата точка за прекъсване, просто щракнете върху бутона "Play". Ако искате да минавате ред по ред, можете да използвате "Step over" или "Step into", за да запазите по-подробен контрол.
Стъпка 8: Променете стойностите на променливите
Ако искате да промените стойността на променлива, можете да направите това директно в областта на обхвата. Щракнете върху променливата, променете стойността и след това отново натиснете "Play". Това ви помага да тествате как различните стойности влияят на поведението на вашето приложение.
Стъпка 9: Премахнете точките за прекъсване при нужда
Ако не се нуждаете от точките за прекъсване повече или искате да ги премахнете всички наведнъж, може лесно да ги изтриете като щракнете с десния бутон върху номера на реда и избирате "Премахване на точката за прекъсване". Алтернативно можете да премахнете всички точки за прекъсване наведнъж, ако сте задали много такива.
Стъпка 10: Използване на Call Stack и опции за дебъгване
Използвайте изгледа на Call Stack, за да видите откъде е извикан текущият функция. Това ви помага да проследите пътя на изпълнение на приложението. Chrome Developer Tools също предлага много полезни функции като „Пауза при изключения“, за идентифициране на грешки и получаване на по-дълбоки погледи върху проблеми.
Резюме
В това ръководство научихте как да използвате ефективно Chrome Developer Tools за дебъгване на JavaScript. Процесът включва поставянето на Breakpoints, изучаването на променливи и стака на извиквания, както и въвеждането на промени в променливи по време на изпълнение. С тези умения ще бъдете добре подготвени да идентифицирате и отстраните грешки.
Често задавани въпроси
Как да поставя Breakpoint в моя JavaScript файл?Просто кликнете върху номера на реда в желания ред от вашия код.
Какво да правя, ако моят Breakpoint не сработи?Проверете дали файла, в който е поставен Breakpoint-а, се зарежда, и се уверете, че няма презаписване на променливи при зареждането.
Как мога да премахна всички Breakpoints едновременно?Щракнете с десен бутон върху номера на реда на Breakpoint-а и изберете „Премахване на всички Breakpoints“.
Какво е Call Stack?Call Stack показва видимостта на вашата функция на външни извиквания, така че да може да видите къде е била извикана вашата функция.
Как мога да променя стойността на променлива по време на дебъгинга?Кликнете върху променливата в областта Scope, променете стойността и след това кликнете "Пуск", за да продължите изпълнението с новата стойност.
