एआई से जुड़ी सहायता
सीधे Chrome DevTools में इंटिग्रेट किए गए Gemini की मदद से, अपने डेवलपमेंट वर्कफ़्लो को बेहतर बनाएं. स्टाइल, परफ़ॉर्मेंस, नेटवर्क, और सोर्स के लिए, एआई की मदद से डीबगिंग को आसान बनाएं.
पहली बार प्रॉम्प्ट चलाना
नीचे दिए गए इंटरैक्टिव ट्यूटोरियल में, उदाहरण के तौर पर दिए गए प्रॉम्प्ट चलाकर देखें. इससे आपको Chrome DevTools में Gemini को आज़माने का मौका मिलेगा.
एआई की मदद से क्या-क्या किया जा सकता है
स्टाइल से जुड़ी गड़बड़ियां ठीक करना
स्टाइल से जुड़ी समस्याओं को डीबग करना मुश्किल हो सकता है. अपने एलिमेंट की स्टाइल के बारे में पूरी जानकारी पाएं. साथ ही, लेआउट और स्टाइल से जुड़ी गड़बड़ियों को ठीक करने में मदद पाएं:
Can you center this element?
नेटवर्क अनुरोधों का विश्लेषण करना
अनुरोध और रिस्पॉन्स हेडर में अक्सर अहम जानकारी होती है, जो एक नज़र में साफ़ तौर पर नहीं दिखती. ज़्यादा जानकारी पाने के लिए, एआई की मदद लें:
Why does this request fail?
सोर्स फ़ाइलों को समझना
ऐसा बहुत कम होता है कि आपने अपनी वेबसाइट पर पूरा कोड खुद लिखा हो - क्या आपको नहीं पता कि किसी स्क्रिप्ट का इस्तेमाल किस काम के लिए किया जाता है? एआई असिस्टेंस की मदद से ये काम किए जा सकते हैं:
What is this file used for?
पेज की परफ़ॉर्मेंस की जांच करना
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी खराब है? किसी वेबसाइट के धीमे होने की असल वजह का पता लगाना मुश्किल हो सकता है. एआई असिस्टेंट, इन समस्याओं की जांच कर सकता है और उनके समाधानों का सुझाव दे सकता है:
Help me optimize my LCP score
एआई से मदद लेने वाली सुविधा को काम करते हुए देखें
क्या आपको नहीं पता कि शुरू कैसे करें?
किसी इमेज का आसपेक्ट रेशियो ठीक करना
Make all teaser images always be 16:9
क्या किसी इमेज को अन्य इमेज की तरह काटा नहीं गया है?
- chrome.dev/cinemai/devtools/ पेज खोलें और DevTools खोलें.
- वीडियो देखकर ज़्यादा जानें सेक्शन ढूंढें और चुनें.
- एआई (AI) सहायता आइकॉन पर क्लिक करें.
- प्रॉम्प्ट:
Make all teaser images always be 16:9. Apply the suggested changeपर क्लिक करें और जारी रखें.- बटन बीच में होना चाहिए.
ओवरफ़्लो की समस्या ठीक करना
How can I make this element visible?
एलिमेंट नहीं दिख रहा है?
- chrome.dev/cinemai/devtools/ पेज खोलें और DevTools खोलें.
- स्कूबा डाइवर img एलिमेंट ढूंढें.
- एआई (AI) सहायता आइकॉन पर क्लिक करें.
- प्रॉम्प्ट:
How can I make this element visible without scrollbars?. Apply the suggested changeपर क्लिक करें और जारी रखें.- स्क्रीन पर गोताखोर दिखना चाहिए.
हेडर के बारे में जानकारी
Are there any security headers present?
किसी संसाधन के सुरक्षा हेडर के बारे में ज़्यादा जानने के लिए...
- chrome.dev/cinemai/devtools/ पेज खोलें और DevTools खोलें.
- नेटवर्क पैनल में,
v4-chrome.dev.jsअनुरोध चुनें. - एआई (AI) की मदद पाने के लिए बने आइकॉन पर क्लिक करें.
- प्रॉम्प्ट:
Are there any security headers present? - LLM, संसाधन पर सुरक्षा से जुड़े हेडर के बारे में बताएगा.
गड़बड़ी की रिपोर्ट बनाना
Write a detailed bug report for this network error, include title, summary, steps to reproduce and expected vs. actual results.
क्या कोई गड़बड़ी हुई? गड़बड़ी की पूरी जानकारी वाली रिपोर्ट तुरंत बनाएं.
- नेटवर्क से जुड़ी गड़बड़ी वाले वेब पेज के लिए, DevTools खोलें.
- नेटवर्क पैनल में, उस अनुरोध को चुनें जो पूरा नहीं हो सका.
- एआई की मदद से जवाब पाने की सुविधा वाले आइकॉन पर क्लिक करें.
- प्रॉम्प्ट:
Write a detailed bug report for this network error, include title, summary, steps to reproduce and expected vs. actual results. - एलएलएम, गड़बड़ी की एक रिपोर्ट जनरेट करेगा. इसे सीधे तौर पर समस्या ट्रैकर में कॉपी किया जा सकता है.
पूरी जानकारी
एआई की मदद से डीबग करना - DevToolTips
DevTools 130-132 में नया क्या है
शुरू करना
ज़रूरी शर्तें
ऑप्ट-इन करें
डेटा
इसे बेहतर बनाने में हमारी मदद करें!
यह सुविधा एक्सपेरिमेंट के तौर पर उपलब्ध है. आने वाले समय में इसमें बदलाव हो सकते हैं. इससे गलत या आपत्तिजनक जानकारी जनरेट हो सकती है, जो Google के विचारों से अलग हो सकती है. जवाबों पर वोट करें, ताकि हम उन्हें बेहतर बना सकें. साथ ही, हमें सुझाव/राय देते रहें!