एआई से मदद लेकर चैट करना

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 में कोई फ़ाइल चुनकर, कॉन्टेक्स्ट को कभी भी बदला जा सकता है.

आपके पास किसी फ़ाइल के कुछ हिस्सों को कॉपी करने का विकल्प भी होता है. उदाहरण के लिए, सोर्स पैनल से किसी फ़ाइल के कुछ हिस्सों को कॉपी करके, चैट में चिपकाया जा सकता है. इसके बाद, यह पूछा जा सकता है कि यह क्या करता है.

इसके बाद, अलग-अलग पैनल के साथ एआई की मदद इस्तेमाल करने के बारे में ज़्यादा जानें.

स्टाइलिंग के लिए एआई की मदद

स्टाइलिंग के लिए, एआई असिस्टेंस पैनल का इस्तेमाल करें. इससे आपको वेबसाइट के पूरे लेआउट, एलिमेंट की खास स्टाइल को समझने में मदद मिलेगी. साथ ही, सीएसएस की गड़बड़ियों को ठीक करने के लिए, एआई से जनरेट किए गए सुझाव मिलेंगे.

एलिमेंट पैनल से एआई असिस्टेंट को ऐक्सेस करना

किसी डीओएम नोड की जांच करते समय, एलिमेंट पैनल से एआई असिस्टेंट खोलने के लिए, नोड पर राइट क्लिक करें और एआई से पूछें विकल्प चुनें.

एआई की मदद को इस तरह खोलने पर, जांच किया गया डीओएम एलिमेंट पहले से ही बातचीत के लिए कॉन्टेक्स्ट एलिमेंट के तौर पर चुना जाता है.

इसके अलावा, होवर किए गए DOM नोड से जुड़े फ़्लोटिंग बटन पर क्लिक करें.

बातचीत का कॉन्टेक्स्ट

एआई की मदद से की गई चैट हमेशा उस एलिमेंट से जुड़ी होती हैं जिसकी जांच की जा रही है. यह एलिमेंट, Elements पैनल के डीओएम ट्री में चुना गया आखिरी एलिमेंट होता है. इस एलिमेंट का रेफ़रंस, पैनल में सबसे नीचे बाएं कोने में दिखाया गया है.

मौजूदा एलिमेंट के बगल में मौजूद एलिमेंट पिकर का इस्तेमाल करके या Elements पैनल के DOM ट्री से चुनकर, कॉन्टेक्स्ट बदलें.

कॉन्टेक्स्ट चुनने के बाद, व्यूपोर्ट का स्क्रीनशॉट कैप्चर किया जा सकता है. इसके बाद, इसे अपनी चैट में सबमिट किया जा सकता है. चैट इनपुट फ़ील्ड के बगल में मौजूद, photo_camera स्क्रीनशॉट लें बटन पर क्लिक करें.

अपने प्रॉम्प्ट में ज़्यादा विज़ुअल कॉन्टेक्स्ट देने के लिए, स्क्रीनशॉट का इस्तेमाल किया जा सकता है. उदाहरण के लिए, यह देखने के लिए कि क्या दिखने वाले सभी बटन के बीच की दूरी एक जैसी है.

फ़िलहाल, जांच किए गए एलिमेंट के आधार पर बातचीत की जाती है. हालांकि, एआई की मदद से काम करने वाली सुविधा के पास सभी वेब एपीआई का ऐक्सेस होता है, ताकि वह जांच किए गए पेज से ज़्यादा जानकारी इकट्ठा कर सके. इसमें document.querySelector का इस्तेमाल करके अन्य एलिमेंट के बारे में क्वेरी करना या कंप्यूट की गई स्टाइल का आकलन करना शामिल है.

नेटवर्क के लिए एआई की मदद

नेटवर्क के लिए एआई की मदद वाले पैनल का इस्तेमाल करके, अपनी वेबसाइट से भेजे गए अनुरोधों को समझें.

नेटवर्क पैनल से एआई असिस्टेंट को ऐक्सेस करना

नेटवर्क पैनल से एआई असिस्टेंट खोलने के लिए, किसी अनुरोध पर राइट क्लिक करें और एआई से पूछें विकल्प चुनें.

एआई की मदद को इस तरह खोलने पर, चुनी गई नेटवर्क अनुरोध को बातचीत के कॉन्टेक्स्ट के तौर पर पहले से ही चुन लिया जाता है.

