Отстраняване на грешки в JavaScript: Влизане в конзолата на браузъра

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

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

Защо регистрирането е важно?

Влизането в конзолата на уеб браузъра е един от най-добрите методи за отстраняване на грешки в интерфейс или базирани на JavaScript приложения.

Свързани: 6 JavaScript рамки, които си струва да се научат

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

Бакшиш : Конзолата на вашия браузър може да изпълнява целия код, обсъден в това ръководство. Натиснете F12 на клавиатурата, за да отворите инструментите на разработчиците на браузъра в Chrome или Firefox.

Регистриране на низови съобщения

Един от най -често срещаните конзолни методи е console.log () . Той просто извежда низово съобщение или някаква стойност към уеб конзолата. За прости стойности или низови съобщения, console.log () методът е може би най -добрият вариант за използване.

как да намаля размера на файла на jpeg снимка?

За извеждане на a Здравей свят съобщение, можете да използвате следното.

console.log(`Hello World`);

Друга особеност на console.log () Методът е способността да се отпечата изхода на DOM елементи или структурата на част от уебсайт, например, за да се изведе структурата на елемента body и всичко вътре в него да използва следното.

console.log(document.body)

Резултатът е колекция от DOM елементи като HTML дърво.

Регистриране на интерактивни JavaScript обекти

The console.dir () метод се използва за регистриране на интерактивни свойства на JavaScript обекти. Например, можете да го използвате, за да видите DOM елементите в уеб страница.

Типичният изход на console.dir () метод се състои от всички свойства на посочения JavaScript обект във формат JSON. Използвайте метода по -долу, за да отпечатате свойствата на всички елементи в тялото на HTML страница:

console.dir(document.body)

Оценяване на изрази

Може да сте запознати с методите за утвърждаване от единичното тестване - добре console.assert () методът работи по подобен начин. Използвай console.assert () метод за оценка на израз или състояние.

Когато методът assert се провали, конзолата отпечатва съобщение за грешка; в противен случай не отпечатва нищо. Използвайте кода по -долу, за да прецените дали възрастта на човек е по -голяма от 18:

let ageLimit = 18;  
let yourAge = 12;  
const assertFailMessage = 'You have to be older than 18 years of age';  
  
console.assert( yourAge > ageLimit, assertFailMessage);

Горното твърдение се проваля и съответно се отпечатва съобщение за грешка.

Регистриране на данни в таблици

Използвай console.table () метод за показване на данни в табличен формат. Добрите кандидати за показване под формата на таблица включват масиви или обектни данни.

Забележка : Някои браузъри, като Firefox, имат максимално ограничение от 1000 реда, които могат да се показват с console.table () метод.

Ако приемем, че имате следния масив от автомобилни обекти:

 let cars = [  
 {'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},  
 {'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}  
]

Можете да покажете масива по -горе в таблица, като използвате метода по -долу:

console.table(cars);

Регистриране на съобщения по категория

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

Грешки

За конкретно отпечатване на съобщения за грешка в конзолата с помощта на console.error () метод, съобщенията, свързани с грешки, се показват с червен шрифт.

console.error('error message');

Предупреждения

За да отпечатате предупреждения, използвайте следното. Както при повечето сценарии, предупредителните съобщения се показват в оранжево:

console.warn('warning message');

Информация

За да отпечатате обща информация в конзолата, използвайте console.info () метод:

console.info('general info message')

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

Проследяване на потока на програмата

Използвай console.trace () метод за отпечатване на следа от стека на потока или изпълнението на програмата. Това е много полезна функция за отстраняване на грешки, тъй като отпечатва реда, в който функциите се изпълняват във вашата програма.

За да видите console.trace () метод в действие, можете да създадете три функции (както е посочено по -долу) и да поставите трасиране на стека в една от функциите.

function functionOne(){  
 functionTwo()  
}  
function functionTwo(){  
 functionThree()  
}  
function functionThree(){  
 console.trace()  
}

В конзолата на браузъра си обадете се или задействайте functionOne () и ще получите следа от стека на извикванията на функциите, отпечатани в последния ред в първи изход (LIFO), защото това е стек.

Време за изпълнение на програмата

За да определите колко време отнема дадена операция за изпълнение във вашата програма, можете да използвате console.time () метод. console.time () обикновено се използва заедно с console.timeEnd () метод, при който последният се използва за прекратяване на таймера.

Можете да имате до 10 000 таймера, работещи на уеб страница, подчертавайки важността на правилното етикетиране на вашите таймери.

За да определите времето, през което цикълът for преминава през числата от 1 до 50 000, можете да използвате таймера, както следва.

console.time('loop timer 2');  
for(i=1; i<50001; i++){  
}  
console.timeEnd('loop timer 2');

Преброяване

The console.count () Методът се използва за проследяване на броя пъти, когато функция или някаква част от кода е била извикана в програма. Например, можем да следим колко пъти се изпълнява цикъл for, както следва:

 for(i=0; i<4; i++ ){  
 console.count();  
}

Групиране на дневници

Точно като метода на таймера, console.group () , и console.groupEnd () методите обикновено се използват по двойки.

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

console.group('warnings')  
 console.warn('another warning');  
 console.warn('This is a warning')  
console.groupEnd()

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

Изчистване на конзолата

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

Използвай console.clear () метод, както следва.

console.clear()

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

Google Chrome : Ctrl + L

Firefox : Ctrl + Shift + L

Използване на конзолата на браузъра докрай

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

как да настроите wii

Направете CAPTCHA валидиране от следващия си проект и изпробвайте новите си умения за отстраняване на грешки!

Дял Дял Туит електронна поща Създайте формуляр за проверка на CAPTCHA, използвайки HTML, CSS и JavaScript

Защитете уебсайтовете си с валидиране на CAPTCHA.

Прочетете Напред Свързани теми

Програмиране
Уеб разработка
JavaScript

За автора Добре за тръгване(36 статии са публикувани)

Mwiza разработва софтуер по професия и пише широко за Linux и front-end програмиране. Някои от интересите му включват история, икономика, политика и корпоративна архитектура.

Още от Mwiza Kumwenda

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате