کوڈ میں ایررز آ جاتے ہیں۔ آپ بھی لازمی غلطیاں کریں گے۔ یہ میں کیا بات کر رہا ہوں؟ کم از کم اگر آپ robot نہیں بلکہ انسان ہیں تو آپ کا کوڈ لازمی طور پور ایررز کا شکار ہو گا۔
لیکن براؤزرز میں یوزرز پہلے سے طے شدہ طور پر ایرزرز نہیں دیکھتے۔ تو اگر کچھ غلط ہوتا ہے تو آپ کو پتا نہیں چلے گا کہ کیا ہوا اور آپ اسے ٹھیک نہیں کر پائیں گے۔
ایررز کو دیکھنے اور سکرپٹس کے بارے اور بھی بہت مفید معلومات حاصل کرنے کیلیے براؤزرز میں "developer tools" شامل ہوتے ہیں۔
زیادہ تر ڈویلپرز Chrome یا Firefox کی طرف مائل ہوتے ہیں کیونکہ ان میں بہترین developer tools موجود ہیں۔ دوسرے براؤزرز میں بھی developer tools موجود ہوتے ہیں بلکہ ان میں کچھ سپیشل فیچرز بھی ہوتے ہیں لیکن زیادہ تر یہ Chrome اور Firefox کو کاپی کرنے کی ہی کوشش کر رہے ہوتے ہیں۔ اس لیے زیادہ تر ڈویلپرز اپنا پسندیدہ براؤزر ہی استعمال کرتے ہیں اور اگر کسی خاص براؤزر کے متعلقہ مسئلہ حل کرنا ہو تو اس براؤزر کو استعمال کرتے ہیں۔
Developer tools پاورفل ہیں؛ ان میں بہت سارے فیچرز ہوتے ہیں۔ شروعاتی طور پر ہم سیکھیں گے کہ انہیں کھولا کس طرح جاتا ہے، ایررز کیسے دیکھے جاتے ہیں اور کچھ Javascript کمانڈز کو بھی چلا کر دیکھیں گے۔
دیے گئے ڈاکیومنٹ bug.html کو کھولیں۔
اس میں موجود Javascript کوڈ میں ایک ایرر موجود ہے۔ یہ ایک عام وزٹر سے چھپا ہوا ہے، تو چلیں developer tools کھول کر اسے دیکھتے ہیں۔
اسے کھولنے کیلیےkey:F12 کو دبائیں یا اگر آپ Mac پر ہیں تو key:Cmd+Opt+J دبائیں۔
بائی ڈیفالٹ، developer console tab پہلے کھلے گا۔
یہ کچھ اس طرح دکھائی دیتا ہے:
اس developer tool کی خاص بناوٹ Chrome کے ورژن پر منحصر ہے۔ یہ وقت کے ساتھ ساتھ بدلتی رہتی ہے لیکن اس سے ملتی جلتی ہی ہو گی۔
- یہاں ہم سرخ رنگ میں ایرر میسج دیکھ سکتے ہیں۔ اس کیس میں، سکرپٹ میں ایک نامعلوم کمانڈ "lalala" موجود ہے۔
- دائیں طرف، سورس کوڈ
bug.html:12کی طرف لے جانے والا ایک لنک موجود ہے جس پر کلک کر کے ہم اس لائن پر پہنچ سکتے ہیں جہاں سے یہ ایرر آیا ہے۔
ایرر میسج کے نیچے ایک > کا ایک نشان موجود ہے۔ یہ "command line" کی نشاندہی کرتا ہے جہاں ہم Javascript کمانڈز لکھ سکتے ہیں۔ key:Enter دبا کر ان کمانڈز کو چلایا جا سکتا ہے۔
اب ہم ایررز دیکھ سکتے ہیں اور آغاز کرنے کیلیے یہ کافی ہے۔ ہم developer tools کی طرف واپس آئیں گے اور چیپٹر info:debugging-chrome میں ڈیبگنگ اور ڈویلپر ٹولز کو غور سے دیکھیں گے۔
عام طور پر، جب ہم console میں کوڈ کی کوئی لائن لکھ کر `key:Enter` دباتے ہیں تو یہ لائن چل جاتی ہے۔
زیادہ لائنز انسرٹ کرنے کیلیے `key:Shift+Enter` کو دبایا جاتا ہے۔ اس طرح ہم Javascript کوڈ کے بڑے حصے لکھ اور چلا سکتے ہیں۔
زیادہ تر براؤزرز key:F12 کے استعمال سے developer tools کو کھولتے ہیں۔
ان سب کی بناوٹ اور feel تقریباً ایک جیسی ہی ہوتی ہے۔ ایک دفعہ آپ کسی ایک کو چلانا سیکھ جائیں (آپ Chrome سے آغاز کر سکتے ہیں) تو آپ کسی بھی دوسرے کو آسانی سے چلا سکتے ہیں۔
براؤزرز Safari (Mac براؤزر، جو کہ Windows/Linux پر موجود نہیں) تھوڑا خاص طریقے سے کام کرتا ہے۔ ہمیں پہلے "Develop menu" میں سے اسے Enable کرنا پڑتا ہے۔
پریفرینسز (Preferences) کھولیے اور "Advance" pane میں جائیے۔ نیچے ایک checkbox موجود ہے اسے کلک کیجیے۔
اب key:Cmd+Opt+C console کو کھول اور بند کر سکتی ہے۔ مزید نوٹ کیجیے کہ ایک نیا مینیو "Develop" بھی آ گیا ہے۔ اس میں بہت سی کمانڈز اور آپشنز موجود ہیں۔
- Developer tools ہمیں ایررز دیکھنے، کمانڈز چلانے، ویری ایبلز کا جائزہ لینے اور بہت سی چیزیں کرنے کے قابل بناتے ہیں۔
- یہ وندوز پر زیادہ تر براؤزرز میں
key:F12سے کھولے جا سکتے ہیں۔ Mac پر Chrome پر انہیں کھولنے کیلیےkey:Cmd+Opt+Jاور Safari پر کھولنے کیلیے (جسے پہلے این ایبل کرنا پڑتا ہے)key:Cmd+Opt+Cدبانے کی ضرورت ہوتی ہے۔
اب ہمارا environment تیار ہو گیا ہے۔ اگلے سیکشن میں ہم Javascript کی طرف بڑھیں گے۔