Home-theater-designers
Конзола веб прегледача је један од најчешће коришћених алата за отклањање грешака у апликацијама са предње стране. АПИ за конзолу пружа програмерима могућност решавања грешака и порука дневника.
цонсоле.лог () је вероватно најчешће коришћен метод у АПИ -ју конзоле, али постоје и друге методе које можете користити у свом току рада. Овај водич вам приказује различите методе конзоле веб прегледача које можете користити за побољшање тока рада за отклањање грешака.
Зашто је евидентирање важно?
Пријављивање на конзолу веб прегледача један је од најбољих метода за отклањање грешака у апликацијама са предње стране или на ЈаваСцрипт-у.
Повезано: 6 ЈаваСцрипт оквира вредних учења
Већина савремених веб прегледача подржава АПИ конзоле, што га чини лако доступним програмерима. Објекат конзоле је одговоран за омогућавање приступа конзоли за отклањање грешака у прегледачу. Имплементација може бити различита међу прегледачима, али већина метода ће радити у свим модерним прегледачима.
Савет : Ваша конзола прегледача може покренути сав код о којем се говори у овом водичу. Притисните Ф12 на тастатури да бисте отворили алате програмера прегледача у Цхроме -у или Фирефок -у.
Записивање низова порука
Један од најчешћих метода конзоле је цонсоле.лог () . Он једноставно шаље стринг поруку или неку вредност на веб конзолу. За једноставне вредности или стринг поруке, цонсоле.лог () метода је вероватно најбоља опција за употребу.
могу ли да користим пс3 игре на пс4
За излаз а Здраво Свете поруку, можете користити следеће.
console.log(`Hello World`); Још једна посебна карактеристика цонсоле.лог () метода је могућност штампања излаза ДОМ елемената или структуре дела веб локације, на пример, за исписивање структуре елемента боди и све што се налази унутар њега користи следеће.
console.log(document.body) Излаз је збирка ДОМ елемената као ХТМЛ стабло.
Евидентирање интерактивних ЈаваСцрипт објеката
Тхе цонсоле.дир () метода се користи за евидентирање интерактивних својстава ЈаваСцрипт објеката. На пример, можете га користити за преглед ДОМ елемената на веб страници.
Типичан излаз цонсоле.дир () метода се састоји од свих својстава наведеног ЈаваСцрипт објекта у ЈСОН формату. Користите доњи метод за штампање својстава свих елемената у телу ХТМЛ странице:
console.dir(document.body) Вредновање израза
Можда сте упознати са методама тврђења из јединичног тестирања - па цонсоле.ассерт () метода ради на сличан начин. Користити цонсоле.ассерт () метод за процену израза или стања.
Када метода ассерт не успе, конзола штампа поруку о грешци; у супротном ништа не штампа. Помоћу доњег кода процените да ли је старост особе већа од 18 година:
let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';
console.assert( yourAge > ageLimit, assertFailMessage); Горња тврдња не успева и према томе се штампа порука о грешци.
Евидентирање података у табелама
Користити конзола сто() начин приказивања података у табеларном формату. Добри кандидати за приказ у облику табеле укључују низове или податке о објектима.
Белешка : Неки прегледачи, попут Фирефока, имају максимално ограничење од 1.000 редова који се могу приказати помоћу конзола сто() метода.
Под претпоставком да имате следећи низ објеката аутомобила:
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('error message'); Упозорења
Да бисте одштампали упозорења, користите следеће. Као и код већине сценарија, поруке упозорења су приказане наранџасто:
console.warn('warning message');Инфо
Да бисте одштампали опште информације на конзоли, користите цонсоле.инфо () метода:
console.info('general info message') Лако је филтрирати или пронаћи поруке у конзоли прегледача ако су правилно категорисане.
Праћење тока програма
Користити цонсоле.траце () метод штампања стека тока тока или извођења програма. Ово је веома корисна функција за отклањање грешака јер штампа редослед којим се функције извршавају у вашем програму.
Да бисте видели цонсоле.траце () метод у акцији, можете креирати три функције (према доле) и поставити траг стека у једну од функција.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}У конзоли прегледача позовите или активирајте фунцтионОне () и добићете траг стека позива функција одштампаних у Ласт Ин Фирст Оут Ордер (ЛИФО) јер је то стек.
Време извршења програма
Да бисте одредили колико времена операцији треба да се изврши у вашем програму, можете користити цонсоле.тиме () метода. цонсоле.тиме () се обично користи заједно са цонсоле.тимеЕнд () метод где се овај последњи користи за прекид мерача времена.
По једној веб страници можете покренути до 10.000 тајмера, што наглашава важност правилног означавања ваших тајмера.
Да бисте одредили колико времена фор петљи треба да прође кроз бројеве од 1 до 50.000, можете користити тајмер на следећи начин.
console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');
Бројање
Тхе цонсоле.цоунт () метода се користи за праћење броја позива функције или неког дела кода у програму. На пример, можемо пратити број извршавања фор петље на следећи начин:
for(i=0; i<4; i++ ){
console.count();
}Груписање порука дневника
Баш као и тајмер метода, цонсоле.гроуп () , и цонсоле.гроупЕнд () методе се обично користе у паровима.
Метода групе помаже вам да боље организујете своје поруке дневника. На пример, можемо креирати групу порука упозорења са ознакама упозорења на следећи начин.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()Две поруке унутар групе упозорења визуелно су категорисане као што се види у доњем тексту.
Брисање конзоле
И на крају, али не и најмање важно, ево неколико начина на које можете избрисати поруке дневника у конзоли прегледача.
Користити цонсоле.цлеар () метод на следећи начин.
console.clear() Такође можете очистити конзолу прегледача помоћу пречица на тастатури прегледача.
Гоогле Цхроме : Цтрл + Л.
Фирефок : Цтрл + Схифт + Л.
Коришћење конзоле прегледача до краја
Овај водич вам је показао неке од различитих доступних метода конзоле веб прегледача који ће вам помоћи у отклањању грешака у апликацијама са предње стране. АПИ за конзолу је веома лаган, лак за учење и широко подржан у већини модерних прегледача.
скипе поруке се приказују у погрешном редоследу
Направите ЦАПТЦХА валидацију за свој следећи пројекат и тестирајте своје нове вештине отклањања грешака!
Објави Објави Твеет Емаил Направите ЦАПТЦХА образац за проверу користећи ХТМЛ, ЦСС и ЈаваСцриптЗаштитите своје веб локације помоћу ЦАПТЦХА валидације.
Прочитајте следеће Повезане теме- Програмирање
- Веб Девелопмент
- ЈаваСцрипт
Мвиза развија софтвер по професији и опсежно пише о Линук-у и фронт-енд програмирању. Нека од његових интересовања укључују историју, економију, политику и архитектуру предузећа.
Још од Мвиза КумвендаПретплатите се на наш билтен
Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!
Кликните овде да бисте се претплатили