جاوا اسکرپٹ میں ڈیبگنگ: براؤزر کنسول میں لاگ ان کرنا۔

ویب براؤزر کنسول فرنٹ اینڈ ایپلی کیشنز کو ڈیبگ کرنے کے لیے بڑے پیمانے پر استعمال ہونے والے ٹولز میں سے ایک ہے۔ کنسول API ڈویلپرز کو غلطیوں سے نمٹنے اور پیغامات کو لاگ کرنے کی صلاحیت فراہم کرتا ہے۔

console.log () شاید کنسول API میں سب سے زیادہ استعمال ہونے والا طریقہ ہے ، لیکن دوسرے طریقے بھی ہیں جنہیں آپ اپنے ورک فلو میں استعمال کرسکتے ہیں۔ یہ گائیڈ آپ کو ویب براؤزر کنسول کے مختلف طریقے دکھاتا ہے جنہیں آپ اپنے ڈیبگنگ ورک فلو کو بہتر بنانے کے لیے استعمال کر سکتے ہیں۔

---

---

لاگنگ کیوں ضروری ہے؟

ویب براؤزر کنسول میں لاگ ان کرنا فرنٹ اینڈ یا جاوا اسکرپٹ پر مبنی ایپلی کیشنز کو ڈیبگ کرنے کے بہترین طریقوں میں سے ایک ہے۔

متعلقہ: 6 جاوا اسکرپٹ فریم ورکس سیکھنے کے قابل۔

زیادہ تر جدید ویب براؤزر کنسول API کی حمایت کرتے ہیں ، جس سے یہ ڈویلپرز کے لیے آسانی سے دستیاب ہوتا ہے۔ کنسول آبجیکٹ براؤزر کے ڈیبگنگ کنسول تک رسائی فراہم کرنے کے لیے ذمہ دار ہے۔ نفاذ براؤزرز میں مختلف ہوسکتا ہے لیکن زیادہ تر طریقے تمام جدید براؤزرز میں کام کریں گے۔

ٹپ : آپ کا براؤزر کنسول اس گائیڈ میں زیر بحث تمام کوڈ چلا سکتا ہے۔ دبائیں ایف 12۔ اپنے کی بورڈ پر براؤزر ڈویلپرز کے ٹولز کو کروم یا فائر فاکس میں کھولیں۔

سٹرنگ پیغامات کو لاگ کرنا۔

کنسول کے سب سے عام طریقوں میں سے ایک ہے۔ console.log () . یہ صرف ویب کنسول میں سٹرنگ میسج یا کچھ ویلیو آؤٹ پٹ کرتا ہے۔ سادہ اقدار یا سٹرنگ پیغامات کے لیے ، console.log () طریقہ شاید استعمال کرنے کا بہترین آپشن ہے۔

---

---

اپنے آئی پی ایڈریس کو دھوکہ دینے کا طریقہ

آؤٹ پٹ کرنا a ہیلو ورلڈ۔ پیغام ، آپ مندرجہ ذیل استعمال کرسکتے ہیں۔

console.log(`Hello World`);

کی ایک اور خاص خصوصیت۔ console.log () طریقہ DOM عناصر کی آؤٹ پٹ یا ویب سائٹ کے کسی حصے کی ساخت کو پرنٹ کرنے کی صلاحیت ہے ، مثال کے طور پر ، جسمانی عنصر کی ساخت اور اس کے اندر کی ہر چیز مندرجہ ذیل استعمال کرتی ہے۔

---

---

console.log(document.body)

آؤٹ پٹ ایک HTML ٹری کے طور پر DOM عناصر کا مجموعہ ہے۔

انٹرایکٹو جاوا اسکرپٹ آبجیکٹ کو لاگ کرنا۔

کی کنسول ڈائر () طریقہ جاوا اسکرپٹ اشیاء کی انٹرایکٹو خصوصیات کو لاگ کرنے کے لیے استعمال کیا جاتا ہے۔ مثال کے طور پر ، آپ اسے ویب صفحے میں DOM عناصر کو دیکھنے کے لیے استعمال کر سکتے ہیں۔

