Trusted Types के उल्लंघन ठीक करने से जुड़ी सहायता
Trusted Type के उल्लंघनों पर ब्रेकपॉइंट
अब सोर्स पैनल में, भरोसेमंद टाइप के उल्लंघन पर ब्रेकपॉइंट सेट किए जा सकते हैं और अपवादों को पकड़ा जा सकता है.
Trusted Types API, डीओएम पर आधारित क्रॉस-साइट स्क्रिप्टिंग की कमियों को रोकने में आपकी मदद करता है. Trusted Types की मदद से, डीओएम XSS की कमज़ोरियों से सुरक्षित ऐप्लिकेशन लिखने, उनकी समीक्षा करने, और उन्हें बनाए रखने का तरीका यहां जानें.
सोर्स पैनल में, डिबगर साइडबार पैनल खोलें. सीएसपी उल्लंघन के ब्रेकपॉइंट सेक्शन को बड़ा करें. इसके बाद, भरोसेमंद टाइप के उल्लंघन चेकबॉक्स को चुनें, ताकि अपवादों पर रोक लगाई जा सके. इस डेमो पेज पर जाकर, इसे खुद आज़माएं.
Chromium से जुड़ी समस्या: 1142804
सोर्स पैनल में मौजूद समस्या को 'समस्याएं' टैब से लिंक करना
सोर्स पैनल में अब उस लाइन के बगल में चेतावनी वाला आइकॉन दिखता है जो भरोसेमंद टाइप का उल्लंघन करती है. अपवाद की झलक देखने के लिए, इस पर कर्सर घुमाएं. समस्याएं टैब को बड़ा करने के लिए, इस पर क्लिक करें. इसमें अपवादों के बारे में ज़्यादा जानकारी दी गई है. साथ ही, इसे ठीक करने के बारे में निर्देश दिए गए हैं.
Chromium से जुड़ी समस्या: 1150883
व्यू पोर्ट से बाहर के नोड का स्क्रीनशॉट कैप्चर करना
अब पूरे नोड के लिए नोड के स्क्रीनशॉट कैप्चर किए जा सकते हैं. इनमें फ़ोल्ड के नीचे मौजूद कॉन्टेंट भी शामिल है. इससे पहले, व्यूपोर्ट में न दिखने वाले कॉन्टेंट के लिए स्क्रीनशॉट काट दिया जाता था. अब पूरे पेज के स्क्रीनशॉट भी ज़्यादा सटीक होते हैं.
Elements पैनल में, किसी एलिमेंट पर राइट क्लिक करें और Capture node screenshot को चुनें.
Chromium से जुड़ी समस्या: 1003629
नेटवर्क अनुरोधों के लिए नया 'ट्रस्ट टोकन' टैब
नए ट्रस्ट टोकन टैब की मदद से, ट्रस्ट टोकन के नेटवर्क अनुरोधों की जांच करें.
ट्रस्ट टोकन एक नया एपीआई है. इससे पैसिव ट्रैकिंग के बिना, धोखाधड़ी से निपटने और इंसान और बॉट में अंतर करने में मदद मिलती है. Trust Tokens का इस्तेमाल शुरू करने का तरीका जानें.
डीबग करने से जुड़ी ज़्यादा सुविधाएं, आने वाली रिलीज़ में उपलब्ध होंगी.
Chromium से जुड़ी समस्या: 1126824
Lighthouse पैनल में Lighthouse 7
Lighthouse पैनल अब Lighthouse 7 का इस्तेमाल कर रहा है. बदलावों की पूरी सूची देखने के लिए, रिलीज़ नोट देखें.
Lighthouse 7 में नए ऑडिट:
- सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) वाली इमेज को पहले से लोड करें. इस ऑडिट से यह पता चलता है कि एलसीपी एलिमेंट में इस्तेमाल की गई इमेज को पहले से लोड किया गया है या नहीं, ताकि एलसीपी लोड होने में लगने वाला समय कम किया जा सके.
Issuesपैनल में लॉग की गई समस्याएं. इससेIssuesपैनल में मौजूद, ऐसी समस्याओं की सूची दिखती है जिन्हें हल नहीं किया गया है.- प्रोग्रेसिव वेब ऐप्लिकेशन (PWA). PWA कैटगरी में काफ़ी बदलाव हुआ है.
इंस्टॉल किया जा सकता है ग्रुप में अब सिर्फ़ उन जांचों को शामिल किया जाता है जो Chrome में इंस्टॉल करने की ज़रूरी शर्तों को पूरा करती हैं. ये वही सिग्नल हैं जो मेनिफ़ेस्ट पैन में दिखते हैं.
- "रजिस्टर करता है एक सर्विस वर्कर…" ऑडिट को PWA ऑप्टिमाइज़ किया गया ग्रुप में ले जाया गया है. साथ ही, "HTTPS का इस्तेमाल करता है" ऑडिट को अब "इंस्टॉल करने की ज़रूरी शर्तों" के मुख्य ऑडिट के हिस्से के तौर पर शामिल किया गया है.
- तेज़ और भरोसेमंद ग्रुप हटा दिया जाता है. "इंस्टॉल करने की सुविधा से जुड़ी ज़रूरी शर्तों" की नई ऑडिट में, ऑफ़लाइन होने पर काम करने की सुविधा की जांच शामिल है. इसलिए, "ऑफ़लाइन होने पर, मौजूदा पेज और start_url, 200 कोड का जवाब देते हैं" ऑडिट को हटा दिया गया है. "मोबाइल नेटवर्क पर पेज लोड होने की गति ज़रूरत के मुताबिक तेज़ है" ऑडिट को भी हटा दिया गया था.
Chromium से जुड़ी समस्या: 772558
Elements पैनल से जुड़े अपडेट
सीएसएस :target स्टेट को लागू करने की सुविधा
अब DevTools का इस्तेमाल करके, सीएसएस :target स्टेट को लागू किया जा सकता है और उसकी जांच की जा सकती है.
तत्व पैनल में, कोई एलिमेंट चुनें और एलिमेंट की स्थिति को टॉगल करें. स्टाइल को लागू करने और उनकी जांच करने के लिए, :target चेकबॉक्स को चुनें.
जब यूआरएल में हैश और किसी एलिमेंट का आईडी एक जैसा हो, तब एलिमेंट को स्टाइल करने के लिए :target स्यूडो-क्लास का इस्तेमाल करें. इसे खुद आज़माने के लिए, यह डेमो देखें. DevTools की इस नई सुविधा की मदद से, आपको इन स्टाइल को टेस्ट करने का विकल्प मिलता है. इसके लिए, आपको हर बार यूआरएल को मैन्युअल तरीके से बदलने की ज़रूरत नहीं पड़ती.
Chromium से जुड़ी समस्या: 1156628
डुप्लीकेट एलिमेंट का नया शॉर्टकट
किसी एलिमेंट को तुरंत क्लोन करने के लिए, एलिमेंट डुप्लीकेट करें शॉर्टकट का इस्तेमाल करें.
Elements पैनल में मौजूद किसी एलिमेंट पर राइट क्लिक करें. इसके बाद, Duplicate element चुनें. इसके नीचे एक नया एलिमेंट बनाया जाएगा.
इसके अलावा, कीबोर्ड शॉर्टकट का इस्तेमाल करके भी एलिमेंट को डुप्लीकेट किया जा सकता है:
- Mac:
Shift+Option+⬇️ - Windows/ Linux:
Shift+Alt+⬇️
Chromium से जुड़ी समस्याएं: 1150797, 1150797
कस्टम सीएसएस प्रॉपर्टी के लिए कलर पिकर
स्टाइल पैनल में अब कस्टम सीएसएस प्रॉपर्टी के लिए कलर पिकर दिखते हैं.
इसके अलावा, Shift कुंजी को दबाकर रखें और कलर पिकर पर क्लिक करें. इससे, रंग की वैल्यू के आरजीबीए, एचएसएलए, और हेक्स फ़ॉर्मैट के बीच साइकल किया जा सकता है.
Chromium से जुड़ी समस्या: 1147016
सीएसएस प्रॉपर्टी कॉपी करने के लिए नए शॉर्टकट
अब कुछ नए शॉर्टकट की मदद से, सीएसएस प्रॉपर्टी को तेज़ी से कॉपी किया जा सकता है.
तत्व पैनल में जाकर, कोई एलिमेंट चुनें. इसके बाद, वैल्यू कॉपी करने के लिए, स्टाइल पैन में मौजूद किसी सीएसएस क्लास या सीएसएस प्रॉपर्टी पर राइट क्लिक करें.
सीएसएस क्लास के लिए कॉपी करने के विकल्प:
- कॉपी सिलेक्टर. मौजूदा सिलेक्टर का नाम कॉपी करें.
- नियम कॉपी करें. मौजूदा सिलेक्टर के नियम को कॉपी करें.
- सभी एलान कॉपी करें: मौजूदा नियम के तहत सभी एलान कॉपी करें. इनमें अमान्य और प्रीफ़िक्स वाली प्रॉपर्टी भी शामिल हैं.
सीएसएस प्रॉपर्टी के लिए कॉपी करने के विकल्प:
- एलान कॉपी करें. मौजूदा लाइन के एलान को कॉपी करें.
- प्रॉपर्टी कॉपी करें. मौजूदा लाइन की प्रॉपर्टी कॉपी करें.
- वैल्यू कॉपी करें: इस विकल्प का इस्तेमाल करके, मौजूदा लाइन की वैल्यू कॉपी करें.
Chromium से जुड़ी समस्या: 1152391
कुकी से जुड़े अपडेट
डिकोड किए गए यूआरएल वाली कुकी दिखाने का नया विकल्प
अब कुकी पैनल में, यूआरएल-डीकोड की गई कुकी की वैल्यू देखी जा सकती है.
ऐप्लिकेशन पैनल पर जाएं और कुकी पैन चुनें. सूची में मौजूद कोई भी कुकी चुनें. डिकोड की गई कुकी देखने के लिए, डिकोड किया गया यूआरएल दिखाएं चेकबॉक्स को चालू करें.
Chromium से जुड़ी समस्या: 997625
सिर्फ़ दिखने वाली कुकी मिटाएं
कुकी वाले पैनल में मौजूद सभी कुकी मिटाएं बटन को अब फ़िल्टर की गई कुकी मिटाएं बटन से बदल दिया गया है.
ऐप्लिकेशन पैनल > कुकी पैनल में, कुकी को फ़िल्टर करने के लिए टेक्स्टबॉक्स में टेक्स्ट डालें. यहां दिए गए उदाहरण में, हमने "PREF" के हिसाब से सूची को फ़िल्टर किया है. दिख रही कुकी मिटाने के लिए, फ़िल्टर की गई कुकी मिटाएं बटन पर क्लिक करें. फ़िल्टर किए गए टेक्स्ट को मिटाएं. इसके बाद, आपको सूची में अन्य कुकी दिखेंगी. इससे पहले, आपके पास सिर्फ़ सभी कुकी मिटाने का विकल्प होता था.
Chromium से जुड़ी समस्या: 978059
स्टोरेज पैन में, तीसरे पक्ष की कुकी मिटाने का नया विकल्प
स्टोरेज पैनल में साइट का डेटा मिटाते समय, DevTools अब डिफ़ॉल्ट रूप से सिर्फ़ पहले-पक्ष की कुकी मिटाता है. तीसरे पक्ष की कुकी भी मिटाने के लिए, तीसरे पक्ष की कुकी शामिल हैं को चालू करें.
Chromium से जुड़ी समस्या: 1012337
कस्टम डिवाइसों के लिए, यूज़र-एजेंट क्लाइंट हिंट में बदलाव करना
अब आपके पास कस्टम डिवाइसों के लिए, User-Agent Client Hints में बदलाव करने का विकल्प है.
सेटिंग > डिवाइस पर जाएं. इसके बाद, कस्टम डिवाइस जोड़ें... पर क्लिक करें. क्लाइंट के संकेतों में बदलाव करने के लिए, उपयोगकर्ता एजेंट क्लाइंट के संकेत सेक्शन को बड़ा करें.
यूज़र-एजेंट क्लाइंट हिंट, यूज़र-एजेंट स्ट्रिंग का विकल्प है. इससे डेवलपर, निजता बनाए रखने और उपयोगकर्ता के अनुभव को बेहतर बनाने के तरीके से, उपयोगकर्ता के ब्राउज़र के बारे में जानकारी ऐक्सेस कर सकते हैं. web.dev/user-agent-client-hints/ पर जाकर, User-Agent Client Hints के बारे में ज़्यादा जानें.
Chromium से जुड़ी समस्या: 1073909
नेटवर्क पैनल से जुड़े अपडेट
"नेटवर्क लॉग रिकॉर्ड करें" सेटिंग को सेव करता है
DevTools अब "नेटवर्क लॉग रिकॉर्ड करें" सेटिंग को सेव करता है. पहले, जब भी कोई पेज फिर से लोड होता था, तब DevTools उपयोगकर्ता की पसंद को रीसेट कर देता था.
Chromium से जुड़ी समस्या: 1122580
नेटवर्क पैनल में WebTransport कनेक्शन देखना
नेटवर्क पैनल में अब WebTransport कनेक्शन दिखते हैं.
WebTransport एक नया एपीआई है. यह कम इंतज़ार के समय में, क्लाइंट-सर्वर के बीच दोनों तरफ़ से मैसेज भेजने की सुविधा देता है. इसके इस्तेमाल के उदाहरणों के बारे में ज़्यादा जानें. साथ ही, web.dev/webtransport/ पर जाकर, इसे लागू करने के बारे में सुझाव, शिकायत या राय दें.
Chromium से जुड़ी समस्या: 1152290
"ऑनलाइन" का नाम बदलकर "कोई थ्रॉटलिंग नहीं" किया गया
नेटवर्क इम्यूलेशन के विकल्प "ऑनलाइन" का नाम बदलकर अब "नो थ्रॉटलिंग" कर दिया गया है.
Chromium से जुड़ी समस्या: 1028078
कंसोल, सोर्स पैनल, और स्टाइल पैनल में कॉपी करने के नए विकल्प
कंसोल और सोर्स पैनल में ऑब्जेक्ट कॉपी करने के लिए नए शॉर्टकट
अब Console और Sources पैनल में मौजूद नए शॉर्टकट की मदद से, ऑब्जेक्ट वैल्यू कॉपी की जा सकती हैं. यह खास तौर पर तब काम आता है, जब आपको कोई बड़ा ऑब्जेक्ट (जैसे, लंबी ऐरे) कॉपी करनी हो.
Chromium से जुड़ी समस्याएं: 1149859, 1148353
सोर्स पैनल और स्टाइल पैन में फ़ाइल का नाम कॉपी करने के लिए नए शॉर्टकट
अब फ़ाइल के नाम को कॉपी किया जा सकता है. इसके लिए, इन पर राइट क्लिक करें:
- सोर्स पैनल में मौजूद कोई फ़ाइल या
- स्टाइल पैनल में फ़ाइल का नाम, जो एलिमेंट पैनल में मौजूद होता है
फ़ाइल का नाम कॉपी करने के लिए, संदर्भ मेन्यू में जाकर फ़ाइल का नाम कॉपी करें को चुनें.
Chromium से जुड़ी समस्या: 1155120
फ़्रेम की जानकारी वाले व्यू को अपडेट करना
फ़्रेम की जानकारी वाले व्यू में, नए सर्विस वर्कर की जानकारी
DevTools अब डेडिकेटेड सर्विस वर्कर को उस फ़्रेम के नीचे दिखाता है जो उन्हें बनाता है.
ऐप्लिकेशन पैनल में, सर्विस वर्कर वाले फ़्रेम को बड़ा करें. इसके बाद, जानकारी देखने के लिए सर्विस वर्कर ट्री में जाकर, कोई सर्विस वर्कर चुनें.
Chromium से जुड़ी समस्या: 1122507
फ़्रेम की ज़्यादा जानकारी वाले व्यू में मेमोरी की जानकारी मेज़र करना
performance.measureMemory() एपीआई की स्थिति अब एपीआई की उपलब्धता सेक्शन में दिखती है.
नया performance.measureMemory() एपीआई, पूरे वेब पेज के लिए मेमोरी के इस्तेमाल का अनुमान लगाता है. इस लेख में, इस नए एपीआई की मदद से अपने वेब पेज के कुल मेमोरी इस्तेमाल पर नज़र रखने का तरीका जानें.
Chromium से जुड़ी समस्या: 1139899
'समस्याएं' टैब से सुझाव/राय देना या शिकायत करना
अगर आपको किसी समस्या के मैसेज को बेहतर बनाना है, तो Console या ज़्यादा सेटिंग > ज़्यादा टूल > समस्याएं > समस्याएं टैब पर जाएं. समस्या के मैसेज को बड़ा करें और क्या समस्या का यह मैसेज आपके लिए काम का था? पर क्लिक करें. इसके बाद, पॉप-अप में सुझाव/राय दें या शिकायत करें.
परफ़ॉर्मेंस पैनल में छोड़े गए फ़्रेम
परफ़ॉर्मेंस पैनल में लोड होने की परफ़ॉर्मेंस का विश्लेषण करते समय, फ़्रेम सेक्शन अब ड्रॉप किए गए फ़्रेम को लाल रंग में मार्क करता है. फ़्रेम रेट जानने के लिए, इस पर कर्सर घुमाएं.
Chromium से जुड़ी समस्या: 1075865
डिवाइस मोड में, फ़ोल्ड किए जा सकने वाले और दो स्क्रीन वाले डिवाइसों को एम्युलेट करना
अब DevTools में, ड्यूअल-स्क्रीन और फ़ोल्ड किए जा सकने वाले डिवाइसों को एम्युलेट किया जा सकता है.
डिवाइस टूलबार चालू करने के बाद, इनमें से कोई एक डिवाइस चुनें: Surface Duo या Samsung Galaxy Fold.
सिंगल-स्क्रीन या फ़ोल्ड किए गए और ड्यूअल-स्क्रीन या अनफ़ोल्ड किए गए मोड के बीच टॉगल करने के लिए, नए स्पैन आइकॉन पर क्लिक करें.
नई सीएसएस मीडिया screen-spanning सुविधा और JavaScript getWindowSegments API को ऐक्सेस करने के लिए, वेब प्लैटफ़ॉर्म की एक्सपेरिमेंटल सुविधाएं भी चालू की जा सकती हैं. एक्सपेरिमेंट आइकॉन, वेब प्लैटफ़ॉर्म की एक्सपेरिमेंट के तौर पर उपलब्ध सुविधाओं वाले फ़्लैग की स्थिति दिखाता है. फ़्लैग चालू होने पर, आइकॉन हाइलाइट हो जाता है. chrome://flags पर जाएं और फ़्लैग को टॉगल करें.
Chromium से जुड़ी समस्या: 1054281
प्रयोग के तौर पर शुरू की गई सुविधाएं
Puppeteer Recorder की मदद से, ब्राउज़र की टेस्टिंग अपने-आप होने की सुविधा चालू करना
DevTools अब ब्राउज़र के साथ आपके इंटरैक्शन के आधार पर, Puppeteer स्क्रिप्ट जनरेट कर सकता है. इससे, ब्राउज़र की टेस्टिंग को अपने-आप होने वाली प्रोसेस में बदलना आसान हो जाता है. Puppeteer एक Node.js लाइब्रेरी है. यह Chrome या Chromium को DevTools Protocol के ज़रिए कंट्रोल करने के लिए, एक हाई-लेवल एपीआई उपलब्ध कराती है.
इस डेमो पेज पर जाएं. DevTools में सोर्स पैनल खोलें. बाईं ओर मौजूद पैनल में, रिकॉर्डिंग टैब को चुनें. नई रिकॉर्डिंग जोड़ें और फ़ाइल को नाम दें. उदाहरण के लिए, test01.js.
इंटरैक्शन रिकॉर्ड करने के लिए, सबसे नीचे मौजूद रिकॉर्ड करें बटन पर क्लिक करें. स्क्रीन पर दिया गया फ़ॉर्म भरें. देखें कि Puppeteer कमांड को फ़ाइल में सही तरीके से जोड़ा गया है या नहीं. रिकॉर्डिंग बंद करने के लिए, रिकॉर्ड करें बटन पर फिर से क्लिक करें.
स्क्रिप्ट चलाने के लिए, Puppeteer की आधिकारिक साइट पर मौजूद शुरू करने से जुड़ी गाइड में दिया गया तरीका अपनाएं.
कृपया ध्यान दें कि यह एक्सपेरिमेंट के शुरुआती चरण में है. हम समय के साथ, Recorder की सुविधाओं को बेहतर बनाने और उन्हें ज़्यादा डिवाइसों पर उपलब्ध कराने के लिए काम कर रहे हैं.
Chromium से जुड़ी समस्या: 1144127
स्टाइल पैनल में फ़ॉन्ट एडिटर
नया फ़ॉन्ट एडिटर, फ़ॉन्ट से जुड़ी प्रॉपर्टी के लिए स्टाइल पैन में एक पॉपओवर एडिटर है. इससे आपको अपने वेबपेज के लिए सही टाइपोग्राफ़ी ढूंढने में मदद मिलती है.
पॉपओवर, टाइपोग्राफ़ी में डाइनैमिक तरीके से बदलाव करने के लिए, साफ़-सुथरा यूज़र इंटरफ़ेस (यूआई) उपलब्ध कराता है. इसमें कई तरह के इनपुट टाइप होते हैं, जिन्हें आसानी से समझा जा सकता है.
Chromium से जुड़ी समस्या: 1093229
सीएसएस फ़्लेक्सबॉक्स डीबग करने वाले टूल
DevTools ने पिछली रिलीज़ के बाद से, फ़्लेक्सबॉक्स डीबग करने की सुविधा को एक्सपेरिमेंट के तौर पर जोड़ा है.
DevTools अब एक गाइडलाइन दिखाता है, ताकि आपको सीएसएस align-items प्रॉपर्टी को बेहतर तरीके से विज़ुअलाइज़ करने में मदद मिल सके. सीएसएस gap प्रॉपर्टी भी काम करती है. यहां दिए गए उदाहरण में, हमारे पास सीएसएस gap: 12px; है. हर गैप के लिए हैचिंग पैटर्न देखें.
Chromium से जुड़ी समस्या: 1139949
सीएसपी के उल्लंघन का नया टैब
नए सीएसपी उल्लंघन टैब में, कॉन्टेंट की सुरक्षा के बारे में नीति (सीएसपी) के सभी उल्लंघनों को एक नज़र में देखें. यह नया टैब एक एक्सपेरिमेंट है. इससे, उन वेब पेजों पर काम करना आसान हो जाएगा जिनमें सीएसपी और भरोसेमंद टाइप के उल्लंघन की संख्या ज़्यादा है.
Chromium से जुड़ी समस्या: 1137837
कलर कंट्रास्ट का नया हिसाब - अडवांस परसेप्चुअल कंट्रास्ट एल्गोरिदम (एपीसीए)
कलर पिकर में, AA/AAA दिशा-निर्देशों के कंट्रास्ट अनुपात की जगह, एडवांस परसेप्चुअल कंट्रास्ट एल्गोरिदम (एपीसीए) का इस्तेमाल किया जा रहा है.
APCA, कंट्रास्ट का हिसाब लगाने का एक नया तरीका है. यह रंग की पहचान से जुड़ी आधुनिक रिसर्च पर आधारित है. AA/AAA के दिशा-निर्देशों की तुलना में, APCA कॉन्टेक्स्ट पर ज़्यादा निर्भर करता है. कंट्रास्ट का हिसाब, टेक्स्ट की इन प्रॉपर्टी के आधार पर लगाया जाता है: स्पेस से जुड़ी प्रॉपर्टी (फ़ॉन्ट का वेट और साइज़), रंग (टेक्स्ट और बैकग्राउंड के बीच रोशनी में अंतर), और कॉन्टेक्स्ट (आसपास की रोशनी, आस-पास की चीज़ें, टेक्स्ट का मकसद).
इस उदाहरण में दिखाया गया है कि एपीसीए थ्रेशोल्ड 38% है. कंट्रास्ट रेशियो, दी गई वैल्यू के बराबर या उससे ज़्यादा होना चाहिए. इस वैल्यू का हिसाब, फ़ॉन्ट के वेट और साइज़ के आधार पर लगाया जाता है. इसके लिए, इस APCA लुकअप टेबल का इस्तेमाल किया जाता है.
Chromium से जुड़ी समस्या: 1121900
झलक दिखाने वाले चैनल डाउनलोड करना
Chrome Canary, Dev या Beta को डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. इन प्रीव्यू चैनलों से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, आपको वेब प्लैटफ़ॉर्म के नए एपीआई को आज़माने का मौका मिलता है. इसके अलावा, आपको अपनी साइट पर मौजूद समस्याओं का पता लगाने में मदद मिलती है. इससे पहले कि आपके उपयोगकर्ता उन समस्याओं का पता लगाएं!
Chrome DevTools टीम से संपर्क करना
नई सुविधाओं, अपडेट या DevTools से जुड़ी किसी अन्य चीज़ के बारे में चर्चा करने के लिए, इन विकल्पों का इस्तेमाल करें.
- हमें सुझाव/राय देने या शिकायत करने के लिए, crbug.com पर जाएं. साथ ही, किसी सुविधा का अनुरोध करने के लिए भी इसी लिंक पर जाएं.
- DevTools में, ज़्यादा विकल्प > सहायता > DevTools से जुड़ी समस्या की शिकायत करें का इस्तेमाल करके, DevTools से जुड़ी समस्या की शिकायत करें.
- @ChromeDevTools पर ट्वीट करें.
- DevTools के YouTube वीडियो में नया क्या है या DevTools के बारे में सलाह देने वाले YouTube वीडियो पर टिप्पणी करें.
DevTools में नया क्या है
DevTools में नया क्या है सीरीज़ में शामिल किए गए सभी विषयों की सूची.
- DevTools MCP सर्वर से जुड़े अपडेट
- ट्रेस शेयर करने की बेहतर सुविधा
- @starting-style के लिए सहायता
- डिस्प्ले के लिए एडिटर विजेट: मेसनरी
- Lighthouse 13
- Gemini से कोड के सुझाव पाना
- DevTools एमसीपी सर्वर के लिए बेहतर सुविधाएं
- एआई की मदद से फटाफट काम करना
- Gemini की मदद से, परफ़ॉर्मेंस के पूरे ट्रेस को डीबग करना
- ड्रॉवर ओरिएंटेशन को टॉगल करें
- Google Developer Program
- अन्य हाइलाइट
- आपके एआई एजेंट के लिए Chrome DevTools (MCP)
- Gemini की मदद से नेटवर्क डिपेंडेंसी ट्री को डीबग करना
- Gemini के साथ की गई चैट एक्सपोर्ट करना
- परफ़ॉर्मेंस पैनल में ट्रैक कॉन्फ़िगरेशन सेव किया गया
- आईपी पते की सुरक्षा की सुविधा वाले नेटवर्क अनुरोधों को फ़िल्टर करना
- तत्व > लेआउट टैब में मेसनरी लेआउट की सुविधा जोड़ी गई
- Lighthouse 12.8.2
- अन्य हाइलाइट
- Gemini की मदद से ज़्यादा अहम जानकारी को डीबग करना
- 'नेटवर्क की स्थितियां' में 'डेटा सेव करें' हेडर को एम्युलेट करना
- सीएसएस प्रॉपर्टी की टूलटिप में, बेसलाइन का स्टेटस देखना
- उपयोगकर्ता एजेंट क्लाइंट के संकेतों में डिवाइस के साइज़, डाइमेंशन या कॉन्फ़िगरेशन को बदलना
- Lighthouse 12.8.0
- अन्य हाइलाइट
- Chrome DevTools को ज़्यादा भरोसेमंद और असरदार बनाया गया है
- स्टाइलिंग के लिए, एआई की मदद से इमेज अपलोड करना
- नेटवर्क पैनल में मौजूद टेबल में अनुरोध के हेडर जोड़ना
- Google I/O 2025 की हाइलाइट देखें
- अन्य हाइलाइट
- परफ़ॉर्मेंस पैनल में सुधार
- 'नेटवर्क डिपेंडेंसी ट्री' की अहम जानकारी में पहले से कनेक्ट किए गए ऑरिजिन
- 'दस्तावेज़ के अनुरोध में लगने वाला समय' की अहम जानकारी में, सर्वर से जवाब मिलने और रीडायरेक्ट होने में लगने वाला समय
- नेटवर्क अनुरोधों की खास जानकारी में रीडायरेक्ट
- परफ़ॉर्मेंस ट्रेस में कम नॉइज़
- 'JavaScript के नमूने बंद करें' सुविधा बंद की गई
- सेंसर में जियोलोकेशन की सटीक जानकारी देने वाला पैरामीटर
- Elements पैनल में किए गए सुधार
- जटिल सीएसएस वैल्यू को आसानी से डीबग करना
- Elements > Styles में@function का इस्तेमाल करने की सुविधा
- नेटवर्क पैनल में किए गए सुधार
- has-request-header फ़िल्टर
- आइसोलेटेड वेब ऐप्लिकेशन में Direct Sockets
- अन्य हाइलाइट
- सुलभता
- Google I/O 2025 का एडिशन
- Gemini for Workspace की मदद से, सीएसएस में बदलाव करना और उन्हें सेव करना
- किसी फ़ाइल फ़ोल्डर को कनेक्ट करना और सोर्स फ़ाइलों में किए गए बदलावों को वापस सेव करना
- Gemini से परफ़ॉर्मेंस की अहम जानकारी के बारे में पूछना
- Gemini की मदद से परफ़ॉर्मेंस से जुड़ी जानकारी को एनोटेट करना
- Gemini के साथ की जा रही चैट में स्क्रीनशॉट जोड़ना
- परफ़ॉर्मेंस पैनल में नई अहम जानकारी
- डुप्लीकेट JavaScript
- लेगसी JavaScript
- अनुमान लगाने की सुविधा अब नियम वाले टैग के साथ काम करती है
- Lighthouse 12.6.0
- अन्य हाइलाइट
- सुलभता
- परफ़ॉर्मेंस पैनल में सुधार
- परफ़ॉर्मेंस से जुड़ी नई अहम जानकारी
- हाइलाइट करने के लिए क्लिक करें
- नेटवर्क अनुरोधों की खास जानकारी में सर्वर के समय की जानकारी
- 'निजता और सुरक्षा' में कुकी फ़िल्टर करना
- सभी पैनल की टेबल में साइज़ को केबी में दिखाना
- 'अपने-आप भरने' की सुविधा, Elements > Styles में कॉर्नर-शेप और कॉर्नर-*-शेप के साथ काम करती है
- एक्सपेरिमेंट के तौर पर उपलब्ध: डीओएम में मौजूद एलिमेंट और एट्रिब्यूट से जुड़ी समस्याओं को हाइलाइट करना
- Lighthouse 12.5.0
- अन्य हाइलाइट
- परफ़ॉर्मेंस पैनल में सुधार
- परफ़ॉर्मेंस में प्रोफ़ाइल और फ़ंक्शन कॉल के लिए, ओरिजिन और स्क्रिप्ट के लिंक
- फ़ेज़ के हिसाब से एलसीपी फ़ील्ड डेटा के लिए सहायता
- नेटवर्क डिपेंडेंसी ट्री से जुड़ी अहम जानकारी
- खास जानकारी में कुल और खुद के समय के बजाय अवधि दिख रही है
- सबसे ज़्यादा स्टैक वाले साइडबार को हाइलाइट करना
- अलग-अलग पैनल के लिए, खाली स्टेट को बेहतर बनाया गया
- Elements पैनल में सुलभता ट्री व्यू
- Lighthouse 12.4.0
- अन्य हाइलाइट
- निजता और सुरक्षा पैनल
- परफ़ॉर्मेंस पैनल में सुधार
- कैलिब्रेट किए गए सीपीयू थ्रॉटलिंग के प्रीसेट
- एक ही एआई चैट में अलग-अलग परफ़ॉर्मेंस इवेंट चुनना
- परफ़ॉर्मेंस में पहले और तीसरे पक्ष की हाइलाइटिंग
- मार्कर टूलटिप और इनसाइट में फ़ील्ड का डेटा
- फ़ोर्स्ड रीफ़्लो की अहम जानकारी
- 'डीओएम साइज़ को ऑप्टिमाइज़ करें' इनसाइट
- console.timeStamp की मदद से, परफ़ॉर्मेंस ट्रेस को बढ़ाना
- Elements पैनल में किए गए सुधार
- ऐनिमेशन वाली स्टाइल की रीयल-टाइम वैल्यू
- :open सूडो-क्लास और अलग-अलग सूडो-एलिमेंट के लिए सहायता
- कंसोल के सभी मैसेज कॉपी करें
- मेमोरी पैनल में बाइट यूनिट
- अन्य हाइलाइट
- एआई के साथ की गई चैट का स्थायी इतिहास
- परफ़ॉर्मेंस पैनल में सुधार
- इमेज डिलीवरी की अहम जानकारी
- क्लासिक और मॉडर्न कीबोर्ड नेविगेशन
- फ़्लेम चार्ट में काम की नहीं लगने वाली स्क्रिप्ट को अनदेखा करना
- होवर करने पर टाइमलाइन मार्कर और रेंज हाइलाइट करना
- थ्रॉटलिंग की सुझाई गई सेटिंग
- ओवरले में टाइमिंग मार्कर
- खास जानकारी में JS कॉल के स्टैक ट्रेस
- बैज की सेटिंग को Elements में मेन्यू में ले जाया गया
- 'नया क्या है' पैनल की नई सुविधा
- Lighthouse 12.3.0
- अन्य हाइलाइट
- Gemini की मदद से, नेटवर्क के अनुरोधों, सोर्स फ़ाइलों, और परफ़ॉर्मेंस ट्रेस को डीबग करना
- एआई चैट का इतिहास देखना
- ऐप्लिकेशन > स्टोरेज में जाकर, एक्सटेंशन का स्टोरेज मैनेज करना
- परफ़ॉर्मेंस में सुधार
- लाइव मेट्रिक में इंटरैक्शन के फ़ेज़
- 'खास जानकारी' टैब में रेंडरिंग ब्लॉक करने की जानकारी
- scheduler.postTask इवेंट और उनके इनिशिएटर ऐरो के लिए सहायता
- ऐनिमेशन पैनल और एलिमेंट > स्टाइल टैब में किए गए सुधार
- Elements > Styles से Animations पर जाना
- 'कैलकुलेट किया गया' टैब में रीयल-टाइम अपडेट
- सेंसर में प्रेशर एम्युलेशन की गणना करना
- मेमोरी पैनल में, एक ही नाम वाले JS ऑब्जेक्ट को सोर्स के हिसाब से ग्रुप किया गया है
- सेटिंग के लिए नया लुक
- परफ़ॉर्मेंस के बारे में अहम जानकारी देने वाले पैनल को बंद कर दिया गया है और इसे DevTools से हटा दिया गया है
- अन्य हाइलाइट
- Gemini की मदद से सीएसएस को डीबग करना
- सेटिंग वाले टैब में जाकर, एआई की सुविधाओं को कंट्रोल करना
- परफ़ॉर्मेंस पैनल में सुधार
- परफ़ॉर्मेंस से जुड़े नतीजों को एनोटेट करना और शेयर करना
- परफ़ॉर्मेंस पैनल में ही परफ़ॉर्मेंस के बारे में अहम जानकारी पाएं
- लेआउट में होने वाले ज़्यादा बदलावों को आसानी से पहचानना
- कंपोज़िट नहीं किए गए ऐनिमेशन की पहचान करना
- हार्डवेयर के एक साथ कई काम करने के लेवल को सेंसर पर ले जाया गया
- पहचान छिपाकर लिखी गई स्क्रिप्ट को अनदेखा करें और स्टैक ट्रेस में अपने कोड पर फ़ोकस करें
- Elements > Styles: ग्रिड ओवरले और सीएसएस-वाइड कीवर्ड के लिए, sideways-* राइटिंग मोड की सुविधा
- टाइमस्पैन और स्नैपशॉट मोड में, नॉन-एचटीटीपी पेजों के लिए लाइटहाउस ऑडिट
- सुलभता सुविधाओं में सुधार
- अन्य हाइलाइट
- नेटवर्क पैनल में किए गए सुधार
- नेटवर्क फ़िल्टर को बेहतर बनाया गया है
- HAR फ़ाइलों को एक्सपोर्ट करने पर, अब डिफ़ॉल्ट रूप से संवेदनशील डेटा शामिल नहीं किया जाता
- Elements पैनल में किए गए सुधार
- text-emphasis-* प्रॉपर्टी के लिए ऑटोकंप्लीट वैल्यू
- बैज के साथ मार्क किए गए स्क्रोल ओवरफ़्लो
- परफ़ॉर्मेंस पैनल में सुधार
- लाइव मेट्रिक में सुझाव
- ब्रेडक्रंब पर नेविगेट करना
- मेमोरी पैनल में किए गए सुधार
- 'अलग किए गए एलिमेंट' की नई प्रोफ़ाइल
- प्लेन JS ऑब्जेक्ट के नाम बेहतर तरीके से तय किए गए हैं
- डाइनैमिक थीम की सुविधा बंद करना
- Chrome एक्सपेरिमेंट: प्रोसेस शेयर करना
- Lighthouse 12.2.1
- अन्य हाइलाइट
- Recorder, Firefox के लिए Puppeteer में एक्सपोर्ट करने की सुविधा देता है
- परफ़ॉर्मेंस पैनल में सुधार
- लाइव मेट्रिक से जुड़ी अहम जानकारी
- नेटवर्क ट्रैक में खोज के अनुरोध
- performance.mark और performance.measure कॉल के स्टैक ट्रेस देखना
- ऑटोमैटिक भरने की सुविधा वाले पैनल में टेस्ट अड्रेस के डेटा का इस्तेमाल करना
- Elements पैनल में किए गए सुधार
- चुने गए एलिमेंट के लिए, ज़्यादा स्थितियां ज़बरदस्ती लागू करना
- तत्व > स्टाइल अब ज़्यादा ग्रिड प्रॉपर्टी को अपने-आप पूरा करता है
- Lighthouse 12.2.0
- अन्य हाइलाइट
- Gemini की मदद से मिलने वाली Console की अहम जानकारी, ज़्यादातर यूरोपीय देशों में उपलब्ध हो रही है
- परफ़ॉर्मेंस पैनल से जुड़े अपडेट
- बेहतर नेटवर्क ट्रैक
- एक्सटेंसिबिलिटी एपीआई की मदद से परफ़ॉर्मेंस डेटा को अपनी पसंद के मुताबिक बनाना
- टाइमिंग ट्रैक में मौजूद जानकारी
- नेटवर्क पैनल में मौजूद सभी अनुरोधों को कॉपी करें
- नाम वाले एचटीएमएल टैग और कम अव्यवस्था के साथ, हीप स्नैपशॉट तेज़ी से लिए जा सकते हैं
- ऐनिमेशन कैप्चर करने के लिए, ऐनिमेशन पैनल खोलें और @keyframes में लाइव बदलाव करें
- Lighthouse 12.1.0
- सुलभता सुविधाओं में सुधार
- अन्य हाइलाइट
- Elements पैनल में सीएसएस ऐंकर पोज़िशनिंग की जांच करना
- सोर्स पैनल में किए गए सुधार
- 'यहां कभी नहीं रोकें' सुविधा को बेहतर बनाया गया
- स्क्रोल स्नैप के नए इवेंट लिसनर
- नेटवर्क पैनल में किए गए सुधार
- नेटवर्क थ्रॉटलिंग के अपडेट किए गए प्रीसेट
- HAR फ़ॉर्मैट के कस्टम फ़ील्ड में सर्विस वर्कर की जानकारी
- परफ़ॉर्मेंस पैनल में WebSocket इवेंट भेजना और पाना
- अन्य हाइलाइट
- परफ़ॉर्मेंस पैनल में सुधार
- ट्रैक कॉन्फ़िगरेशन मोड को अपडेट करके, ट्रैक को छिपाना और उन्हें दूसरी जगह ले जाना
- फ़्लेम चार्ट में स्क्रिप्ट को अनदेखा करना
- सीपीयू की स्पीड को 20 गुना कम करो
- परफ़ॉर्मेंस के बारे में अहम जानकारी देने वाले पैनल को बंद कर दिया जाएगा
- हीप स्नैपशॉट में नए फ़िल्टर की मदद से, ज़्यादा मेमोरी इस्तेमाल करने वाली चीज़ों का पता लगाना
- ऐप्लिकेशन > स्टोरेज में जाकर, स्टोरेज बकेट की जांच करें
- कमांड-लाइन फ़्लैग की मदद से, सेल्फ़-एक्सएसएस की चेतावनियां बंद करना
- Lighthouse 12.0.0
- अन्य हाइलाइट
- Gemini की मदद से, Console में दिखने वाली गड़बड़ियों और चेतावनियों को बेहतर तरीके से समझना
- Elements > Styles में@position-try नियमों के लिए सहायता उपलब्ध है
- सोर्स पैनल में किए गए सुधार
- अपने-आप सिंटैक्स हाइलाइट होने और ब्रैकेट बंद होने की सुविधा कॉन्फ़िगर करना
- अस्वीकार किए गए वादों को हैंडल करने पर, उन्हें कैच किए गए वादों के तौर पर माना जाता है
- कंसोल में गड़बड़ी की वजहें
- नेटवर्क पैनल में किए गए सुधार
- शुरुआती हिंट वाले हेडर की जांच करना
- वॉटरफ़ॉल कॉलम छिपाना
- परफ़ॉर्मेंस पैनल में सुधार
- सीएसएस सिलेक्टर के आंकड़े कैप्चर करना





























