Как да спрете да използвате console.log () и да започнете да използвате грешката на браузъра си

Когато започнах пътя си да стана софтуерен разработчик, определено попаднах на справедливия си дял от неравности по пътя. Една от най-често срещаните борби, пред които са изправени повечето нови разработчици, е отстраняване на грешки. Отначало си мислех, че открих светия граал, когато разбрах, че мога да отворя конзолата в хром и console.log () от стойностите си, за да открия къде са моите грешки. Това се оказа силно неефективно. В името на хумора, ето ви няколко любими случая на употреба:

console.log („Обща цена:“, обща) // В опит да се види дали стойността е запазена

console.log („Тук“) // Ако изпълнението на програмата ми достигне определена функция

Мисля, че повечето разработчици започват да осъзнават, че това НЕ е как всъщност трябва да отстранявате грешки в програмите си. Трябва да има по-добър начин!

За щастие има инструменти за отстраняване на грешки в браузъра ви. По-конкретно, ще обсъдя инструментите за разработчици на Chrome.

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

За да следвате заедно с този урок, ще трябва да използвате примерно хранилище от код, което създадох. Натисни тук. (Може да отнеме минута за зареждане)

Стъпка 1: Възпроизведете бъга

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

  1. В нашия случай ще използваме калкулатор за бъги тип. Ако не сте отворили примерния код. Моля, направете го тук.
  2. Въведете 12 за „Вход 1“
  3. Въведете 8 за „Вход 2“
  4. Въведете 10 за „Entree 3“
  5. Въведете 10 за „Данък“
  6. Изберете 20% за „Съвет“
  7. Кликнете върху Изчисляване на сметката. Общият трябва да бъде 39,6, но получаваме много по-различен резултат. Вместо това се оказва, че имаме 14105.09 ... печалби!

Стъпка 2: Научете се да използвате панела с източници

За да отстраните грешката в Chrome, трябва да свикнете да използвате DevTools. За да отворите инструментите за разработчици на Chrome, натиснете Command + Option + I (Mac) или Control + Shift + I (Linux).

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

Стъпка 3: Настройка на първата точка на прекъсване

Преди да ви покажа как да зададете първата си точка на прекъсване, нека първо демонстрирам какво имам предвид с помощта на console.log (). Ясно е, че при изпълнението на програмата ни се случва нещо с изчисляването на сумата. Човек може да отстрани грешката в програмата, като направи нещо подобно:

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

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

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

В екрана за отстраняване на грешки разширете изгледа на „Точки за прекъсване на слушателя на събития“. Оттам разгънете „Мишка“. След това поставете отметка на бутона „щракнете“.

Сега, когато щракнете върху бутона Изчислите сметката, отладникът ще спре изпълнението на първия ред на първата функция „onClick ()“. Ако грешката за отстраняване на грешки е някъде другаде, натиснете бутона за възпроизвеждане и грешката ще премине към нея.

Стъпка 4: Преминаване през вашия код

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

Стъпка в това ще позволи всеки ред код да се изпълнява един по един във всяка функция.

Стъпка в следващото обаждане на функция

Стъпка над това ще позволи прескачане на цели функции, за които е известно, че работят.

Стъпка над следващото обаждане на функция

Ето един пример за това, че съм преминал през кода си. В раздела за обхвата в дясно се показват стойностите ми за първите три начина.

Стъпка 5: Задайте точка на прекъсване на линията на кода

Еха! Да можеш да преминеш през кода си е невероятно, но някак си обемисто и тромаво нали? Обикновено искам да знам само стойностите на определени места. Ами решението за този проблем е точката на прекъсване на линията на кода.

Автори Забележка: Точката на прекъсване на линията на кода беше причината, поради която спрях да използва console.log () в полза на Chrome Developer Tools

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

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

Както можете да видите, субтоталната ми стойност се показва, както поисках, до стойност „10812“. Стойностите на моите вписвания също се показват в областта на обхвата и като наслагване на самия код.

Хм ... мисля, че може би съм разбрал бъга. Структуриране на никого?

Нека да зададем някои изрази за гледане, за да се уверим, че.

Стъпка 6: Създайте наблюдателни изрази

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

Изразът на часовник ще даде повече информация за всяка дадена променлива или израз във вашия код.

За да определите стойностите на „watch“, щракнете върху панела за гледане в самия връх и щракнете върху символа +, след като се отвори. Тук можете да въведете променливи имена или други изрази.

За демонстрацията ще настроя часовник за стойността на първото си вписване и типа на тази стойност.

Аха! Мисля, че открих проблема. Изглежда, че първото ми вписване се съхранява като низ! Изглежда идва от това как придобивам самата стойност. Може би, виновникът е querySelector (). Няколко други стойности също могат да бъдат постигнати. Нека допълнително отстраним грешката след това да преминем към поправяне на нашия код в DevTools.

Стъпка 7: Поправете кода си

След допълнителен преглед querySelector () определено е виновник!

И така, как да поправим това? Ами можем просто да принудим низовете в числови стойности, използвайки например Number (getEntree1 ()), както в ред 74.

За да реално редактирате кода, ще трябва да отидете панела „елементи“ вляво от „източници“. Ако не можете да видите кода на JavaScript, тогава трябва да разгънете скрипта. Оттам кликнете с десния бутон върху кода и изберете „редактиране като html“.

Ако използвате работно пространство, записването на кода ще бъде лесно и видимо мигновено. Ако не, ще трябва да запазите локално копие на уеб страницата с помощта на команда + s (mac) или control + s (linux).

От там можете да отворите локалното си копие и да видите промените.

Voila!

Методологията за отстраняване на грешки бе приета чрез developers.google.com с вдъхновение от статия Първи стъпки с отстраняване на грешки в JavaScript в Chrome DevTools от Kayce Basques.
Демо код: https://github.com/paragzaveri/chromeDevTools

Препоръчани ресурси на DDI:

  • Пълният JavaScript курс 2019: Създайте реални проекти!