पब्लिश होने की तारीख: 13 नवंबर, 2026
अगर आप इस साइट को नियमित तौर पर पढ़ते हैं, तो X, LinkedIn या Bluesky पर 'डेवलपर के लिए Chrome' को फ़ॉलो करें. इसके अलावा, अगर आपने इस हफ़्ते DevTools में नया क्या है पैनल खोला है, तो आपको यह खबर ज़रूर मिली होगी. हालांकि, जो लोग शिपिंग में व्यस्त थे उनके लिए: मॉडर्न वेब गाइडेंस अब स्टेबल वर्शन 1.0 के तौर पर उपलब्ध है.
Google I/O में सार्वजनिक तौर पर उपलब्ध होने से पहले वाले वर्शन को शेयर करने के बाद, हमने इसमें कई सुधार किए हैं. साथ ही, मॉडर्न वेब गाइडेंस को Firefox और Edge के साथ क्रॉस-ब्राउज़र सहयोग के तौर पर डेवलप किया है. हमने इस हफ़्ते लेखों, केस स्टडी, वीडियो, और दस्तावेज़ों के ज़रिए, इन बदलावों के बारे में विस्तार से बताया.
कम शब्दों में
फ़्रंटियर मॉडल, वेब डेवलपमेंट के लिए अक्सर लेगसी पैटर्न का इस्तेमाल करते हैं. उदाहरण के लिए, वे सीएसएस स्क्रोल-ड्रिवन ऐनिमेशन के बजाय JavaScript ऐनिमेशन लाइब्रेरी को प्राथमिकता देते हैं. इसके अलावा, वे पसंद के मुताबिक बनाए जा सकने वाले ड्रॉपडाउन के लिए appearance: base-select का इस्तेमाल करने के बजाय, नेस्ट किए गए जटिल div मॉन्स्टर बनाते हैं.
मॉडर्न वेब गाइडेंस, आपके प्रॉम्प्ट के आधार पर कम शब्दों में और टास्क के हिसाब से गाइड उपलब्ध कराता है. इससे इस समस्या को हल करने में मदद मिलती है. यहां बताया गया है कि 1.0 रिलीज़ में क्या नया है:
- विशेषज्ञों की समीक्षा की गई ज़्यादा गाइड: इनमें परफ़ॉर्मेंस, स्टाइल, सुलभता, सुरक्षा, निजता, फ़ॉर्म वगैरह शामिल हैं. हर स्किल की समीक्षा, तकनीकी डोमेन के किसी विशेषज्ञ ने की है और उसकी जांच की है. गाइड कैटलॉग में जाकर, स्किल ब्राउज़ की जा सकती हैं.
- डिफ़ॉल्ट रूप से क्रॉस-ब्राउज़र: Mozilla Firefox, Microsoft Edge, और Google Chrome बनाने वाली टीमों के साथ मिलकर काम करना. हर गाइड को बेसलाइन के साथ काम करने वाले डेटा और फ़ॉलबैक के साथ बेहतर बनाया गया है.
- सार्वजनिक इवैल सुइट: हज़ारों इवैल रन, जिन्हें सार्वजनिक इवैल डैशबोर्ड पर देखा जा सकता है. इससे पास रेट में बढ़ोतरी का पता चलता है.
मॉडर्न वेब गाइडेंस 1.0 के एलान वाली पोस्ट पढ़ें. इसमें आपको एआई की जानकारी में मौजूद कमियों को दूर करने के उदाहरण मिलेंगे. साथ ही, एजेंट के लिए Chrome DevTools के साथ एंड-टू-एंड वर्कफ़्लो और I/O की झलक से अपडेट करने के निर्देश मिलेंगे.
सिर्फ़ हमारी बातों पर भरोसा न करें
मॉडर्न वेब गाइडेंस के को-क्रिएटर होने के नाते, ज़ाहिर है कि हम थोड़े पक्षपाती हैं. देखें कि हमारे पार्टनर को Chrome के एआई कोडिंग टूल का पूरा सुइट इस्तेमाल करके कैसा लगा. उन्होंने इसे अपने रोज़मर्रा के वर्कफ़्लो में टेस्ट किया:
- Policybazaar और Pensionbazaar: बिल्ड-ऐंड-वेरिफ़ाई लूप को बंद करके, नए पेज के टर्नअराउंड और यूज़र इंटरफ़ेस (यूआई) की गड़बड़ियों को 90% से ज़्यादा कम किया. वहीं, Policybazaar ने करीब 30 लैंडिंग पेजों पर, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का मैन्युअल ऑडिट करने में लगने वाले समय को 92% कम किया.
- MetaMask: मॉडर्न वेब गाइडेंस को तीन लाइनों वाले पीआर रिव्यू बॉट में शामिल किया गया. इससे करीब 480 पुल रिक्वेस्ट की समीक्षा की गई. साथ ही, सुलभता और सिमैंटिक एचटीएमएल से जुड़ी 43 गड़बड़ियां ठीक की गईं. इसमें औसतन 15 मिनट लगे.
- WeTV: सीआई/सीडी में, एजेंट के लिए Chrome DevTools और मॉडर्न वेब गाइडेंस को जोड़ा गया. इससे सीएलएस में बार-बार होने वाली 90% समस्याओं का अपने-आप पता लगाने और उन्हें ठीक करने में मदद मिली. साथ ही, डीबग करने में लगने वाले समय में 87% की कमी आई.
- note inc.: इसके लिए, उन्होंने अपने इंटरनल डिज़ाइन सिस्टम के नियमों के साथ मॉडर्न वेब गाइडेंस को जोड़ा. इससे मॉडर्न वेब की जांच में पास होने की दर 61% से बढ़कर 94% हो गई. साथ ही, एलसीपी इमेज को सही तरीके से प्राथमिकता देने की दर में 28% की बढ़ोतरी हुई.
अपनी प्रोफ़ाइल बनाना शुरू करें
अगर आपने अपने एजेंट को मॉडर्न वेब गाइडेंस इंस्टॉल करने के लिए कहा है, तो हो सकता है कि आपको सही नतीजे मिलें. हालांकि, अपने प्रोजेक्ट और एजेंट को सिलसिलेवार तरीके से सेट अप करने के लिए, इस npx कमांड का इस्तेमाल करें.
npx modern-web-guidance@latest install
GitHub पर इंस्टॉल करने के अन्य विकल्प भी देखे जा सकते हैं.
सेट अप करने के बाद, इस्तेमाल के नए उदाहरणों के बारे में ज़्यादा जानें. साथ ही, यह भी जानें कि मॉडर्न वेब गाइडेंस 1.0 कैसे काम करता है:
- मौजूदा कोड बेस को आधुनिक बनाना:
npx modern-web-guidance@latest legacy-scan, कॉन्टेक्स्ट के हिसाब से एजेंट की समीक्षा के साथ, सिंटैक्स की तेज़ लोकल जांच को कैसे जोड़ता है, ताकि बिना किसी शोर-शराबे के तकनीकी क़र्ज़ को कम किया जा सके. - कोड जनरेट करने के अलावा: डेवलपर के लिए लगातार सीखने की सुविधा: एआई एजेंट की मदद से कोडिंग करते समय, मॉडर्न वेब गाइडेंस को इंटरैक्टिव लर्निंग और डिस्कवरी टूल के तौर पर इस्तेमाल करने का तरीका जानें. इससे आपको मॉडर्न एचटीएमएल, सीएसएस, और वेब एपीआई की सुविधाओं के बारे में अप-टू-डेट जानकारी मिलती है.
- डिफ़ॉल्ट रूप से क्रॉस-ब्राउज़र: Baseline के फ़ॉलबैक कैसे काम करते हैं:
गाइड, लाइव वेब-सुविधाओं के डेटा का इस्तेमाल कैसे करती हैं, ताकि आपके ब्राउज़र के टारगेट के लिए, परतदार वृद्धि,
@supportsक्वेरी, और पॉलीफ़िल को मैच किया जा सके. - वेब डेवलपमेंट में एआई से होने वाली 10 सबसे बड़ी गलतियां: ऐक्सेसिबिलिटी, उपयोगकर्ता अनुभव, परफ़ॉर्मेंस, और सुरक्षा से जुड़ी 10 आम गलतियों के बारे में जानें. इनमें, सबसे नए फ़्रंटियर मॉडल भी मॉडर्न वेब की हमारी करीब आधी जांचों में फ़ेल हो जाते हैं.
- कोडिंग एजेंट के लिए लोकल वेक्टर सर्च: 507 एमबी से लेकर सात लाइन वाले लूप तक: जानें कि मॉडर्न वेब गाइडेंस, 200 से ज़्यादा गाइड के नॉलेज बेस से काम की गाइड को मिलीसेकंड में कैसे हासिल करता है. इसके लिए, एजेंट की कॉन्टेक्स्ट विंडो को भरने की ज़रूरत नहीं पड़ती.
Chrome की मदद से, एजेंटिक वेब डेवलपमेंट के लिए आगे क्या किया जा सकता है
अपने कोडिंग एजेंट के साथ मॉडर्न वेब गाइडेंस का इस्तेमाल करके, आपको एक बेहतरीन शुरुआत मिलती है. हालांकि, आपको इससे भी आगे जाना चाहिए. आपके एजेंट को उस कोड को चलाने, उसकी जांच करने, और उसकी पुष्टि करने के लिए, एक असली ब्राउज़र की ज़रूरत होती है.
एक साल से ज़्यादा समय से, एजेंट के लिए Chrome DevTools, कोडिंग एजेंट को लाइव रनटाइम विज़िबिलिटी दे रहा है. इसके लिए, वह कई तरह के टूल उपलब्ध कराता है. इनमें सुलभता और परफ़ॉर्मेंस की जांच करने से लेकर, मेमोरी डीबग करने और ऐनिमेशन रिकॉर्ड करने तक के टूल शामिल हैं. इससे आपका एजेंट, उन्हें बेहतर बना सकता है.
आने वाले हफ़्तों में, हम एजेंट के लिए Chrome DevTools की अगली उपलब्धि का जश्न मना रहे हैं. Chrome से अपने एजेंट को सही कॉन्टेक्स्ट पास करना और भी आसान हो जाएगा.
मॉडर्न वेब गाइडेंस 1.0 को आज़माएं और हमें बताएं कि आपको यह कैसा लगा. मॉडर्न वेब गाइडेंस और एजेंट के लिए Chrome DevTools, दोनों को GitHub पर ओपन सोर्स के तौर पर बनाया गया है. अगर आपको वेब प्लैटफ़ॉर्म का कोई ऐसा टास्क दिखता है जिसे आपका एजेंट अब भी गलत तरीके से पूरा करता है या आपके पास कोई ऐसा आइडिया है जिस पर हमें आगे काम करना चाहिए, तो कोई समस्या खोलें और हमें बताएं.