జావాస్క్రిప్ట్‌లో డీబగ్గింగ్: బ్రౌజర్ కన్సోల్‌కి లాగిన్ అవుతోంది

ఫ్రంట్-ఎండ్ అప్లికేషన్‌లను డీబగ్గింగ్ చేయడానికి వెబ్ బ్రౌజర్ కన్సోల్ అత్యంత విస్తృతంగా ఉపయోగించే టూల్స్‌లో ఒకటి. కన్సోల్ API డెవలపర్‌లకు లోపాలను మరియు సందేశాలను లాగ్ చేయగల సామర్థ్యాన్ని అందిస్తుంది.

console.log () కన్సోల్ API లో సాధారణంగా ఉపయోగించే పద్ధతి, కానీ మీ వర్క్‌ఫ్లో మీరు ఉపయోగించే ఇతర పద్ధతులు కూడా ఉన్నాయి. ఈ గైడ్ మీ డీబగ్గింగ్ వర్క్‌ఫ్లో మెరుగుపరచడానికి మీరు ఉపయోగించే విభిన్న వెబ్ బ్రౌజర్ కన్సోల్ పద్ధతులను చూపుతుంది.

---

---

లాగింగ్ ఎందుకు ముఖ్యం?

వెబ్ బ్రౌజర్ కన్సోల్‌కి లాగిన్ చేయడం అనేది ఫ్రంట్ ఎండ్ లేదా జావాస్క్రిప్ట్ ఆధారిత అప్లికేషన్‌లను డీబగ్గింగ్ చేయడానికి ఉత్తమమైన పద్ధతుల్లో ఒకటి.

సంబంధిత: 6 జావాస్క్రిప్ట్ ఫ్రేమ్‌వర్క్స్ వర్త్ లెర్నింగ్

చాలా ఆధునిక వెబ్ బ్రౌజర్‌లు కన్సోల్ API కి మద్దతు ఇస్తాయి, ఇది డెవలపర్‌లకు సులభంగా అందుబాటులో ఉంటుంది. బ్రౌజర్ డీబగ్గింగ్ కన్సోల్‌కు యాక్సెస్ అందించడానికి కన్సోల్ ఆబ్జెక్ట్ బాధ్యత వహిస్తుంది. బ్రౌజర్‌లలో అమలు భిన్నంగా ఉండవచ్చు కానీ అన్ని ఆధునిక బ్రౌజర్‌లలో చాలా పద్ధతులు పని చేస్తాయి.

చిట్కా : మీ బ్రౌజర్ కన్సోల్ ఈ గైడ్‌లో చర్చించిన అన్ని కోడ్‌లను అమలు చేయగలదు. నొక్కండి F12 Chrome లేదా Firefox లో బ్రౌజర్ డెవలపర్‌ల సాధనాలను తెరవడానికి మీ కీబోర్డ్‌లో.

స్ట్రింగ్ సందేశాలను లాగిన్ చేస్తోంది

అత్యంత సాధారణ కన్సోల్ పద్ధతుల్లో ఒకటి console.log () . ఇది వెబ్ కన్సోల్‌కు స్ట్రింగ్ మెసేజ్ లేదా కొంత విలువను అందిస్తుంది. సాధారణ విలువలు లేదా స్ట్రింగ్ సందేశాల కోసం, ది console.log () పద్ధతి బహుశా ఉపయోగించడానికి ఉత్తమ ఎంపిక.

---

---

వాల్‌పేపర్ విండోస్ 10 గా యానిమేటెడ్ gif ని సెట్ చేయండి

అవుట్‌పుట్ చేయడానికి a హలో వరల్డ్ సందేశం, మీరు ఈ క్రింది వాటిని ఉపయోగించవచ్చు.

console.log(`Hello World`);

యొక్క మరొక ప్రత్యేక లక్షణం console.log () పద్ధతి అనేది DOM మూలకాల యొక్క అవుట్‌పుట్ లేదా వెబ్‌సైట్ యొక్క భాగాన్ని స్ట్రక్చర్‌ని ముద్రించే సామర్ధ్యం, ఉదాహరణకు, బాడీ ఎలిమెంట్ యొక్క స్ట్రక్చర్‌ని అవుట్‌పుట్ చేయడం మరియు దాని లోపల ఉన్నవన్నీ కింది వాటిని ఉపయోగిస్తాయి.

