DevTools में एआई की मदद वाला पैनल होता है. इससे आपको अपनी वेबसाइट को समझने और एआई एजेंट से चैट करके समस्याओं को ठीक करने में मदद मिलती है.
एआई की मदद से मिलने वाली सहायता पैनल, Gemini की मदद से काम करता है. इससे ये काम किए जा सकते हैं:
- वेब डेवलपमेंट में विशेषज्ञता हासिल है.
- यह पूरे वेब पेज के बारे में सामान्य सवालों के जवाब दे सकता है. साथ ही, कई विषयों के बारे में खास जानकारी दे सकता है. जैसे, स्टाइलिंग, नेटवर्किंग, परफ़ॉर्मेंस वगैरह. इनके अलावा, इसमें और भी विषय शामिल हो सकते हैं.
- यह सुविधा, चैट करने के लिए अपने-आप कॉन्टेक्स्ट चुनती है. जैसे, DOM एलिमेंट, नेटवर्क अनुरोध, परफ़ॉर्मेंस ट्रेस इवेंट वगैरह.
- ऑडिट चलाने और परफ़ॉर्मेंस ट्रेस रिकॉर्ड करने जैसी कार्रवाइयां अपने-आप कर सकता है.
- यह सुविधा, अपनी कार्रवाइयों और उनके पीछे की वजहों के बारे में चरण-दर-चरण जानकारी देती है. साथ ही, DevTools के काम के हिस्सों के लिंक भी देती है, ताकि आप एक क्लिक से उनकी जांच कर सकें.
- यह कोड में बदलाव करने का सुझाव दे सकता है. साथ ही, आपके कोडिंग एजेंट के लिए, अहम जानकारी के साथ एक प्रॉम्प्ट जनरेट कर सकता है, ताकि वह उसे लागू कर सके.
एआई असिस्टेंस की मदद से, स्टाइलिंग, नेटवर्किंग, परफ़ॉर्मेंस, वेबसाइट के सोर्स वगैरह को डीबग किया जा सकता है.
एआई की मदद से काम करने वाले पैनल में Gemini से चैट करने के लिए, पैनल को खोलने, प्रॉम्प्ट देने, और बातचीत के फ़्लो को कंट्रोल करने का तरीका जानें.
एआई असिस्टेंट का पैनल खोलें
एआई असिस्टेंट पैनल, डिफ़ॉल्ट रूप से ड्रॉर में खुलता है.
पैनल खोलने के लिए, सबसे ऊपर मौजूद मुख्य टूलबार के दाईं ओर, ग्लोबल एंट्री पॉइंट पर मौजूद एआई की मदद से काम करें बटन पर क्लिक करें.
पैनल से
बातचीत के कॉन्टेक्स्ट के साथ पैनल को सीधे तौर पर एलिमेंट, नेटवर्क, सोर्स या परफ़ॉर्मेंस पैनल से दो तरीकों से खोला जा सकता है:
किसी एलिमेंट, नेटवर्क अनुरोध, सोर्स फ़ाइल या परफ़ॉर्मेंस की ज़्यादा जानकारी के बगल में मौजूद,
एआई की मदद से डीबग करें बटन पर क्लिक करें.
किसी एलिमेंट, अनुरोध, फ़ाइल या ट्रेस एंट्री पर राइट क्लिक करें. इसके बाद, एआई की मदद से डीबग करें कॉन्टेक्स्ट मेन्यू से, प्रॉम्प्ट के लिए कोई सामान्य विकल्प चुनें.
कमांड मेन्यू से
कमांड मेन्यू से एआई की मदद सुविधा को खोलने के लिए, AI टाइप करें. इसके बाद, एआई की मदद दिखाएं कमांड चलाएं. इसके बगल में ड्रॉर बैज मौजूद होता है.
'ज़्यादा टूल' मेन्यू से
इसके अलावा, सबसे ऊपर दाएं कोने में मौजूद, ज़्यादा विकल्प > ज़्यादा टूल > एआई की मदद से काम करने की सुविधा को चुनें.
प्रॉम्प्ट देने की सुविधा
नई बातचीत शुरू करते समय, एआई की मदद से जवाब पाने की सुविधा आपको उदाहरण के तौर पर प्रॉम्प्ट दिखाती है. इससे आपको तुरंत बातचीत शुरू करने में मदद मिलती है.
पैनल में सबसे नीचे मौजूद प्रॉम्प्ट इनपुट फ़ील्ड में प्रॉम्प्ट पहले से भरने के लिए, किसी भी प्रॉम्प्ट पर क्लिक करें.
इसके अलावा, इनपुट फ़ील्ड में अपना प्रॉम्प्ट या सवाल टाइप करें.
कोई प्रॉम्प्ट भेजने के लिए, Enter दबाएं या इनपुट फ़ील्ड की दाईं ओर मौजूद ऐरो पर क्लिक करें.
बिना किसी संदर्भ के ओपन-एंडेड प्रॉम्प्ट
फ़्री-फ़ॉर्म चैट बॉक्स की मदद से, बिना किसी पूर्व कॉन्टेक्स्ट के, ज़्यादा जानकारी वाले ओपन-एंडेड सवाल पूछे जा सकते हैं. उदाहरण के लिए:
How to use DevTools to debug accessibility?एआई असिस्टेंस, आपके प्रॉम्प्ट का बेहतर जवाब देने के लिए, सबसे पहले सुलभता से जुड़ा Lighthouse ऑडिट करेगा.
What are the slowest network requests on this page?एआई की मदद से, आपको संदिग्ध अनुरोधों की सूची मिलेगी. साथ ही, नेटवर्क पैनल में उनके लिंक भी मिलेंगे. इससे, एक क्लिक में किसी अनुरोध को बातचीत के कॉन्टेक्स्ट के तौर पर चुना जा सकेगा.
What performance issues exist on the page?इस प्रॉम्प्ट का जवाब देने के लिए, एआई की मदद से, आपकी चुनी गई सेटिंग के साथ परफ़ॉर्मेंस ट्रेस अपने-आप रिकॉर्ड हो जाएगा.
How do I use the Animation panel?याWhere is the high contrast setting in DevTools?जैसे प्रॉम्प्ट से, DevTools के बारे में सीधे तौर पर मदद मिलेगी.
चैट शुरू करने पर, एआई की मदद से जवाब पाने की सुविधा, चैट खाली होने पर आपकी कार्रवाइयों के आधार पर कॉन्टेक्स्ट को अपडेट करेगी. साथ ही, आपके मैन्युअल तरीके से चुने गए विकल्पों का पालन करेगी.
कॉन्टेक्स्ट के साथ प्रॉम्प्ट
आपके पास किसी भी समय, कॉन्टेक्स्ट को मैन्युअल तरीके से बदलने का विकल्प होता है. इसके लिए, Elements में कोई एलिमेंट, Network में कोई अनुरोध, Performance में कोई ट्रेस एंट्री या Sources में कोई फ़ाइल चुनें.
आपके पास किसी फ़ाइल के कुछ हिस्सों को कॉपी करने का विकल्प भी होता है. उदाहरण के लिए, सोर्स पैनल से किसी फ़ाइल के कुछ हिस्सों को कॉपी करके, चैट में चिपकाया जा सकता है. इसके बाद, यह पूछा जा सकता है कि यह क्या करता है.
इसके बाद, एआई की मदद से जवाब पाने की सुविधा में बातचीत के फ़्लो के बारे में ज़्यादा जानें.
बातचीत का फ़्लो
प्रॉम्प्ट भेजने पर, एजेंट के साथ बातचीत शुरू हो जाती है. आपके प्रॉम्प्ट का सबसे सही जवाब देने के लिए, एजेंट JavaScript जनरेट करता है और उसे लागू करता है. यह JavaScript, वेब एपीआई को कॉल करती है.
एजेंट की प्रोग्रेस को चरणों में दिखाया जाता है. शुरुआती चरण का स्टेटस Investigating… है.
आपके प्रॉम्प्ट का जवाब देने के लिए, एजेंट ज़्यादा सटीक कार्रवाइयां करता है. इसलिए, शुरुआती चरण का लेबल अपडेट हो जाता है.
आपको जिस चीज़ को डीबग करना है उसके आधार पर, एजेंट DevTools में कार्रवाइयां भी कर सकता है. जैसे, परफ़ॉर्मेंस ट्रेस रिकॉर्ड करना या Lighthouse ऑडिट चलाना.
एजेंट के लिए सिलसिलेवार तरीके से दिए गए निर्देश
जब एजेंट आपके प्रॉम्प्ट का जवाब जनरेट कर देता है, तो शुरुआती चरण का लेबल एजेंट की प्रोसेस दिखाएं या सोचने की प्रोसेस दिखाएं में बदल जाता है. इसे बड़ा करके, एजेंट के डेटा का विश्लेषण करने के लिए उठाए गए चरणों को दाईं ओर मौजूद साइड पैनल में देखा जा सकता है.
इसमें ये चरण शामिल हैं:
- एक्सपैंड किए जा सकने वाले कोड स्निपेट, जिन्हें एजेंट ने दिखाए गए डेटा के साथ एक्ज़ीक्यूट किया है. कोड को कॉपी करके, Console में एक्ज़ीक्यूट किया जा सकता है.
- ऐसे विजेट जो नतीजों को आसानी से पढ़े जा सकने वाले फ़ॉर्मैट में दिखाते हैं.
विजेट में सबसे ऊपर दाएं कोने में, दिखाएं बटन होता है. इस बटन पर क्लिक करके, DevTools के काम के हिस्से पर जाया जा सकता है.
फ़ॉलो-अप प्रॉम्प्ट
एजेंट के जवाब देने के बाद, वह फ़ॉलो-अप प्रॉम्प्ट का सुझाव दे सकता है. बातचीत जारी रखने के लिए, किसी भी विकल्प पर क्लिक करें.
अपने कोडिंग एजेंट के लिए प्रॉम्प्ट जनरेट करना
अपने कोडिंग एजेंट के लिए प्रॉम्प्ट जनरेट करने के लिए, कोडिंग एजेंट में कॉपी करें पर क्लिक करें.
एजेंट, अपनी खोज और अहम जानकारी को कम शब्दों में या लोगों के पढ़ने लायक मार्कडाउन फ़ॉर्मैट में दिखाएगा. साथ ही, कार्रवाई करने लायक प्रॉम्प्ट देगा. इसे क्लिपबोर्ड पर कॉपी करके, अपनी पसंद के एआई एजेंट के साथ कोडिंग जारी रखी जा सकती है.
रोकी गई बातचीत
एआई की मदद से कोड जनरेट करने की सुविधा से, ऐसे कोड जनरेट हो सकते हैं जिनके खराब असर भी होंगे. ऐसा होने पर, कोड को लागू करने से पहले बातचीत को रोक दिया जाता है.
बातचीत रुकने पर, एजेंट की ओर से सुझाए गए कोड की समीक्षा करें. आगे बढ़ने के लिए, जारी रखें पर क्लिक करें या लागू होने से रोकने के लिए, रद्द करें पर क्लिक करें.
बदलाव पैनल में जाकर, कोड में सुझाए गए बदलावों की जांच की जा सकती है.
एजेंट, DevTools में बदलाव लागू करता है. हालांकि, अपने फ़ाइल फ़ोल्डर को इस तरह कॉन्फ़िगर किया जा सकता है कि DevTools, आपके सोर्स में बदलावों को सेव कर सके.
अपने फ़ाइल फ़ोल्डर में किए गए बदलाव सेव करना
कनेक्ट किए गए वर्कस्पेस फ़ोल्डर की मदद से, एआई की मदद से मिलने वाली सुविधा से सुझाए गए स्टाइल में किए गए बदलावों को, अपने कंप्यूटर पर मौजूद सीएसएस सोर्स फ़ाइलों में वापस सेव किया जा सकता है.
ऐसा करने के लिए:
सबसे पहले, मेटाडेटा फ़ाइल जनरेट करें और Workspace फ़ोल्डर कनेक्ट करें.
इसके अलावा, मैन्युअल तरीके से फ़ोल्डर जोड़ा जा सकता है.
तत्व पैनल से चैट शुरू करें.
सीएसएस में बदलाव करने के लिए, एआई की मदद लें.
एआई की मदद से कोड जनरेट करने की सुविधा, कोड जनरेट कर सकती है और कोड के एक्ज़ीक्यूशन को रोक सकती है. कोड की समीक्षा करें. इसके बाद, बदलावों को लाइव टेस्ट करने के लिए, जारी रखें पर क्लिक करें.
सेव नहीं किए गए बदलाव सेक्शन को बड़ा करें और फ़ाइल फ़ोल्डर में लागू करें पर क्लिक करें.
diffमें किए गए बदलावों की समीक्षा करें और सभी सेव करें पर क्लिक करें.
इस वर्कफ़्लो के बारे में जानने के लिए, यह लेख पढ़ें:
कोई जवाब नहीं दिया गया
एआई से मिलने वाली मदद से कई वजहों से जवाब नहीं मिल सकते.
अगर आपको लगता है कि आपके प्रॉम्प्ट के बारे में एआई से मिलने वाली मदद के तहत चर्चा की जा सकती है, तो बग की शिकायत करें.
बातचीत का इतिहास
बातचीत शुरू करने के बाद, हर अगला जवाब, एआई के साथ आपकी पिछली बातचीत पर आधारित होता है.
एआई असिस्टेंस, सेशन के बीच आपकी बातचीत का इतिहास सेव करता है. इससे DevTools या Chrome को फिर से लोड करने के बाद भी, पिछली चैट को ऐक्सेस किया जा सकता है.
बातचीत के इतिहास को कंट्रोल करने के लिए, पैनल के सबसे ऊपर बाएं कोने में मौजूद कंट्रोल का इस्तेमाल करें.
नया शुरू करें
चुने गए बातचीत के कॉन्टेक्स्ट के साथ नई बातचीत शुरू करने के लिए, बटन पर क्लिक करें.
जारी रखें
पिछली बातचीत जारी रखने के लिए, बटन पर क्लिक करें और संदर्भ मेन्यू से उसे चुनें.
मिटाएं
इतिहास से किसी बातचीत को मिटाने के लिए, बटन पर क्लिक करें.
जवाबों को रेटिंग देना और सुझाव/राय देना या शिकायत करना
एआई की मदद की सुविधा, एक्सपेरिमेंट के तौर पर उपलब्ध है. इसलिए, हम आपसे सुझाव/राय देने या शिकायत करने का अनुरोध कर रहे हैं, ताकि हमें यह पता चल सके कि हम जवाबों की क्वालिटी और आपके अनुभव को कैसे बेहतर बना सकते हैं.
जवाबों को वोट करना
जवाब के नीचे मौजूद, पसंद करें और नापसंद करें बटन का इस्तेमाल करके, जवाब को रेटिंग दें.
जवाबों की शिकायत करें
आपत्तिजनक कॉन्टेंट की शिकायत करने के लिए, वोटिंग बटन के बगल में मौजूद बटन पर क्लिक करें.