DevTools

embedded browser آپ کو پورے Chrome DevTools تک رسائی دیتا ہے — وہی inspector، console، اور network monitor جو آپ باقاعدہ Chrome window میں استعمال کرتے ہیں۔ اسے debug کرنے کے لیے استعمال کریں جو آپ کے AI agent نے بنایا، JavaScript errors چیک کریں، یا inspect کریں کہ request کیسے بنتی ہے۔

DevTools کھولنا

browser پینل header میں DevTools بٹن (🔧) کلک کریں۔ Chrome DevTools آپ کی workspace کے ساتھ ایک الگ window میں کھلتا ہے۔ آپ اس window کو جہاں مناسب ہو وہاں position کر سکتے ہیں — زیادہ تر developers اسے دوسرے monitor پر یا browser پینل کے نیچے dock کرتے ہیں۔

آپ DevTools اسی طرح بھی کھول سکتے ہیں جیسے Chrome میں کرتے ہیں: browser پینل کے اندر page پر کہیں بھی right-click کریں اور Inspect منتخب کریں۔ DevTools Elements tab کے ساتھ کھلتا ہے جو آپ کے right-click کردہ element پر focused ہوتا ہے۔

کیا دستیاب ہے

پورا DevTools toolset دستیاب ہے:

• Elements — page پر کسی بھی element کا HTML اور CSS inspect اور modify کریں۔ tree میں کوئی element کلک کریں browser میں highlight کریں، یا page پر element کلک کریں اسے tree میں تلاش کریں۔ source files touch کیے بغیر changes try کرنے کے لیے styles inline edit کریں۔
• Console — console.log output، JavaScript errors، اور warnings دیکھیں۔ files edit کیے بغیر چیزیں test کرنے کے لیے console میں براہ راست JavaScript expressions چلائیں۔
• Network — آپ کی app کی ہر HTTP request monitor کریں۔ request headers، response bodies، timing، اور status codes دیکھیں۔ یہ چیک کرنے کے لیے مفید کہ API calls صحیح بھیجی جا رہی ہیں اور responses ٹھیک لگتی ہیں۔
• Sources — breakpoints کے ساتھ JavaScript step through کریں۔ breakpoint سیٹ کریں، browser میں action trigger کریں، اور execution pause ہوتا ہے تاکہ آپ variable values inspect کر سکیں۔
• Application — local storage، session storage، cookies، اور IndexedDB inspect کریں۔ authentication state یا browser میں stored کسی بھی چیز debug کرنے کے لیے مفید۔

عام Debugging Scenarios

AI agent نے کیا بنایا چیک کرنا: Elements پینل کھولیں اور HTML structure explore کریں۔ یہ بتاتا ہے کہ agent نے چیزیں صحیح طریقے سے wire کی ہیں یا نہیں — درست class names، proper nesting، اور صحیح attributes۔

JavaScript errors تلاش کرنا: page load کرنے سے پہلے Console کھولیں۔ کوئی بھی uncaught errors یہاں file name اور line number کے ساتھ ظاہر ہوتی ہیں۔ error message اپنے AI agent کے ساتھ share کریں تاکہ وہ root cause ٹھیک کر سکے۔

API calls debug کرنا: Network tab کھولیں اور اپنی app میں وہ action کلک کریں جو request trigger کرتا ہے (جیسے login بٹن کلک کرنا)۔ request فہرست میں ظاہر ہوتی ہے۔ پوری request اور response دیکھنے کے لیے اسے کلک کریں — authentication issues یا malformed request bodies diagnose کرنے کے لیے مفید۔

ٹپ: جب AI agent تبدیلیاں کر رہا ہو تو Console tab کھلا رکھیں۔ Errors یہاں page پر نظر آنے سے پہلے ظاہر ہوتی ہیں، جو آپ کو کیا ٹھیک کرنا ہے اس پر پہلے feedback دیتا ہے۔