Пет инструмента за отстраняване на грешки в JavaScript, които трябва да знаете

Гледате кода и не можете да разберете защо! Защо прави нещо неочаквано и като цяло, ако срокът не наближава, интересно. Въпреки това, всички тези изненади, във всеки случай, трябва да се изхвърлят.

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

Какви действия очаквате да извърши вашата програма?
Защо очаквате това от програмата?
Програмата прави ли това, което очаквате?

Ако не можете да отговорите на първите два въпроса, успех с копирането, но ако знаете какво очаквате да прави кодът и защо, има инструменти, които могат да ви помогнат да разберете дали кодът прави това, което трябва да прави. След като се убедите, че вашите очаквания по отношение на определен фрагмент от програмата са оправдани или сте успели да коригирате грешката, преминете към следващия фрагмент и го проверете. Ето някои полезни инструменти, които ще ви помогнат да разкриете грешките.

Проверка на стойностите на променливи

Нека започнем, извън основния списък с инструменти за отстраняване на грешки, с най-простия и очевиден. Командата console.log() може да бъде доста полезна за проверка на неща като променливи, декларирани с var и let, константи, декларирани с const, аргументи и обекти this. Тези данни са актуални, когато стойността се показва, но имайте предвид, че понякога конзолата на Chrome извежда данни, които са били актуализирани след стартиране на програмата. Внимавайте с данни, които са последвани от светлосиня икона с бяло „i“.

Браузър: Внимавайте с извеждане, последвано оте светлосиня икона с бяло "i". Тези данни може да са актуализирани след стартиране на програмата

#1: Инструменти за разработчици на Chrome - Дебъгер

По-надеждна алтернатива на използването на console.log() е програмата за отстраняване на грешки в Chrome. За да го използвате, добавете командата за отстраняване на грешки към реда на вашия код, където искате да прегледате стойностите на променливите. Запазете файла, след което отворете лентата с инструменти за програмисти на Chrome, например със следните команди:

Работа в браузъра: изпълнението ще спре на пауза при командата за отстраняване на грешки и можете да разгледате програмата

Използването на командата за отстраняване на грешки е подобно на добавяне на точка на прекъсване от панела Sources в браузъра, но основната разлика, която трябва да се отбележи, е, че точките на прекъсване са свързани с номерата на редовете. Да приемем, че сте задали точка на прекъсване на ред 20 и след това сте преработили кода и сте премахнали ред 8. Това, което беше на ред 20, сега завършва на ред 19 и трябва да преместите точката на прекъсване. Можете да научите повече за отстраняването на грешки в Chrome и различна полезна информация за този процес, като се обърнете към документацията.

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

Инструменти за разработчици на Chrome - Раздел Мрежа

#2: Инструменти за разработчици на React

Ако вашето приложение е базирано на React и трябва да проверите стойностите на свойствата или състоянията, трябва да разгледате разширението React Developer Tools за Chrome. Веднага ще стане най-добрият ви приятел.

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

Изпълнява се в браузъра: Разделът React показва стойности на свойства и състояния, ако съществуват за избрания елемент

#3: Отстраняване на грешки в кода на сървъра и проверка на възел

И така, вие сте сигурни, че програмата работи, че данните отиват на сървъра, но не знаете дали Node или Express маршрутизира и обработва заявката правилно. Ако използвате приложение, чийто изходен код не можете да видите, например, това е някакъв вид API на услуга на трета страна, тогава прочетете документацията. Ако сами разработвате и поддържате сървъра, тогава трябва да се запознаете с Node Inspect.

Node Inspect е подобен на инструментите за разработчици на Chrome, но е предназначен за код от страна на сървъра. Преди да използвате този инструмент, уверете се, че вашата версия на Node е поне 6.6, а вашата версия на Chrome е поне 55. Ако тези изисквания са изпълнени, отворете командния ред и изпълнете следната команда:

Код на сървъра за отстраняване на грешки: Разрешаване на програмата за отстраняване на грешки на възел

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

#4: Проверка на отговора на сървъра - пощальон

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

Postman е настолно приложение и трябва да се изтегли и инсталира. Тя ви позволява да изберете типа заявка (сред тях - GET, POST, PUT, PATCH, DELETE), да добавите крайната точка, от която се нуждаете, и ако е необходимо, след това данни за удостоверяване иизпрати заявка до сървъра. Отговорът на сървъра ще се появи в приложението в раздела Основно съдържание.

Работа в Postman: изберете типа заявка, въведете подробностите за крайната точка, данните за удостоверяване и щракнете върху бутона Изпрати. Отговорът на сървъра ще се появи в раздела Body

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

#5: Синтактични грешки и Webpack

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

Работа с Webpack: Ако Webpack не може да компилира кода, той ще изведе грешка и ще ви каже точно къде, до знак в низа, се е случило.

Резюме: какво да направите, ако грешката не изчезне

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