DevTools में एआई की मदद वाला पैनल उपलब्ध है. इससे आपको अपनी वेबसाइट को समझने और एआई एजेंट से चैट करके समस्याओं को ठीक करने में मदद मिलती है.
एआई की मदद से, अपनी वेबसाइट की स्टाइलिंग, नेटवर्किंग, परफ़ॉर्मेंस, और सोर्स को डीबग किया जा सकता है.
एआई की मदद से काम करने वाले पैनल में Gemini से चैट करने के लिए, पैनल को खोलने, प्रॉम्प्ट देने, और बातचीत के फ़्लो को कंट्रोल करने का तरीका जानें.
एआई असिस्टेंट का पैनल खोलें
एआई असिस्टेंट पैनल, ड्रॉर में खुलता है.
पैनल खोलने के लिए, सबसे ऊपर मौजूद मुख्य टूलबार के दाईं ओर, ग्लोबल एंट्री पॉइंट पर मौजूद एआई की मदद से काम करें बटन पर क्लिक करें.
किसी एलिमेंट या अनुरोध पर राइट क्लिक करके और एआई से पूछें को चुनकर, Elements, Network, Sources या Performance पैनल से भी सीधे तौर पर पैनल खोला जा सकता है.
कमांड मेन्यू से
कमांड मेन्यू से एआई की मदद सुविधा को खोलने के लिए, AI टाइप करें. इसके बाद, एआई की मदद दिखाएं कमांड चलाएं. इसके बगल में ड्रॉर बैज मौजूद होता है.
"ज़्यादा टूल" मेन्यू में जाकर
इसके अलावा, सबसे ऊपर दाएं कोने में मौजूद, ज़्यादा विकल्प > ज़्यादा टूल > एआई की मदद से काम करने की सुविधा को चुनें.
प्रॉम्प्ट देने की सुविधा
नई बातचीत शुरू करते समय, एआई की मदद से जवाब पाने की सुविधा आपको प्रॉम्प्ट के उदाहरण दिखाती है. इससे आपको तुरंत बातचीत शुरू करने में मदद मिलती है.
पैनल में सबसे नीचे मौजूद प्रॉम्प्ट इनपुट फ़ील्ड में प्रॉम्प्ट पहले से भरने के लिए, किसी भी प्रॉम्प्ट पर क्लिक करें.
इसके अलावा, इनपुट फ़ील्ड में अपना प्रॉम्प्ट या सवाल टाइप करें.
कोई प्रॉम्प्ट भेजने के लिए, Enter दबाएं या इनपुट फ़ील्ड की दाईं ओर मौजूद ऐरो पर क्लिक करें.
मुफ़्त चैट बॉक्स की मदद से, ज़्यादा मुश्किल सवाल पूछे जा सकते हैं. जैसे, "ऐक्सेसिबिलिटी से जुड़ी गड़बड़ियों को ठीक करने के लिए, DevTools का इस्तेमाल कैसे करें?" या "कौनसे नेटवर्क अनुरोध धीमे हैं?". इसके अलावा, किसी फ़ाइल के कुछ हिस्सों को कॉपी किया जा सकता है. उदाहरण के लिए, सोर्स पैनल से कॉपी करके चैट में चिपकाएं और पूछें कि यह क्या करता है.
स्टाइलिंग के लिए एआई की मदद
स्टाइलिंग के लिए, एआई असिस्टेंस पैनल का इस्तेमाल करें. इससे आपको वेबसाइट के पूरे लेआउट, एलिमेंट की खास स्टाइल को समझने में मदद मिलेगी. साथ ही, सीएसएस की गड़बड़ियों को ठीक करने के लिए, एआई से जनरेट किए गए सुझाव मिलेंगे.
एलिमेंट पैनल से एआई असिस्टेंट को ऐक्सेस करना
किसी डीओएम नोड की जांच करते समय, एलिमेंट पैनल से एआई असिस्टेंट खोलने के लिए, नोड पर राइट क्लिक करें और एआई से पूछें विकल्प चुनें.
एआई की मदद को इस तरह खोलने पर, जांच किया गया डीओएम एलिमेंट पहले से ही बातचीत के लिए कॉन्टेक्स्ट एलिमेंट के तौर पर चुना जाता है.
इसके अलावा, होवर किए गए DOM नोड से जुड़े फ़्लोटिंग बटन पर क्लिक करें.
बातचीत का कॉन्टेक्स्ट
एआई की मदद से की गई चैट हमेशा उस एलिमेंट से जुड़ी होती हैं जिसकी जांच की जा रही है. यह एलिमेंट, Elements पैनल के डीओएम ट्री में चुना गया आखिरी एलिमेंट होता है. इस एलिमेंट का रेफ़रंस, पैनल में सबसे नीचे बाएं कोने में दिखाया गया है.
मौजूदा एलिमेंट के बगल में मौजूद एलिमेंट पिकर का इस्तेमाल करके या Elements पैनल के DOM ट्री से चुनकर, कॉन्टेक्स्ट बदलें.
कॉन्टेक्स्ट चुनने के बाद, व्यूपोर्ट का स्क्रीनशॉट कैप्चर किया जा सकता है. इसके बाद, इसे अपनी चैट में सबमिट किया जा सकता है. चैट इनपुट फ़ील्ड के बगल में मौजूद, स्क्रीनशॉट लें बटन पर क्लिक करें.
अपने प्रॉम्प्ट में ज़्यादा विज़ुअल कॉन्टेक्स्ट देने के लिए, स्क्रीनशॉट का इस्तेमाल किया जा सकता है. उदाहरण के लिए, यह देखने के लिए कि क्या दिखने वाले सभी बटन के बीच की दूरी एक जैसी है.
फ़िलहाल, जांच किए गए एलिमेंट के आधार पर बातचीत की जाती है. हालांकि, एआई की मदद से काम करने वाली सुविधा के पास सभी वेब एपीआई का ऐक्सेस होता है, ताकि वह जांच किए गए पेज से ज़्यादा जानकारी इकट्ठा कर सके. इसमें document.querySelector का इस्तेमाल करके अन्य एलिमेंट के बारे में क्वेरी करना या कंप्यूट की गई स्टाइल का आकलन करना शामिल है.
नेटवर्क के लिए एआई की मदद
नेटवर्क के लिए एआई की मदद वाले पैनल का इस्तेमाल करके, अपनी वेबसाइट से भेजे गए अनुरोधों को समझें.
नेटवर्क पैनल से एआई असिस्टेंट को ऐक्सेस करना
नेटवर्क पैनल से एआई असिस्टेंट खोलने के लिए, किसी अनुरोध पर राइट क्लिक करें और एआई से पूछें विकल्प चुनें.
एआई की मदद को इस तरह खोलने पर, चुनी गई नेटवर्क रिक्वेस्ट को बातचीत के कॉन्टेक्स्ट के तौर पर पहले से चुन लिया जाता है.
इसके अलावा, उस नेटवर्क अनुरोध के बगल में मौजूद फ़्लोटिंग बटन पर क्लिक करें जिस पर आपने कर्सर घुमाया है.
बातचीत का कॉन्टेक्स्ट
एआई की मदद से की गई चैट, नेटवर्क पैनल की अनुरोध सूची में फ़िलहाल चुने गए नेटवर्क अनुरोध से जुड़ी होती हैं. इस अनुरोध का रेफ़रंस, पैनल के सबसे नीचे बाएं कोने में दिखाया गया है.
नेटवर्क पैनल में मौजूद किसी दूसरे अनुरोध पर क्लिक करके, कॉन्टेक्स्ट बदलें.
एआई की मदद से जवाब देने की सुविधा, आपके सवालों के जवाब देने के लिए अनुरोध किए गए यूआरएल, हेडर, समय, और अनुरोध शुरू करने वाले की चेन का इस्तेमाल करती है.
अहम जानकारी: ऐसे हेडर जिनमें संवेदनशील जानकारी हो सकती है उन्हें अपने-आप छिपा दिया जाता है.
एआई की मदद से इस्तेमाल किए गए रॉ डेटा को देखने के लिए, बातचीत शुरू करने के बाद Analyzing network data चिप में मौजूद बड़ा करें बटन पर क्लिक करें.
परफ़ॉर्मेंस के लिए एआई असिस्टेंट
परफ़ॉर्मेंस पैनल में रिकॉर्ड की गई परफ़ॉर्मेंस प्रोफ़ाइलों को समझने के लिए, परफ़ॉर्मेंस के लिए एआई की मदद पैनल का इस्तेमाल करें.
परफ़ॉर्मेंस पैनल से एआई असिस्टेंट को ऐक्सेस करना
परफ़ॉर्मेंस पैनल से एआई असिस्टेंट खोलने के लिए, पहले परफ़ॉर्मेंस प्रोफ़ाइल रिकॉर्ड करें.
आपको किस चीज़ की जांच करनी है, इसके आधार पर आपके पास दो विकल्प होते हैं. पहला, परफ़ॉर्मेंस की अहम जानकारी से **एआई की मदद** वाला पैनल खोलें. दूसरा, परफ़ॉर्मेंस ट्रेस व्यू में मौजूद गतिविधियों के लिए पैनल खोलें.
परफ़ॉर्मेंस के बारे में अहम जानकारी
अहम जानकारी टैब में जाकर, कोई अहम जानकारी खोलें. उदाहरण के लिए, **फ़ेज़ के हिसाब से एलसीपी . इसके बाद, एआई से पूछें** बटन पर क्लिक करें.
DevTools, एआई असिस्टेंट पैनल खोलता है. इसमें परफ़ॉर्मेंस की यह अहम जानकारी, बातचीत के लिए कॉन्टेक्स्ट के तौर पर पहले से चुनी गई होती है.
परफ़ॉर्मेंस ट्रेस व्यू
ट्रेस व्यू से एआई की मदद सुविधा को खोलने के लिए, किसी गतिविधि पर राइट क्लिक करें. इसके बाद, एआई से पूछें विकल्प चुनें.
इस मामले में, इस गतिविधि को बातचीत के कॉन्टेक्स्ट के तौर पर पहले से ही चुना जाता है.
बातचीत का कॉन्टेक्स्ट
चुनी गई परफ़ॉर्मेंस गतिविधि का इस्तेमाल, एआई की मदद से जवाब पाने के लिए किया जाता है. इस गतिविधि का रेफ़रंस, पैनल के सबसे नीचे बाएं कोने में दिखता है.
परफ़ॉर्मेंस के बारे में अहम जानकारी
अगर आपने परफ़ॉर्मेंस की किसी खास अहम जानकारी के लिए, एआई से पूछें पर क्लिक किया है, तो आपको यह अहम जानकारी, चुने गए कॉन्टेक्स्ट के तौर पर दिखेगी. चुने गए विकल्प को बदलने के लिए, अन्य अहम जानकारी में जाकर एआई से पूछें पर क्लिक करें.
बातचीत शुरू करने के बाद, Analyzing insight: ... सेक्शन को बड़ा करके, एआई की मदद से इस्तेमाल किया गया रॉ डेटा देखें.
ट्रेस व्यू
परफ़ॉर्मेंस ट्रेस में अलग-अलग आइटम चुने जा सकते हैं. इसके हिसाब से कॉन्टेक्स्ट बदल जाएगा.
एआई की मदद से जवाब देने की सुविधा, आपके प्रॉम्प्ट का जवाब देने के लिए, चुने गए कॉल ट्री की टाइमिंग का इस्तेमाल कर रही है.
एआई की मदद से जवाब पाने की सुविधा में इस्तेमाल किया गया रॉ डेटा देखने के लिए, बातचीत शुरू करने के बाद Analyzing call tree चिप में मौजूद बटन पर क्लिक करें.
सोर्स के लिए एआई की मदद
सोर्स के लिए एआई की मदद पैनल का इस्तेमाल करके, अपनी वेबसाइट पर लोड की गई और इस्तेमाल की गई फ़ाइलों के बारे में जानें.
सोर्स पैनल से एआई असिस्टेंट को ऐक्सेस करना
सोर्स पैनल से एआई की मदद खोलने के लिए, किसी फ़ाइल पर राइट क्लिक करें और एआई से पूछें विकल्प को चुनें.
एआई की मदद से जुड़ी सुविधा को इस तरह खोलने पर, चुनी गई फ़ाइल को बातचीत के लिए कॉन्टेक्स्ट के तौर पर पहले से ही चुन लिया जाता है.
इसके अलावा, किसी फ़ाइल पर कर्सर घुमाते समय फ़्लोटिंग बटन पर क्लिक करें.
बातचीत का कॉन्टेक्स्ट
चुनी गई फ़ाइल का इस्तेमाल, एआई की मदद से बातचीत करने के लिए कॉन्टेक्स्ट के तौर पर किया जाता है. इस फ़ाइल का रेफ़रंस, पैनल में सबसे नीचे बाएं कोने में दिखाया गया है.
सोर्स पैनल में मौजूद किसी दूसरी फ़ाइल पर क्लिक करके, कॉन्टेक्स्ट बदलें.
एआई की मदद से जवाब पाने की सुविधा, आपके सवालों के जवाब देने के लिए, चुनी गई फ़ाइल के नाम, यूआरएल, सोर्स मैप (अगर उपलब्ध हो) और कॉन्टेंट का इस्तेमाल कर रही है.
एआई की मदद से जवाब पाने की सुविधा के लिए इस्तेमाल किया गया रॉ डेटा देखने के लिए, बातचीत शुरू करने के बाद Analyzing file चिप में मौजूद बटन पर क्लिक करें.
बातचीत का फ़्लो
प्रॉम्प्ट भेजने पर, स्टाइलिंग एजेंट के साथ बातचीत शुरू हो जाती है. आपके प्रॉम्प्ट का सबसे सही जवाब देने के लिए, एजेंट JavaScript जनरेट करता है और उसे लागू करता है. यह JavaScript, वेब एपीआई को कॉल करती है. एजेंट की प्रोग्रेस को चरणों में दिखाया जाता है. शुरुआती चरण का स्टेटस Investigating… है.
आपके सवाल का जवाब देने के लिए, एजेंट की ओर से की जाने वाली कार्रवाइयों के हिसाब से, चरण के लेबल अपडेट होते हैं.
जब एजेंट को जवाब मिल जाता है, तो वह जवाब, जांच के चरणों के नीचे दिखता है. इसमें फ़ॉलो-अप प्रॉम्प्ट के सुझाव भी शामिल होते हैं.
बातचीत जारी रखने के लिए, सुझाए गए किसी भी प्रॉम्प्ट पर क्लिक करें. पर क्लिक करें
की जांच के चरण का स्क्रीनशॉट लें, ताकि आपको यह बेहतर तरीके से समझ में आ सके कि एआई असिस्टेंट ने पर्दे के पीछे क्या किया.
प्रोग्रेस चिप को बड़ा करने पर, आपको एजेंट का वह कोड दिखता है जिसे उसने लागू किया है. साथ ही, उसकी रिटर्न वैल्यू भी दिखती है. आगे इस्तेमाल करने के लिए, कोड को कॉपी करें. जैसे, इसे कंसोल पैनल के साथ लागू करना.
रोकी गई बातचीत
एआई की मदद से जनरेट किए गए कोड के खराब असर भी हो सकते हैं. ऐसा होने पर, कोड को लागू करने से पहले बातचीत को रोक दिया जाता है.
जब बातचीत रुक जाए, तो एजेंट के सुझाए गए कोड की समीक्षा करें. आगे बढ़ने के लिए, जारी रखें पर क्लिक करें या लागू होने से रोकने के लिए, रद्द करें पर क्लिक करें.
अपने फ़ाइल फ़ोल्डर में किए गए बदलाव सेव करना
कनेक्ट किए गए वर्कस्पेस फ़ोल्डर की मदद से, एआई की मदद से मिलने वाले सुझावों के आधार पर स्टाइल में किए गए बदलावों को, अपने कंप्यूटर पर मौजूद सीएसएस सोर्स फ़ाइलों में वापस सेव किया जा सकता है.
ऐसा करने के लिए:
सबसे पहले, मेटाडेटा फ़ाइल जनरेट करें और Workspace फ़ोल्डर कनेक्ट करें.
इसके अलावा, मैन्युअल तरीके से फ़ोल्डर जोड़ा जा सकता है.
Elements पैनल से चैट शुरू करें.
सीएसएस में बदलाव करने के लिए, एआई की मदद लें.
एआई की मदद से कोड जनरेट करने की सुविधा, कोड जनरेट कर सकती है और कोड के एक्ज़ीक्यूशन को रोक सकती है. कोड की समीक्षा करें. इसके बाद, बदलावों को लाइव टेस्ट करने के लिए, जारी रखें पर क्लिक करें.
सेव नहीं किए गए बदलाव सेक्शन को बड़ा करें और फ़ाइल फ़ोल्डर में लागू करें पर क्लिक करें.
diffमें किए गए बदलावों की समीक्षा करें और सभी सेव करें पर क्लिक करें.
इस वर्कफ़्लो के बारे में जानने के लिए, यह लेख पढ़ें:
कोई जवाब नहीं दिया गया
एआई से मिलने वाली मदद से कई वजहों से जवाब नहीं मिल सकते.
अगर आपको लगता है कि आपके प्रॉम्प्ट के बारे में एआई से मिलने वाली मदद के तहत चर्चा की जा सकती है, तो बग की शिकायत करें.
बातचीत का इतिहास
बातचीत शुरू करने के बाद, हर अगला जवाब, एआई के साथ आपकी पिछली बातचीत पर आधारित होता है.
एआई की मदद से की गई बातचीत का इतिहास, सेशन के बीच सेव रहता है. इसलिए, DevTools या Chrome को फिर से लोड करने के बाद भी, पिछली चैट को ऐक्सेस किया जा सकता है.
बातचीत के इतिहास को कंट्रोल करने के लिए, पैनल के सबसे ऊपर बाएं कोने में मौजूद कंट्रोल का इस्तेमाल करें.
नया शुरू करें
चुने गए बातचीत के कॉन्टेक्स्ट के साथ नई बातचीत शुरू करने के लिए, बटन पर क्लिक करें.
जारी रखें
पिछली बातचीत जारी रखने के लिए, बटन पर क्लिक करें और संदर्भ मेन्यू से इसे चुनें.
मिटाएं
इतिहास से किसी बातचीत को मिटाने के लिए, बटन पर क्लिक करें.
जवाबों को रेटिंग देना और सुझाव/राय देना या शिकायत करना
एआई की मदद की सुविधा, एक्सपेरिमेंट के तौर पर उपलब्ध है. इसलिए, हम आपके सुझाव, शिकायत या राय का इंतज़ार कर रहे हैं, ताकि हम जवाबों की क्वालिटी और आपके अनुभव को बेहतर बना सकें.
जवाबों के लिए वोट करना
जवाब के नीचे मौजूद, पसंद करें और नापसंद करें बटन का इस्तेमाल करके, जवाब को रेटिंग दें.
जवाबों की शिकायत करें
आपत्तिजनक कॉन्टेंट की शिकायत करने के लिए, वोटिंग बटन के बगल में मौजूद बटन पर क्लिक करें.