کی عام پیداوار۔ کنسول ڈائر () طریقہ JSON فارمیٹ میں مخصوص جاوا اسکرپٹ آبجیکٹ کی تمام خصوصیات پر مشتمل ہے۔ ایچ ٹی ایم ایل صفحہ کے تمام عناصر کی خصوصیات کو پرنٹ کرنے کے لیے ذیل کا طریقہ استعمال کریں:

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 () ٹیبلر فارمیٹ میں ڈیٹا دکھانے کا طریقہ ٹیبل فارم میں ظاہر کرنے کے لئے اچھے امیدواروں میں صفیں یا آبجیکٹ ڈیٹا شامل ہیں۔

نوٹ : کچھ براؤزر ، جیسے فائر فاکس ، کی زیادہ سے زیادہ حد 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('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) میں چھپی ہوئی فنکشن کالز کا اسٹیک ٹریس ملے گا کیونکہ یہ اسٹیک ہے۔

ٹائمنگ پروگرام پر عملدرآمد۔

آپ کے پروگرام میں آپریشن کرنے میں کتنا وقت لگتا ہے ، آپ استعمال کر سکتے ہیں کنسول ٹائم () طریقہ کنسول ٹائم () عام طور پر کے ساتھ مل کر استعمال کیا جاتا ہے۔ کنسول ٹائم اینڈ () طریقہ جہاں مؤخر الذکر کو ٹائمر کو ختم کرنے کے لیے استعمال کیا جاتا ہے۔

آپ فی ویب پیج پر 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.group () ، اور console.groupEnd () طریقے عام طور پر جوڑوں میں استعمال ہوتے ہیں۔

گروپ کا طریقہ آپ کو اپنے لاگ پیغامات کو بہتر طریقے سے ترتیب دینے میں مدد کرتا ہے۔ مثال کے طور پر ، ہم انتباہی پیغامات کا ایک گروپ لیبل انتباہ کے ساتھ تشکیل دے سکتے ہیں۔

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

انتباہی گروپ کے اندر دو پیغامات کو ضعف سے درجہ بندی کیا گیا ہے جیسا کہ ذیل میں آؤٹ پٹ میں دیکھا گیا ہے۔

کنسول صاف کرنا

آخری لیکن کم از کم ، یہاں کئی طریقے ہیں جن کے ذریعے آپ اپنے براؤزر کنسول میں لاگ پیغامات کو صاف کر سکتے ہیں۔

کا استعمال کرتے ہیں console.clear () طریقہ مندرجہ ذیل ہے.

console.clear()

آپ براؤزر کنسول کو براؤزر کی بورڈ شارٹ کٹ کے ذریعے بھی صاف کر سکتے ہیں۔

گوگل کروم : Ctrl + L

فائر فاکس : Ctrl + Shift + L۔

براؤزر کنسول کو مکمل طور پر استعمال کرنا۔

اس گائیڈ نے آپ کو فرنٹ اینڈ ایپلی کیشنز کو ڈیبگ کرنے میں مدد کے لیے کچھ مختلف دستیاب ویب براؤزر کنسول طریقے دکھائے ہیں۔ کنسول API بہت ہلکا پھلکا ، سیکھنے میں آسان اور زیادہ تر جدید براؤزرز میں وسیع پیمانے پر تعاون یافتہ ہے۔

میرے بیٹری کے آئیکن میں ونڈوز 10 غائب ہے۔

کیپچا کی توثیق کو اپنا اگلا پروجیکٹ بنائیں اور اپنی نئی ڈیبگنگ مہارت کو آزمائیں!

بانٹیں بانٹیں ٹویٹ ای میل۔ ایچ ٹی ایم ایل ، سی ایس ایس ، اور جاوا اسکرپٹ کا استعمال کرتے ہوئے ایک کیپچا توثیق فارم بنائیں۔

اپنی ویب سائٹس کو کیپچا کی توثیق کے ساتھ محفوظ کریں۔

اگلا پڑھیں۔ متعلقہ موضوعات۔

• پروگرامنگ۔
• ویب سازی
• جاوا اسکرپٹ۔

مصنف کے بارے میں آگے بڑھنے کو تیار(36 مضامین شائع ہوئے)

میوزا پیشے کے لحاظ سے سافٹ وئیر تیار کرتا ہے اور لینکس اور فرنٹ اینڈ پروگرامنگ پر بڑے پیمانے پر لکھتا ہے۔ اس کے کچھ مفادات میں تاریخ ، معاشیات ، سیاست اور انٹرپرائز فن تعمیر شامل ہیں۔

Mwiza Kumwenda سے مزید

ہماری نیوز لیٹر کو سبسکرائب کریں

ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!

سبسکرائب کرنے کے لیے یہاں کلک کریں۔