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