---

---

console.log(document.body)

అవుట్‌పుట్ అనేది HTML ట్రీగా DOM మూలకాల సమాహారం.

ఇంటరాక్టివ్ జావాస్క్రిప్ట్ ఆబ్జెక్ట్‌లను లాగిన్ చేస్తోంది

ది console.dir () జావాస్క్రిప్ట్ ఆబ్జెక్ట్‌ల ఇంటరాక్టివ్ లక్షణాలను లాగ్ చేయడానికి ఈ పద్ధతి ఉపయోగించబడుతుంది. ఉదాహరణకు, వెబ్‌పేజీలోని DOM మూలకాలను వీక్షించడానికి మీరు దీన్ని ఉపయోగించవచ్చు.

యొక్క సాధారణ అవుట్‌పుట్ console.dir () పద్ధతి JSON ఆకృతిలో పేర్కొన్న జావాస్క్రిప్ట్ ఆబ్జెక్ట్ యొక్క అన్ని లక్షణాలను కలిగి ఉంటుంది. HTML పేజీలోని అన్ని మూలకాల లక్షణాలను ముద్రించడానికి క్రింది పద్ధతిని ఉపయోగించండి:

console.dir(document.body)

వ్యక్తీకరణలను మూల్యాంకనం చేయడం

యూనిట్ టెస్టింగ్ నుండి మీరు నొక్కి చెప్పే పద్ధతులు మీకు బాగా తెలిసి ఉండవచ్చు — అలాగే console.assert () పద్ధతి ఇదే పద్ధతిలో పనిచేస్తుంది. ఉపయోగించడానికి console.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 () పట్టిక ఆకృతిలో డేటాను ప్రదర్శించే పద్ధతి. పట్టిక రూపంలో ప్రదర్శించడానికి మంచి అభ్యర్థులు శ్రేణులు లేదా ఆబ్జెక్ట్ డేటాను కలిగి ఉంటారు.

గమనిక : ఫైర్‌ఫాక్స్ వంటి కొన్ని బ్రౌజర్‌లు గరిష్టంగా 1,000 అడ్డు వరుసల పరిమితిని కలిగి ఉంటాయి 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()
}

మీ బ్రౌజర్ కన్సోల్‌లో, కాల్ చేయండి లేదా ట్రిగ్గర్ చేయండి ఫంక్షన్ వన్ () మరియు లాస్ట్ ఇన్ ఫస్ట్ అవుట్ ఆర్డర్ (LIFO) లో ముద్రించిన ఫంక్షన్ కాల్‌ల స్టాక్ ట్రేస్ మీకు లభిస్తుంది ఎందుకంటే ఇది స్టాక్.

సమయ కార్యక్రమం అమలు

మీ ప్రోగ్రామ్‌లో ఎగ్జిక్యూట్ చేయడానికి ఒక ఆపరేషన్ ఎంత సమయం పడుతుందో, మీరు దాన్ని ఉపయోగించవచ్చు console.time () పద్ధతి console.time () సాధారణంగా కలిపి ఉపయోగిస్తారు console.timeEnd () టైమర్‌ను ముగించడానికి రెండోదాన్ని ఉపయోగించే పద్ధతి.

మీరు ప్రతి వెబ్‌పేజీకి 10,000 టైమర్‌లను అమలు చేయవచ్చు, మీ టైమర్‌లను సరిగ్గా లేబుల్ చేయడం యొక్క ప్రాముఖ్యతను హైలైట్ చేస్తుంది.

లూప్ 1 నుండి 50,000 సంఖ్యల ద్వారా వెళ్ళడానికి ఎంత సమయం పడుతుంది, మీరు టైమర్‌ని ఈ క్రింది విధంగా ఉపయోగించవచ్చు.

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


లెక్కింపు