इसके अलावा, उस नेटवर्क अनुरोध के बगल में मौजूद फ़्लोटिंग बटन पर क्लिक करें जिस पर आपने कर्सर घुमाया है.

बातचीत का कॉन्टेक्स्ट

एआई की मदद से की गई चैट, नेटवर्क पैनल में अनुरोधों की सूची में फ़िलहाल चुने गए नेटवर्क अनुरोध से जुड़ी होती हैं. इस अनुरोध का रेफ़रंस, पैनल के सबसे नीचे बाएं कोने में दिखाया गया है.

नेटवर्क पैनल में मौजूद किसी दूसरे अनुरोध पर क्लिक करके, कॉन्टेक्स्ट बदलें.

एआई की मदद से जवाब देने की सुविधा, आपके सवालों के जवाब देने के लिए, अनुरोध किए गए यूआरएल, हेडर, समय, और अनुरोध शुरू करने वाले की चेन का इस्तेमाल करती है.

अहम जानकारी: ऐसे हेडर जिनमें संवेदनशील जानकारी हो सकती है उन्हें अपने-आप छिपा दिया जाता है.

एआई की मदद से इस्तेमाल किए गए रॉ डेटा को देखने के लिए, बातचीत शुरू करने के बाद Analyzing network data चिप में मौजूद keyboard_arrow_down बड़ा करें बटन पर क्लिक करें.

परफ़ॉर्मेंस के लिए एआई की मदद

परफ़ॉर्मेंस पैनल में रिकॉर्ड की गई परफ़ॉर्मेंस प्रोफ़ाइलों को समझने के लिए, परफ़ॉर्मेंस के लिए एआई की मदद पैनल का इस्तेमाल करें.

परफ़ॉर्मेंस पैनल से एआई असिस्टेंट को ऐक्सेस करना

परफ़ॉर्मेंस पैनल से एआई असिस्टेंट खोलने के लिए, पहले परफ़ॉर्मेंस प्रोफ़ाइल रिकॉर्ड करें.

आपको किस चीज़ की जांच करनी है, इसके आधार पर आपके पास दो विकल्प होते हैं. पहला, परफ़ॉर्मेंस की अहम जानकारी से **एआई की मदद** वाला पैनल खोलें. दूसरा, परफ़ॉर्मेंस ट्रेस व्यू में मौजूद गतिविधियों के लिए पैनल खोलें.

परफ़ॉर्मेंस के बारे में अहम जानकारी

अहम जानकारी टैब में जाकर, कोई अहम जानकारी खोलें. उदाहरण के लिए, **फ़ेज़ के हिसाब से एलसीपी. इसके बाद, एआई से पूछें** बटन पर क्लिक करें.

DevTools, एआई असिस्टेंट पैनल खोलता है. इसमें परफ़ॉर्मेंस की यह अहम जानकारी, बातचीत के कॉन्टेक्स्ट के तौर पर पहले से चुनी गई होती है.

परफ़ॉर्मेंस ट्रेस व्यू

ट्रेस व्यू से एआई की मदद सुविधा को खोलने के लिए, किसी गतिविधि पर राइट क्लिक करें. इसके बाद, एआई से पूछें विकल्प चुनें.

इस मामले में, इस गतिविधि को बातचीत के कॉन्टेक्स्ट के तौर पर पहले से ही चुना जाता है.

बातचीत का कॉन्टेक्स्ट

चुनी गई परफ़ॉर्मेंस गतिविधि का इस्तेमाल, एआई की मदद से जवाब पाने के लिए किया जाता है. इस गतिविधि का रेफ़रंस, पैनल के सबसे नीचे बाएं कोने में दिखता है.

परफ़ॉर्मेंस के बारे में अहम जानकारी

अगर आपने परफ़ॉर्मेंस की किसी खास अहम जानकारी के लिए, एआई से पूछें पर क्लिक किया है, तो आपको यह अहम जानकारी, चुने गए कॉन्टेक्स्ट के तौर पर दिखेगी. चुने गए विकल्प को बदलने के लिए, अन्य अहम जानकारी में जाकर एआई से पूछें पर क्लिक करें.

बातचीत शुरू करने के बाद, Analyzing insight: ... सेक्शन को बड़ा करके, एआई की मदद से इस्तेमाल किया गया रॉ डेटा देखें.

ट्रेस व्यू

परफ़ॉर्मेंस ट्रेस में अलग-अलग आइटम चुने जा सकते हैं. इसके हिसाब से कॉन्टेक्स्ट बदल जाएगा.

एआई की मदद से जवाब देने की सुविधा, आपके प्रॉम्प्ट का जवाब देने के लिए, चुने गए कॉल ट्री की टाइमिंग का इस्तेमाल कर रही है.

एआई की मदद से जवाब पाने की सुविधा में इस्तेमाल किया गया रॉ डेटा देखने के लिए, बातचीत शुरू करने के बाद Analyzing call tree चिप में मौजूद keyboard_arrow_down बटन पर क्लिक करें.

सोर्स के लिए एआई की मदद

सोर्स के लिए एआई की मदद पैनल का इस्तेमाल करके, अपनी वेबसाइट पर लोड की गई और इस्तेमाल की गई फ़ाइलों के बारे में जानें.

सोर्स पैनल से एआई असिस्टेंट को ऐक्सेस करना

सोर्स पैनल से एआई की मदद खोलने के लिए, किसी फ़ाइल पर राइट क्लिक करें और एआई से पूछें विकल्प को चुनें.

एआई की मदद को इस तरह खोलने पर, चुनी गई फ़ाइल को बातचीत के लिए कॉन्टेक्स्ट के तौर पर पहले से ही चुन लिया जाता है.

इसके अलावा, किसी फ़ाइल पर कर्सर घुमाते समय फ़्लोटिंग बटन पर क्लिक करें.

बातचीत का कॉन्टेक्स्ट

चुनी गई फ़ाइल का इस्तेमाल, एआई की मदद से बातचीत करने के लिए कॉन्टेक्स्ट के तौर पर किया जाता है. इस फ़ाइल का रेफ़रंस, पैनल में सबसे नीचे बाएं कोने में दिखाया गया है.

सोर्स पैनल में मौजूद किसी दूसरी फ़ाइल पर क्लिक करके, कॉन्टेक्स्ट बदलें.

एआई की मदद से जवाब पाने की सुविधा, आपके सवालों के जवाब देने के लिए चुनी गई फ़ाइल के नाम, यूआरएल, सोर्स मैप (अगर उपलब्ध हो) और कॉन्टेंट का इस्तेमाल कर रही है.

एआई की मदद से मिली जानकारी में इस्तेमाल किया गया रॉ डेटा देखने के लिए, बातचीत शुरू करने के बाद Analyzing file चिप में मौजूद keyboard_arrow_down बटन पर क्लिक करें.

बातचीत का फ़्लो

प्रॉम्प्ट भेजने पर, स्टाइलिंग एजेंट के साथ बातचीत शुरू हो जाती है. आपके प्रॉम्प्ट का सबसे सही जवाब देने के लिए, एजेंट JavaScript जनरेट करता है और उसे लागू करता है. यह JavaScript, वेब एपीआई को कॉल करती है. एजेंट की प्रोग्रेस को चरणों में दिखाया जाता है. शुरुआती चरण का स्टेटस Investigating… है.

आपके सवाल का जवाब देने के लिए, एजेंट की ओर से की जाने वाली कार्रवाइयों के हिसाब से, चरण के लेबल अपडेट होते हैं.

जब एजेंट को जवाब मिल जाता है, तो वह जवाब, जांच के चरणों के नीचे दिखता है. इसमें फ़ॉलो-अप प्रॉम्प्ट के सुझाव भी शामिल होते हैं.

बातचीत जारी रखने के लिए, सुझाए गए किसी भी प्रॉम्प्ट पर क्लिक करें. keyboard_arrow_down पर क्लिक करें

की जांच के चरण का स्क्रीनशॉट लें, ताकि आपको यह बेहतर तरीके से समझ में आ सके कि एआई असिस्टेंट ने पर्दे के पीछे क्या किया.

प्रोग्रेस चिप को बड़ा करने पर, आपको एजेंट का वह कोड दिखता है जिसे उसने लागू किया है. साथ ही, उसकी रिटर्न वैल्यू भी दिखती है. इस्तेमाल किए गए कोड को कॉपी करें, ताकि बाद में उसका इस्तेमाल किया जा सके. जैसे, कंसोल पैनल की मदद से कोड को लागू करना.

रोकी गई बातचीत

एआई की मदद से कोड जनरेट करने की सुविधा से, ऐसे कोड जनरेट हो सकते हैं जिनके खराब असर भी होंगे. ऐसा होने पर, कोड को लागू करने से पहले बातचीत को रोक दिया जाता है.

जब बातचीत रुक जाए, तो एजेंट के सुझाए गए कोड की समीक्षा करें. आगे बढ़ने के लिए, play_arrow जारी रखें पर क्लिक करें या लागू होने से रोकने के लिए, रद्द करें पर क्लिक करें.

अपने फ़ाइल फ़ोल्डर में किए गए बदलाव सेव करना

कनेक्ट किए गए वर्कस्पेस फ़ोल्डर की मदद से, एआई की मदद से मिलने वाली सुविधा से सुझाए गए स्टाइल में किए गए बदलावों को, अपने कंप्यूटर पर मौजूद सीएसएस सोर्स फ़ाइलों में वापस सेव किया जा सकता है.

ऐसा करने के लिए:

1. सबसे पहले, मेटाडेटा फ़ाइल जनरेट करें और Workspace फ़ोल्डर कनेक्ट करें.

   इसके अलावा, मैन्युअल तरीके से फ़ोल्डर जोड़ा जा सकता है.

2. Elements पैनल से चैट शुरू करें.

3. सीएसएस में बदलाव करने के लिए, एआई की मदद लें.

4. एआई की मदद से कोड जनरेट करने की सुविधा, कोड जनरेट कर सकती है और कोड को चलने से रोक सकती है. कोड की समीक्षा करें. इसके बाद, बदलावों को लाइव टेस्ट करने के लिए, जारी रखें पर क्लिक करें.

5. सेव नहीं किए गए बदलाव सेक्शन को बड़ा करें और फ़ाइल फ़ोल्डर में लागू करें पर क्लिक करें.

6. diff में किए गए बदलावों की समीक्षा करें और सभी सेव करें पर क्लिक करें.

इस वर्कफ़्लो के बारे में जानने के लिए, यह लेख पढ़ें:

कोई जवाब नहीं दिया गया

एआई से मिलने वाली मदद से कई वजहों से जवाब नहीं मिल सकते.

अगर आपको लगता है कि आपके प्रॉम्प्ट के बारे में एआई से मिलने वाली मदद के तहत चर्चा की जा सकती है, तो बग की शिकायत करें.

बातचीत का इतिहास

बातचीत शुरू करने के बाद, हर अगला जवाब, एआई के साथ आपकी पिछली बातचीत पर आधारित होता है.

एआई असिस्टेंस, सेशन के बीच आपकी बातचीत का इतिहास सेव करता है. इससे DevTools या Chrome को फिर से लोड करने के बाद भी, पिछली चैट को ऐक्सेस किया जा सकता है.

बातचीत के इतिहास को कंट्रोल करने के लिए, पैनल के सबसे ऊपर बाएं कोने में मौजूद कंट्रोल का इस्तेमाल करें.

नया शुरू करें

चुने गए बातचीत के कॉन्टेक्स्ट के साथ नई बातचीत शुरू करने के लिए, जोड़ें बटन पर क्लिक करें.

जारी रखें

पिछली बातचीत जारी रखने के लिए, इतिहास बटन पर क्लिक करें और संदर्भ मेन्यू से उसे चुनें.

मिटाएं

इतिहास से किसी बातचीत को मिटाने के लिए, मिटाएं बटन पर क्लिक करें.

जवाबों को रेटिंग देना और सुझाव/राय देना या शिकायत करना

एआई की मदद की सुविधा, एक्सपेरिमेंट के तौर पर उपलब्ध है. इसलिए, हम आपसे सुझाव/राय देने या शिकायत करने का अनुरोध कर रहे हैं, ताकि हमें यह पता चल सके कि हम जवाबों की क्वालिटी और आपके अनुभव को कैसे बेहतर बना सकते हैं.

जवाबों को वोट करना

जवाब के नीचे मौजूद, thumb_up पसंद करें और thumb_down नापसंद करें बटन का इस्तेमाल करके, जवाब को रेटिंग दें.

जवाबों की शिकायत करें

आपत्तिजनक कॉन्टेंट की शिकायत करने के लिए, वोटिंग बटन के बगल में मौजूद शिकायत करें बटन पर क्लिक करें.