ది console.count () ఒక ప్రోగ్రామ్‌లో ఎన్ని సార్లు ఫంక్షన్ లేదా కొంత కోడ్‌ని పిలిచారో ట్రాక్ చేయడానికి ఈ పద్ధతి ఉపయోగించబడుతుంది. ఉదాహరణకు, ఒక లూప్ ఎన్నిసార్లు అమలు చేయబడిందో మేము ఈ క్రింది విధంగా ట్రాక్ చేయవచ్చు:

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

లాగ్ సందేశాలను సమూహం చేయడం

టైమర్ పద్ధతి వలె, ది కన్సోల్. గ్రూప్ () , మరియు console.groupEnd () పద్ధతులు సాధారణంగా జతలలో ఉపయోగించబడతాయి.

మీ లాగ్ సందేశాలను మెరుగ్గా నిర్వహించడానికి సమూహ పద్ధతి మీకు సహాయపడుతుంది. ఉదాహరణకు, మేము ఈ క్రింది విధంగా లేబుల్ హెచ్చరికలతో హెచ్చరిక సందేశాల సమూహాన్ని సృష్టించవచ్చు.

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

హెచ్చరిక సమూహంలోని రెండు సందేశాలు దిగువ అవుట్‌పుట్‌లో చూసినట్లుగా దృశ్యమానంగా వర్గీకరించబడ్డాయి.

కన్సోల్‌ను క్లియర్ చేస్తోంది

చివరగా కానీ, మీ బ్రౌజర్ కన్సోల్‌లో లాగ్ సందేశాలను క్లియర్ చేయడానికి ఇక్కడ అనేక మార్గాలు ఉన్నాయి.

ఉపయోగించడానికి కన్సోల్.క్లియర్ () కింది విధంగా పద్ధతి.

console.clear()

మీరు బ్రౌజర్ కీబోర్డ్ సత్వరమార్గాలను ఉపయోగించి బ్రౌజర్ కన్సోల్‌ని కూడా క్లియర్ చేయవచ్చు.

గూగుల్ క్రోమ్ : Ctrl + L

ఫైర్‌ఫాక్స్ : Ctrl + Shift + L

బ్రౌజర్ కన్సోల్‌ను పూర్తి స్థాయిలో ఉపయోగించడం

ఫ్రంట్ ఎండ్ అప్లికేషన్‌లను డీబగ్ చేయడంలో మీకు సహాయపడటానికి అందుబాటులో ఉన్న వివిధ వెబ్ బ్రౌజర్ కన్సోల్ పద్ధతులను ఈ గైడ్ మీకు చూపించింది. కన్సోల్ API చాలా తేలికైనది, నేర్చుకోవడం సులభం మరియు చాలా ఆధునిక బ్రౌజర్‌లలో విస్తృతంగా మద్దతు ఇస్తుంది.

నా విండోస్ 10 ఎందుకు క్రాష్ అవుతూనే ఉంది

మీ తదుపరి ప్రాజెక్ట్‌లో CAPTCHA ధ్రువీకరణ చేయండి మరియు మీ కొత్త డీబగ్గింగ్ నైపుణ్యాలను పరీక్షించండి!

షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ HTML, CSS మరియు JavaScript ఉపయోగించి CAPTCHA ధ్రువీకరణ ఫారమ్‌ను సృష్టించండి

CAPTCHA ధ్రువీకరణతో మీ వెబ్‌సైట్‌లను భద్రపరచండి.

తదుపరి చదవండి సంబంధిత అంశాలు

• ప్రోగ్రామింగ్
• వెబ్ అభివృద్ధి
• జావాస్క్రిప్ట్

రచయిత గురుంచి వెళ్లడం మంచిది(36 కథనాలు ప్రచురించబడ్డాయి)

Mwiza వృత్తి ద్వారా సాఫ్ట్‌వేర్‌ను అభివృద్ధి చేస్తుంది మరియు Linux మరియు ఫ్రంట్-ఎండ్ ప్రోగ్రామింగ్‌పై విస్తృతంగా రాస్తుంది. అతని అభిరుచులలో కొన్నింటిలో చరిత్ర, ఆర్థిక శాస్త్రం, రాజకీయాలు & ఎంటర్‌ప్రైజ్-ఆర్కిటెక్చర్ ఉన్నాయి.

Mwiza Kumwenda నుండి మరిన్ని

మా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి

టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!

సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి