DevTools (Chrome 89) में नया क्या है

Jecelyn Yeen

ध्यान दें: क्या आपको DevTools को बेहतर बनाने में मदद चाहिए? Google के उपयोगकर्ताओं पर होने वाली रिसर्च में हिस्सा लेने के लिए, यहां साइन अप करें.

भरोसेमंद तरह के उल्लंघनों के लिए सहायता को डीबग करना

भरोसेमंद टाइप से जुड़े उल्लंघनों के लिए ब्रेकपॉइंट

अब सोर्स पैनल में ब्रेकपॉइंट सेट किए जा सकते हैं और भरोसेमंद टाइप के उल्लंघनों से जुड़े अपवादों को देखा जा सकता है.

भरोसेमंद टाइप एपीआई से, आपको डीओएम-आधारित क्रॉस-साइट स्क्रिप्टिंग के जोखिम की आशंकाओं को रोकने में मदद मिलती है. 'भरोसेमंद टाइप' की मदद से DOM XSS जोखिमों से मुक्त ऐप्लिकेशन लिखने, उनकी समीक्षा करने, और उन्हें बनाए रखने का तरीका यहां जानें.

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

Chromium की समस्या: 1142804

सोर्स पैनल में, 'समस्याएं' टैब में जाकर, लिंक करने से जुड़ी समस्या

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

Chromium की समस्या: 1150883

व्यूपोर्ट के अलावा, नोड का स्क्रीनशॉट कैप्चर करना

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

एलिमेंट पैनल में, किसी एलिमेंट पर राइट क्लिक करें और नोड स्क्रीनशॉट कैप्चर करें चुनें.

Chromium की समस्या: 1003629

नेटवर्क अनुरोधों के लिए नया ट्रस्ट टोकन टैब

नए ट्रस्ट टोकन टैब की मदद से, ट्रस्ट टोकन नेटवर्क के अनुरोधों की जांच करें.

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

डीबग करने की अतिरिक्त सहायता अगली रिलीज़ में उपलब्ध होगी.

Chromium की समस्या: 1126824

लाइटहाउस पैनल में लाइटहाउस 7

Lighthouse पैनल में अब लाइटहाउस 7 चल रहा है. बदलावों की पूरी सूची देखने के लिए प्रॉडक्ट की जानकारी देखें.

लाइटहाउस 7 में नए ऑडिट:

• सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) की इमेज को पहले से लोड करें. अगर एलसीपी एलिमेंट में इस्तेमाल की गई इमेज पहले से लोड है, तो ऑडिट करें. इससे एलसीपी को बेहतर बनाने में मदद मिलती है.
• Issues पैनल में लॉग की गई समस्याएं. Issues पैनल में अनसुलझी समस्याओं की सूची दिखाता है.
• प्रोग्रेसिव वेब ऐप्लिकेशन (PWA). PWA कैटगरी में काफ़ी बदलाव हुआ है.

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

  • "सर्विस वर्कर को रजिस्टर करता है..." ऑडिट, PWA ऑप्टिमाइज़ किया गया ग्रुप में चला जाता है. साथ ही, "एचटीटीपीएस का इस्तेमाल करता है" ऑडिट को अब "इंस्टॉल करने की ज़रूरी शर्तों" के मुख्य ऑडिट के हिस्से के तौर पर शामिल किया गया है.
  • तेज़ और भरोसेमंद ग्रुप को हटा दिया जाता है. "इंस्टॉल करने की ज़रूरी शर्तों" के ऑडिट में ऑफ़लाइन क्षमता की जांच शामिल है. "ऑफ़लाइन होने पर, मौजूदा पेज और start_url रिस्पॉन्स 200 के साथ होना चाहिए" ऑडिट को हटा दिया गया था. "मोबाइल नेटवर्क पर पेज लोड होने की रफ़्तार काफ़ी तेज़ है" ऑडिट को भी हटा दिया गया था.

Chromium की समस्या: 772558

एलिमेंट पैनल के अपडेट

सीएसएस के :target स्टेटस को लागू करने की सुविधा

अब DevTools का इस्तेमाल करके, सीएसएस :target की स्थिति को ज़बरदस्ती लागू किया जा सकता है और उसकी जांच की जा सकती है.

एलिमेंट पैनल में, कोई एलिमेंट चुनें और एलिमेंट की स्थिति को टॉगल करें. स्टाइल को लागू करने और उनकी जांच करने के लिए, :target चेकबॉक्स को चालू करें.

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

Chromium की समस्या: 1156628

डुप्लीकेट एलिमेंट के लिए नया शॉर्टकट

किसी एलिमेंट का तुरंत क्लोन बनाने के लिए, डुप्लीकेट एलिमेंट के नए शॉर्टकट का इस्तेमाल करें.

एलिमेंट पैनल में किसी एलिमेंट पर राइट क्लिक करें और डुप्लीकेट एलिमेंट चुनें. इसके तहत, एक नया एलिमेंट बनाया जाएगा.

इसके अलावा, कीबोर्ड शॉर्टकट का इस्तेमाल करके भी एलिमेंट का डुप्लीकेट बनाया जा सकता है:

• Mac: Shift + Option + ⬇️
• विंडो/ Linux: Shift + Alt + ⬇️

Chromium से जुड़ी समस्याएं: 1150797, 1150797

कस्टम सीएसएस प्रॉपर्टी के लिए कलर पिकर

स्टाइल पैनल में अब कस्टम सीएसएस प्रॉपर्टी के लिए, कलर पिकर दिखते हैं.

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

Chromium की समस्या: 1147016

सीएसएस प्रॉपर्टी कॉपी करने के लिए नए शॉर्टकट

अब कुछ नए शॉर्टकट की मदद से, सीएसएस प्रॉपर्टी को फटाफट कॉपी किया जा सकता है.

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

सीएसएस क्लास के लिए कॉपी करने के विकल्प:

• कॉपी सिलेक्टर. मौजूदा सिलेक्टर का नाम कॉपी करें.
• नियम कॉपी करें. मौजूदा सिलेक्टर का नियम कॉपी करें.
• सभी एलान कॉपी करें: मौजूदा नियम के तहत सभी एलान कॉपी करें. इनमें अमान्य और प्रीफ़िक्स वाली प्रॉपर्टी भी शामिल हैं.

सीएसएस प्रॉपर्टी के लिए कॉपी करने के विकल्प:

• एलान कॉपी करें. मौजूदा लाइन के एलान को कॉपी करें.
• प्रॉपर्टी को कॉपी करें. मौजूदा लाइन की प्रॉपर्टी कॉपी करें.
• वैल्यू कॉपी करें: मौजूदा लाइन की वैल्यू कॉपी करें.

Chromium की समस्या: 1152391

कुकी से जुड़े अपडेट

यूआरएल डिकोड करने वाली कुकी दिखाने का नया विकल्प

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

ऐप्लिकेशन पैनल पर जाएं और कुकी पैनल चुनें. सूची में से कोई भी कुकी चुनें. डिकोड की गई कुकी देखने के लिए, डिकोड किया गया यूआरएल दिखाएं चेकबॉक्स चालू करें.

Chromium की समस्या: 997625

सिर्फ़ दिखने वाली कुकी मिटाएं

कुकी पैनल में सभी कुकी मिटाएं बटन को अब फ़िल्टर की गई कुकी मिटाएं बटन से बदल दिया गया है.

ऐप्लिकेशन पैनल > कुकी पैनल में, कुकी फ़िल्टर करने के लिए टेक्स्ट बॉक्स में टेक्स्ट डालें. यहां दिए गए उदाहरण में, हम सूची को "PREF" के हिसाब से फ़िल्टर करते हैं. दिखने वाली कुकी मिटाने के लिए, फ़िल्टर की गई कुकी मिटाएं बटन पर क्लिक करें. फ़िल्टर टेक्स्ट को साफ़ करें और आपको सूची में अन्य कुकी बनी रहेंगी. पहले, आपके पास सिर्फ़ सभी कुकी मिटाने का विकल्प होता था.

Chromium की समस्या: 978059

स्टोरेज पैनल में तीसरे पक्ष की कुकी मिटाने का नया विकल्प

स्टोरेज पैनल में साइट का डेटा मिटाते समय, DevTools अब डिफ़ॉल्ट रूप से सिर्फ़ पहले-पक्ष की कुकी मिटाएं. तीसरे पक्ष की कुकी मिटाने के लिए, तीसरे पक्ष की कुकी भी शामिल करें को चालू करें.

Chromium की समस्या: 1012337

पसंद के मुताबिक बनाए गए डिवाइसों के लिए, उपयोगकर्ता-एजेंट क्लाइंट हिंट में बदलाव करें

अब पसंद के मुताबिक बनाए गए डिवाइसों के लिए, उपयोगकर्ता-एजेंट क्लाइंट हिंट में बदलाव किया जा सकता है.

सेटिंग > डिवाइस पर जाएं और कस्टम डिवाइस जोड़ें... पर क्लिक करें. क्लाइंट के संकेतों में बदलाव करने के लिए, उपयोगकर्ता एजेंट क्लाइंट के संकेत सेक्शन को बड़ा करें.

उपयोगकर्ता-एजेंट क्लाइंट हिंट, उपयोगकर्ता-एजेंट स्ट्रिंग के एक विकल्प हैं. इसकी मदद से डेवलपर, निजता बनाए रखते हुए और काम के तरीके से, उपयोगकर्ता के ब्राउज़र के बारे में जानकारी ऐक्सेस कर सकते हैं. web.dev/user-agent-client-hints/ पर जाकर उपयोगकर्ता-एजेंट क्लाइंट हिंट के बारे में ज़्यादा जानें.

Chromium की समस्या: 1073909

नेटवर्क पैनल के अपडेट

"नेटवर्क लॉग रिकॉर्ड करें" सेटिंग को बनाए रखें

DevTools अब "नेटवर्क लॉग रिकॉर्ड करें" सेटिंग को बनाए रखता है. पहले, DevTools किसी पेज के फिर से लोड होने पर, उपयोगकर्ता की पसंद को रीसेट करता था.

Chromium की समस्या: 1122580

नेटवर्क पैनल में WebTransport कनेक्शन देखें

नेटवर्क पैनल अब WebTransport कनेक्शन दिखाता है.

WebTransport एक नया एपीआई है. इसमें क्लाइंट-सर्वर के साथ, दो-तरफ़ा, कम इंतज़ार के समय की सुविधा मिलती है. इसके इस्तेमाल के उदाहरणों और लागू होने वाले आने वाले समय के बारे में सुझाव/राय देने या शिकायत करने के तरीके के बारे में ज़्यादा जानने के लिए, web.dev/webtransport/ पर जाएं.

Chromium की समस्या: 1152290

"ऑनलाइन" का नाम बदलकर "कोई थ्रॉटलिंग नहीं" किया गया

नेटवर्क एम्युलेशन विकल्प "ऑनलाइन" का नाम अब बदलकर "कोई थ्रॉटलिंग नहीं" कर दिया गया है.

Chromium की समस्या: 1028078

कंसोल, सोर्स पैनल, और स्टाइल पैनल में कॉपी करने के नए विकल्प

कंसोल और सोर्स पैनल में ऑब्जेक्ट कॉपी करने के लिए नए शॉर्टकट

अब 'कंसोल और सोर्स पैनल' में नए शॉर्टकट की मदद से, ऑब्जेक्ट की वैल्यू को कॉपी किया जा सकता है. यह तरीका काम का है, खास तौर पर तब, जब आपके पास कॉपी करने के लिए एक बड़ा ऑब्जेक्ट (जैसे कि एक लंबा कलेक्शन) हो.

Chromium से जुड़ी समस्याएं: 1149859, 1148353

सोर्स पैनल और स्टाइल पैनल में फ़ाइल का नाम कॉपी करने के लिए नए शॉर्टकट

अब फ़ाइल के नाम को कॉपी करने के लिए, इस पर राइट क्लिक करें:

• सोर्स पैनल में कोई फ़ाइल या
• एलिमेंट पैनल में, स्टाइल पैनल में फ़ाइल का नाम

फ़ाइल का नाम कॉपी करने के लिए, संदर्भ मेन्यू से फ़ाइल का नाम कॉपी करें चुनें.

Chromium की समस्या: 1155120

फ़्रेम की जानकारी वाले व्यू के बारे में अपडेट

फ़्रेम की जानकारी वाले व्यू में, नए सर्विस वर्कर की जानकारी

DevTools अब उस फ़्रेम के नीचे सर्विस वर्कर दिखाता है जो उन्हें बनाने के लिए ज़रूरी है.

ऐप्लिकेशन पैनल में, सर्विस वर्कर वाले फ़्रेम को बड़ा करें. इसके बाद, जानकारी देखने के लिए सर्विस वर्कर ट्री के नीचे सर्विस वर्कर चुनें.

Chromium की समस्या: 1122507

फ़्रेम की जानकारी वाले व्यू में, मेमोरी की जानकारी को मेज़र करना

performance.measureMemory() एपीआई का स्टेटस अब एपीआई की उपलब्धता सेक्शन में दिखता है.

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

Chromium की समस्या: 1139899

समस्याएं टैब से सुझाव/राय देना या शिकायत करना

अगर आपको कभी भी किसी समस्या वाले मैसेज को बेहतर बनाना हो, तो समस्याएं टैब खोलने के लिए, कंसोल में जाकर समस्याएं टैब पर जाएं. इसके अलावा, ज़्यादा सेटिंग > ज़्यादा टूल > समस्याएं > पर जाएं. समस्या वाले मैसेज को बड़ा करें और क्या समस्या वाला मैसेज आपके काम का है? पर क्लिक करें. इसके बाद, पॉप-अप में सुझाव, शिकायत या राय दें.

परफ़ॉर्मेंस पैनल में छोड़े गए फ़्रेम

परफ़ॉर्मेंस पैनल में लोड होने की परफ़ॉर्मेंस का विश्लेषण करते समय, फ़्रेम सेक्शन अब छोड़े गए फ़्रेम को लाल रंग के तौर पर दिखाता है. फ़्रेम रेट के बारे में जानने के लिए, इस पर कर्सर घुमाएं.

Chromium की समस्या: 1075865

डिवाइस मोड में, फ़ोल्ड किए जा सकने वाले और ड्यूअल-स्क्रीन को एम्युलेट करें

अब DevTools में ड्यूअल-स्क्रीन और फ़ोल्ड किए जा सकने वाले डिवाइसों को एम्युलेट किया जा सकता है.

डिवाइस टूलबार चालू करने के बाद, इनमें से कोई एक डिवाइस चुनें: Surface Duo या Samsung Galaxy Fold.

सिंगल-स्क्रीन, फ़ोल्ड और ड्यूअल-स्क्रीन या अनफ़ोल्ड किए गए पोज़ के बीच टॉगल करने के लिए, नए स्पैन आइकॉन पर क्लिक करें.

सीएसएस मीडिया screen-spanning की नई सुविधा और JavaScript getWindowSegments API को ऐक्सेस करने के लिए, एक्सपेरिमेंट के तौर पर उपलब्ध वेब प्लैटफ़ॉर्म की सुविधाएं भी चालू की जा सकती हैं. एक्सपेरिमेंट वाला आइकॉन, एक्सपेरिमेंट वाले वेब प्लैटफ़ॉर्म की सुविधाओं वाले फ़्लैग की स्थिति दिखाता है. फ़्लैग के चालू होने पर यह आइकन हाइलाइट हो जाता है. chrome://flags पर जाएं और फ़्लैग को टॉगल करें.

Chromium की समस्या: 1054281

प्रयोग के तौर पर शुरू की गई सुविधाएं

Puppeteer Recorder से ब्राउज़र टेस्टिंग को ऑटोमेट करें

ध्यान दें: एक्सपेरिमेंट को चालू करने के लिए, सेटिंग > एक्सपेरिमेंट में जाकर Recorder चेकबॉक्स को चुनें.

DevTools अब ब्राउज़र के साथ आपके इंटरैक्शन के आधार पर Puppeteer स्क्रिप्ट जनरेट कर सकता है. इससे आपके लिए ब्राउज़र टेस्टिंग को ऑटोमेट करना आसान हो जाता है. Puppeteer एक Node.js लाइब्रेरी है जो Dev टूल प्रोटोकॉल पर Chrome या Chromium को कंट्रोल करने के लिए, एक हाई-लेवल एपीआई देती है.

इस डेमो पेज पर जाएं. DevTools में सोर्स पैनल खोलें. बाएं पैनल में रिकॉर्डिंग टैब चुनें. नई रिकॉर्डिंग जोड़ें और फ़ाइल को नाम दें (उदाहरण के लिए, test01.js).

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

स्क्रिप्ट चलाने के लिए, Puppeteer की आधिकारिक साइट पर जाकर शुरुआती निर्देश देखें.

कृपया ध्यान दें कि यह एक शुरुआती चरण है. हम समय के साथ Recorder सुविधा को बेहतर बनाने और इसे बेहतर बनाने की कोशिश कर रहे हैं.

Chromium की समस्या: 1144127

स्टाइल पैनल में फ़ॉन्ट एडिटर

ध्यान दें: एक्सपेरिमेंट को चालू करने के लिए, सेटिंग > एक्सपेरिमेंट में जाकर, स्टाइल पैनल में नए फ़ॉन्ट एडिटर टूल चालू करें चेकबॉक्स को चुनें.

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

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

Chromium की समस्या: 1093229

सीएसएस फ़्लेक्सबॉक्स डीबग करने वाले टूल

ध्यान दें: प्रयोग को चालू करने के लिए, सेटिंग > एक्सपेरिमेंट में जाकर, सीएसएस Flexbox डीबग करने की सुविधाएं चालू करें चेकबॉक्स को चुनें.

DevTools ने पिछली रिलीज़ के बाद से, फ़्लेक्सबॉक्स डीबग करने की सुविधा को प्रयोग के तौर पर जोड़ा है.

DevTools अब एक गाइड की मदद से, सीएसएस align-items प्रॉपर्टी को बेहतर तरीके से विज़ुअलाइज़ करने में आपकी मदद करता है. यह CSS gap प्रॉपर्टी भी काम करती है. यहां दिए गए उदाहरण में, हमारे पास सीएसएस gap: 12px; है. हर गैप के लिए हैचिंग पैटर्न पर ध्यान दें.

Chromium की समस्या: 1139949

नया सीएसपी उल्लंघन टैब

ध्यान दें: इस एक्सपेरिमेंट को वर्शन 121 में हटा दिया गया था. इसके बजाय, ऐप्लिकेशन > फ़्रेम > कॉन्टेंट की सुरक्षा के बारे में नीति (सीएसपी) और समस्याएं पैनल

देखें.

कॉन्टेंट की सुरक्षा के बारे में नीति (सीएसपी) के सभी उल्लंघन, सीएसपी के उल्लंघन टैब में एक नज़र में देखें. यह नया टैब एक प्रयोग है, जिसकी सहायता से बड़ी मात्रा में सीएसपी और भरोसेमंद प्रकार का उल्लंघन करने वाले वेब पेजों के साथ काम करना आसान हो जाएगा.

Chromium की समस्या: 1137837

कलर कंट्रास्ट की नई गिनती - ऐडवांस पर्सेप्चुअल कंट्रास्ट एल्गोरिदम (एपीसीए)

ध्यान दें: एक्सपेरिमेंट को चालू करने के लिए, सेटिंग > एक्सपेरिमेंट में जाकर, पिछले कंट्रास्ट रेशियो और AA/AAA के दिशा-निर्देश को बदलकर, नया बेहतर पर्सेप्चुअल कंट्रास्ट एल्गोरिदम (एपीसीए) चालू करें चेकबॉक्स को चुनें.

ऐडवांस परसेप्चुअल कंट्रास्ट एल्गोरिदम (एपीसीए), कलर पिकर में AA/AAA दिशा-निर्देश के कंट्रास्ट अनुपात की जगह ले रहा है.

एपीसीए, रंगों की समझ पर आधारित मॉडर्न रिसर्च के आधार पर, कंट्रास्ट का पता लगाने का एक नया तरीका है. AA/AAA के दिशा-निर्देशों की तुलना में, एपीसीए, कॉन्टेक्स्ट पर निर्भर करता है. कंट्रास्ट का हिसाब इस तरह लगाया जाता है: टेक्स्ट की जगह की जानकारी (फ़ॉन्ट का वज़न और साइज़), रंग (टेक्स्ट और बैकग्राउंड के बीच हल्के-फुल्के अंतर का अनुमान), और कॉन्टेक्स्ट (आस-पास की रोशनी, आस-पास की रोशनी, टेक्स्ट किस मकसद से बनाया गया है).

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

Chromium की समस्या: 1121900

झलक दिखाने वाले चैनलों को डाउनलोड करें

अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर, Chrome के कैनरी, डेव या बीटा वर्शन का इस्तेमाल करें. झलक दिखाने वाले इन चैनलों से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, सबसे नए वेब प्लैटफ़ॉर्म एपीआई टेस्ट करने और उपयोगकर्ताओं के ऐसा करने से पहले ही, अपनी साइट पर समस्याओं का पता लगाने में मदद मिलती है!

Chrome DevTools टीम से संपर्क करना

पोस्ट में मौजूद नई सुविधाओं और बदलावों या DevTools से जुड़ी किसी भी अन्य चीज़ के बारे में बताने के लिए, नीचे दिए गए विकल्पों का इस्तेमाल करें.

• crbug.com के ज़रिए हमें कोई सुझाव या सुझाव सबमिट करें.
• DevTools में ज़्यादा विकल्प     > सहायता > DevTools से जुड़ी समस्याओं की शिकायत करें पर जाकर, DevTools से जुड़ी समस्या की शिकायत करें.
• @ChromeDevTool पर ट्वीट करें.
• DevTools YouTube वीडियो या DevTools सलाह वाले YouTube वीडियो में नया क्या है, इस बारे में टिप्पणियां करें.

DevTools में नया क्या है

DevTools में नया क्या है सीरीज़ में शामिल सभी चीज़ों की सूची.

Chrome 123

• एक छिपी हुई मज़ाक़िया चीज़ ढूंढें
• एलिमेंट पैनल से जुड़े अपडेट
• एलिमेंट > स्टाइल में फ़ोकस किए गए पेज को एम्युलेट करना
• var() फ़ॉलबैक में कलर पिकर, ऐंगल घड़ी, और ईज़िंग एडिटर की सुविधा
• सीएसएस की लंबाई वाला टूल अब काम नहीं करता
• परफ़ॉर्मेंस > मुख्य ट्रैक में, चुने गए खोज नतीजे के लिए पॉपओवर
• नेटवर्क पैनल से जुड़े अपडेट
• नेटवर्क > EventStream टैब में, 'मिटाएं' बटन और खोज फ़िल्टर
• नेटवर्क > कुकी में तीसरे पक्ष की कुकी को छूट देने की वजहों के साथ टूलटिप
• सोर्स में सभी ब्रेकपॉइंट चालू और बंद करना
• Node.js के लिए DevTools में लोड की गई स्क्रिप्ट देखें
• Lighthouse 11.5.0
• सुलभता सुविधाओं में सुधार
• अलग-अलग तरह की हाइलाइट

Chrome 122

• Recorder एक्सटेंशन का आधिकारिक कलेक्शन लाइव है
• नेटवर्क में सुधार
• स्टेटस कॉलम में, काम न करने की वजह
• 'कॉपी करने का बेहतर तरीका' सबमेन्यू
• परफ़ॉर्मेंस में सुधार
• टाइमलाइन में मौजूद ब्रेडक्रंब
• मुख्य ट्रैक में इवेंट शुरू करने वाले लोग
• Node.js DevTools के लिए JavaScript वीएम इंस्टेंस सिलेक्टर मेन्यू
• सोर्स में नया शॉर्टकट और कमांड
• एलिमेंट में सुधार
• अब स्टाइल में, ::view-transition pseudo-element में बदलाव किया जा सकता है
• ब्लॉक कंटेनर के लिए, अलाइन-कॉन्टेंट प्रॉपर्टी से जुड़ी सहायता
• फ़ोल्ड किए जा सकने वाले नकली डिवाइसों के लिए पॉस्चर की सुविधा
• डाइनैमिक थीमिंग
• नेटवर्क और ऐप्लिकेशन पैनल पर तीसरे पक्ष की कुकी के फ़ेज़आउट से जुड़ी चेतावनियां
• Lighthouse 11.4.0
• सुलभता सुविधाओं में सुधार
• अलग-अलग तरह की हाइलाइट

Chrome 121

• एलिमेंट में सुधार
• नेटवर्क पैनल में व्यवस्थित फ़िल्टर बार
• @font-palette-values सहायता
• इस्तेमाल किया जा सकने वाला केस: किसी दूसरी कस्टम प्रॉपर्टी के फ़ॉलबैक के तौर पर कस्टम प्रॉपर्टी
• सोर्स मैप की बेहतर सहायता
• परफ़ॉर्मेंस पैनल में सुधार
• बेहतर इंटरैक्शन ट्रैक
• बॉटम-अप, कॉल ट्री, और इवेंट लॉग टैब में बेहतर फ़िल्टर करना
• सोर्स पैनल में इंडेंट मार्कर
• नेटवर्क पैनल में, बदले गए हेडर और कॉन्टेंट के लिए उपयोगी टूलटिप
• अनुरोध को ब्लॉक करने वाले पैटर्न जोड़ने और हटाने के लिए, निर्देश मेन्यू के नए विकल्प
• सीएसपी के उल्लंघनों से जुड़ा एक्सपेरिमेंट हटा दिया गया है
• Lighthouse 11.3.0
• सुलभता सुविधाओं में सुधार
• अलग-अलग तरह की हाइलाइट

Chrome 120

• तीसरे पक्ष की कुकी के फ़ेज़आउट
• प्राइवसी सैंडबॉक्स विश्लेषण टूल की मदद से, अपनी वेबसाइट की कुकी का विश्लेषण करना
• अनदेखा करने की बेहतर सुविधा की लिस्टिंग
• node_modules के लिए डिफ़ॉल्ट एक्सक्लूज़न पैटर्न
• अगर कोई ऐसा कोड मिलता है जिसे अनदेखा नहीं किया गया है, तो पकड़ में आने वाले अपवाद के तौर पर, एक्ज़ीक्यूशन रोक दिया जाता है
• सोर्स मैप में x_google_ignoreList का नाम बदलकर ignoreList किया गया
• रिमोट डीबगिंग के दौरान नया इनपुट मोड टॉगल
• एलिमेंट पैनल अब #document नोड के लिए यूआरएल दिखाता है
• ऐप्लिकेशन पैनल में कॉन्टेंट की सुरक्षा से जुड़ी लागू नीति
• ऐनिमेशन को डीबग करने की बेहतर सुविधा
• 'क्या आपको इस कोड पर भरोसा है?' वाला डायलॉग बॉक्स और Console में खुद को XSS से जुड़ी चेतावनी का मैसेज दिखता है
• वेब वर्कर और वर्कलेट में इवेंट लिसनर ब्रेकपॉइंट
• <audio> और <video> के लिए नया मीडिया बैज
• पहले से लोड करने की प्रक्रिया का नाम बदलकर, अनुमान के हिसाब से यूआरएल लोड होने की सुविधा में बदल दिया गया है
• Lighthouse 11.2.0
• सुलभता सुविधाओं में सुधार
• अलग-अलग तरह की हाइलाइट

Chrome 119

• एलिमेंट > स्टाइल में बेहतर @property सेक्शन
• बदलाव किया जा सकने वाला @property नियम
• अमान्य @property नियमों से जुड़ी समस्याओं की शिकायत की जाती है
• सिम्युलेट किए जाने वाले डिवाइसों की अपडेट की गई सूची
• सोर्स में स्क्रिप्ट टैग में सुंदर इनलाइन JSON
• कंसोल में जाकर निजी फ़ील्ड के अपने-आप पूरा होने की सुविधा
• Lighthouse 11.1.0
• सुलभता सुविधाओं में सुधार
• वेब एसक्यूएल का इस्तेमाल बंद होना
• ऐप्लिकेशन > मेनिफ़ेस्ट में स्क्रीनशॉट के आसपेक्ट रेशियो की पुष्टि करना
• अलग-अलग तरह की हाइलाइट

Chrome 118

• एलिमेंट > स्टाइल में कस्टम प्रॉपर्टी के लिए नया सेक्शन
• स्थानीय बदलावों में और सुधार
• बेहतर खोज की सुविधा
• बेहतर सोर्स पैनल
• सोर्स पैनल में व्यवस्थित किया गया फ़ाइल फ़ोल्डर
• सोर्स में पैनल का क्रम बदलना
• कई तरह की स्क्रिप्ट के लिए, सिंटैक्स हाइलाइट करने और प्रिंट करने की सुविधा
• कम की गई पारदर्शिता मीडिया सुविधा को प्राथमिकता देना
• लाइटहाउस 11
• सुलभता सुविधाओं में सुधार
• अलग-अलग तरह की हाइलाइट

Chrome 117

• नेटवर्क पैनल में सुधार
• वेब कॉन्टेंट को अपने डिवाइस पर ज़्यादा तेज़ी से बदलना
• XHR का कॉन्टेंट बदलना और अनुरोधों को फ़ेच करना
• Chrome एक्सटेंशन के अनुरोध छिपाना
• ऐसे एचटीटीपी स्टेटस कोड जिन्हें कोई भी व्यक्ति आसानी से पढ़ सकता है

• JSON के सब-टाइप के लिए सुंदर जवाब

• परफ़ॉर्मेंस: नेटवर्क इवेंट के लिए, फ़ेच करने की प्राथमिकता में हुए बदलाव देखें

• सोर्स की सेटिंग डिफ़ॉल्ट रूप से चालू होती हैं: कोड फ़ोल्ड करने और अपने-आप फ़ाइल ज़ाहिर करने की सुविधा

• तीसरे पक्ष की कुकी से जुड़ी समस्याओं को डीबग करने की बेहतर सुविधा

• नए रंग

• Lighthouse 10.4.0

• ऐप्लिकेशन पैनल में, पेजों को पहले से लोड करने से जुड़ी सेटिंग को डीबग करना

• DevTools के लिए C/C++ WebAssembly डीबग करने वाला एक्सटेंशन अब ओपन सोर्स है

• अलग-अलग तरह की हाइलाइट

• (प्रयोग के तौर पर) रेंडर करने के लिए नया एम्युलेटर: प्राथमिकता-reduced-transparency

• (प्रयोग के तौर पर) बेहतर प्रोटोकॉल मॉनिटर

Chrome 116

• जो स्टाइलशीट नहीं हैं उन्हें डीबग करने की बेहतर सुविधा
• एलिमेंट > स्टाइल > ईज़िंग एडिटर में लीनियर टाइमिंग सहायता
• स्टोरेज बकेट सपोर्ट और मेटाडेटा व्यू
• Lighthouse 10.3.0
• सुलभता: कीबोर्ड के निर्देश और स्क्रीन पर मौजूद कॉन्टेंट को बेहतर तरीके से पढ़ने की सुविधा
• अलग-अलग तरह की हाइलाइट

Chrome 115

• एलिमेंट में सुधार
• नया सीएसएस सबग्रिड बैज
• टूलसलाह में सिलेक्टर की खास जानकारी
• टूलटिप में कस्टम सीएसएस प्रॉपर्टी की वैल्यू
• सोर्स में सुधार
• सीएसएस सिंटैक्स को हाइलाइट करना
• शर्त के साथ ब्रेकपॉइंट सेट करने के लिए शॉर्टकट
• ऐप्लिकेशन > बाउंस ट्रैकिंग पर लागू होने वाली पाबंदियां
• Lighthouse 10.2.0
• कॉन्टेंट स्क्रिप्ट को डिफ़ॉल्ट रूप से अनदेखा करना
• नेटवर्क > रिस्पॉन्स में सुधार
• अलग-अलग तरह की हाइलाइट

Chrome 114

• WebAssembly डीबग करने की सहायता
• Wsm ऐप्लिकेशन में स्टेपिंग के बेहतर तरीके
• एलिमेंट पैनल और समस्याएं टैब का इस्तेमाल करके, अपने-आप जानकारी भरने की सुविधा को डीबग करना
• Recorder में किए गए दावे
• Lighthouse 10.1.1
• परफ़ॉर्मेंस बेहतर बनाना
• performance.mark(), परफ़ॉर्मेंस > टाइमिंग में कर्सर घुमाने पर दिखने वाला समय दिखाता है
• profile() कमांड, परफ़ॉर्मेंस > मुख्य की जानकारी अपने-आप भर देता है
• उपयोगकर्ता के धीमे इंटरैक्शन के लिए चेतावनी
• वेबसाइट की परफ़ॉर्मेंस की जानकारी से जुड़े अपडेट
• JavaScript प्रोफ़ाइलर को बंद करना: तीसरा चरण
• अलग-अलग तरह की हाइलाइट

Chrome 113

• नेटवर्क रिस्पॉन्स हेडर बदलना
• Nuxt, Vite, और रोलअप डीबग करने की प्रोसेस में सुधार
• एलिमेंट > स्टाइल में सीएसएस में सुधार
• अमान्य सीएसएस प्रॉपर्टी और वैल्यू
• ऐनिमेशन की शॉर्टहैंड प्रॉपर्टी में मुख्य फ़्रेम के लिंक
• कंसोल की नई सेटिंग: Enter पर अपने-आप पूरा होना
• कमांड मेन्यू में, लिखी गई फ़ाइलों पर ज़ोर दिया जाता है
• JavaScript प्रोफ़ाइलर को बंद करना: दूसरा चरण
• अलग-अलग तरह की हाइलाइट

Chrome 112

• Recorder से जुड़े अपडेट
• Recorder के रीप्ले एक्सटेंशन
• पियर्स सिलेक्टर की मदद से रिकॉर्ड करें
• लाइटहाउस विश्लेषण की मदद से रिकॉर्डिंग को Puppeteer स्क्रिप्ट के तौर पर एक्सपोर्ट करना
• Recorder के लिए एक्सटेंशन पाना
• एलिमेंट > स्टाइल से जुड़े अपडेट
• स्टाइल पैनल में सीएसएस दस्तावेज़
• सीएसएस नेस्टिंग सहायता
• कंसोल में लॉगपॉइंट और शर्त के साथ ब्रेकपॉइंट मार्क करना
• डीबग करते समय, उन स्क्रिप्ट को अनदेखा करना जो काम की नहीं हैं
• JavaScript प्रोफ़ाइलर का इस्तेमाल बंद होने की प्रोसेस शुरू हो गई है
• कम कंट्रास्ट को एम्युलेट करें
• लाइटहाउस 10
• अलग-अलग तरह की हाइलाइट

Chrome 111

• स्टाइल पैनल की मदद से, एचडी के रंग को डीबग करना
• बेहतर ब्रेकपॉइंट UX
• Recorder के पसंद के मुताबिक बनाए जा सकने वाले शॉर्टकट
• Angular के लिए बेहतर सिंटैक्स हाइलाइट
• ऐप्लिकेशन पैनल में कैश मेमोरी को फिर से व्यवस्थित करना
• अलग-अलग तरह की हाइलाइट

Chrome 110

• फिर से लोड करने पर, परफ़ॉर्मेंस पैनल को हटाना
• Recorder से जुड़े अपडेट
• Recorder में अपने यूज़र फ़्लो के कोड को देखना और उसे हाइलाइट करना
• रिकॉर्डिंग के टाइप को पसंद के मुताबिक बनाना
• रिकॉर्डिंग के दौरान यूज़र फ़्लो में बदलाव करना
• अपने-आप होने वाली फ़ोटो के प्रिंट की सुविधा
• Vue, SCSS वगैरह के लिए, सिंटैक्स को बेहतर तरीके से हाइलाइट करने और इनलाइन झलक देखने की सुविधा
• कंसोल में आसान और एक ही तरह के ऑटोकंप्लीट की सुविधा
• अलग-अलग तरह की हाइलाइट

Chrome 109

• Recorder: चरणों, इन-पेज फिर से चलाने, और चरण के संदर्भ मेन्यू के विकल्पों के तौर पर कॉपी करें
• परफ़ॉर्मेंस की रिकॉर्डिंग में फ़ंक्शन के असल नाम दिखाना
• कंसोल और सोर्स पैनल में नए कीबोर्ड शॉर्टकट
• JavaScript को डीबग करने की बेहतर सुविधा
• अलग-अलग तरह की हाइलाइट
• [प्रयोग के तौर पर] ब्रेकपॉइंट मैनेज करने के लिए, बेहतर उपयोगकर्ता अनुभव
• [प्रयोग के तौर पर] फ़ोटो की क्वालिटी अपने-आप सेव होने की सुविधा के बारे में जानकारी

Chrome 108

• ऐसी सीएसएस प्रॉपर्टी के लिए संकेत जो चालू नहीं हैं
• रिकॉर्डर पैनल में, XPath और टेक्स्ट सिलेक्टर का अपने-आप पता लगाना
• कॉमा लगाकर अलग किए गए एक्सप्रेशन का इस्तेमाल करना
• 'सूची को अनदेखा करने' की बेहतर सेटिंग
• अलग-अलग तरह की हाइलाइट

Chrome 107

• DevTools में कीबोर्ड शॉर्टकट को पसंद के मुताबिक बनाना
• कीबोर्ड शॉर्टकट की मदद से, हल्के और गहरे रंग वाली थीम टॉगल करें
• मेमोरी इंस्पेक्टर में C/C++ ऑब्जेक्ट हाइलाइट करें
• HAR इंपोर्ट के लिए, शुरू करने वाले की पूरी जानकारी दें
• Enter दबाने के बाद DOM खोज शुरू करें
• align-content सीएसएस फ़्लेक्सबॉक्स प्रॉपर्टी के लिए, start और end आइकॉन दिखाएं
• अलग-अलग तरह की हाइलाइट

Chrome 106

• लिखे गए / सोर्स पैनल में डिप्लॉय किए गए के हिसाब से फ़ाइलों को ग्रुप में रखें
• एसिंक्रोनस ऑपरेशन के लिए लिंक किए गए स्टैक ट्रेस
• तीसरे पक्ष की उन स्क्रिप्ट को अपने-आप अनदेखा करना जिनकी पहचान की जा चुकी है
• डीबग करने के दौरान बेहतर कॉल स्टैक
• सोर्स पैनल में, नज़रअंदाज़ किए जाने वाले सोर्स छिपाना
• कमांड मेन्यू में, नज़रअंदाज़ किए जाने वाले फ़ाइलों को छिपाना
• परफ़ॉर्मेंस पैनल में नए इंटरैक्शन ट्रैक
• परफ़ॉर्मेंस की अहम जानकारी वाले पैनल में एलसीपी टाइमिंग का ब्रेकडाउन
• Recorder पैनल में रिकॉर्डिंग के लिए, डिफ़ॉल्ट नाम अपने-आप जनरेट होना
• अलग-अलग तरह की हाइलाइट

Chrome 105

• Recorder में सिलसिलेवार तरीके से फिर से चलाने की सुविधा
• Recorder पैनल में, इवेंट के ऊपर माउस ले जाने की सुविधा उपलब्ध है
• परफ़ॉर्मेंस की अहम जानकारी वाले पैनल में, सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी)
• लेआउट में बदलाव होने की मुख्य वजहों के तौर पर, टेक्स्ट के फ़्लैश (FOIT, FOUT) का पता लगाना
• मेनिफ़ेस्ट पैनल में प्रोटोकॉल हैंडलर
• एलिमेंट पैनल में सबसे ऊपर वाली लेयर का बैज
• रनटाइम के दौरान Wasm को डीबग करने की जानकारी अटैच करना
• डीबग के दौरान लाइव बदलाव करना
• स्टाइल पैनल में नियमों पर @scope को देखना और उसमें बदलाव करना
• सोर्स मैप में किए गए सुधार
• अलग-अलग तरह की हाइलाइट

Chrome 104

• डीबग करने के दौरान फ़्रेम को रीस्टार्ट करना
• रिकॉर्डर पैनल में, वीडियो को फिर से चलाने की धीमी सुविधा के विकल्प
• Recorder पैनल के लिए एक्सटेंशन बनाना
• लिखे गए / सोर्स पैनल में डिप्लॉय किए गए के हिसाब से फ़ाइलों को ग्रुप में रखें
• परफ़ॉर्मेंस की अहम जानकारी वाले पैनल में नए उपयोगकर्ता समय ट्रैक
• एलिमेंट के असाइन किए गए स्लॉट को दिखाना
• परफ़ॉर्मेंस रिकॉर्डिंग के लिए, हार्डवेयर एक साथ चलने की सुविधा को सिम्युलेट करना
• सीएसएस वैरिएबल के अपने-आप पूरा होने की सुविधा के दौरान, बिना रंग वाली वैल्यू की झलक देखना
• बैक/फ़ॉरवर्ड कैश मेमोरी पैनल में, ब्लॉक करने वाले फ़्रेम की पहचान करना
• JavaScript ऑब्जेक्ट के लिए, अपने-आप पूरा होने वाले बेहतर सुझाव
• सोर्स मैप में सुधार
• अलग-अलग तरह की हाइलाइट

Chrome 103

• Recorder पैनल में, दो बार क्लिक और राइट क्लिक इवेंट कैप्चर करना
• लाइटहाउस पैनल में नया टाइमस्पैन और स्नैपशॉट मोड
• परफ़ॉर्मेंस की अहम जानकारी वाले पैनल में ज़ूम कंट्रोल करने की बेहतर सुविधा
• परफ़ॉर्मेंस की रिकॉर्डिंग मिटाने के लिए पुष्टि करना
• एलिमेंट पैनल में पैनल का क्रम बदलना
• ब्राउज़र के बाहर से रंग चुनना
• डीबग करने के दौरान इनलाइन वैल्यू की बेहतर झलक देखी जा सकती है
• वर्चुअल तौर पर पुष्टि करने वाले ऐप्लिकेशन के लिए, बड़े ब्लॉब की सुविधा दें
• सोर्स पैनल में नए कीबोर्ड शॉर्टकट
• सोर्स मैप में सुधार

Chrome 102

• झलक दिखाने की सुविधा: परफ़ॉर्मेंस से जुड़ी अहम जानकारी वाला नया पैनल
• हल्के और गहरे रंग वाली थीम को एम्युलेट करने के लिए नए शॉर्टकट
• Network Preview टैब पर बेहतर सुरक्षा
• ब्रेकपॉइंट पर फिर से लोड करने की बेहतर सुविधा
• कंसोल से जुड़े अपडेट
• शुरुआत में यूज़र फ़्लो की रिकॉर्डिंग को रद्द करना
• स्टाइल पैनल में, इनहेरिट किए गए हाइलाइट छो़ड़ एलिमेंट को दिखाना
• अलग-अलग तरह की हाइलाइट
• [प्रयोग के तौर पर] सीएसएस में किए गए बदलावों को कॉपी करें
• [प्रयोग के तौर पर] ब्राउज़र के बाहर रंग चुनना

Chrome 101

• रिकॉर्ड किए गए यूज़र फ़्लो को JSON फ़ाइल के तौर पर इंपोर्ट और एक्सपोर्ट करना
• स्टाइल पैनल में कैस्केड लेयर देखना
• hwb() कलर फ़ंक्शन के लिए सहायता
• निजी प्रॉपर्टी को दिखाने की बेहतर सुविधा
• अलग-अलग तरह की हाइलाइट
• [प्रयोग के तौर पर] लाइटहाउस पैनल में नया टाइमस्पैन और स्नैपशॉट मोड

Chrome 100

• स्टाइल पैनल में नियमों पर @supports की जानकारी देखना और उसमें बदलाव करना
• सामान्य सिलेक्टर की सुविधा डिफ़ॉल्ट रूप से काम करें
• रिकॉर्डिंग के सिलेक्टर को पसंद के मुताबिक बनाना
• किसी रिकॉर्डिंग का नाम बदलना
• होवर करने पर क्लास/फ़ंक्शन प्रॉपर्टी की झलक देखना
• परफ़ॉर्मेंस पैनल में दिखाए गए कुछ फ़्रेम
• अलग-अलग तरह की हाइलाइट

Chrome 99

• WebSocket के अनुरोधों को कम करना
• ऐप्लिकेशन पैनल में नया Reporting API पैनल
• रिकॉर्डर पैनल में एलिमेंट के दिखने या क्लिक किए जाने तक इंतज़ार करने की सुविधा का इस्तेमाल करना
• कंसोल की बेहतर स्टाइलिंग, फ़ॉर्मैटिंग, और फ़िल्टर करने की सुविधा
• सोर्स मैप फ़ाइलों की मदद से, Chrome एक्सटेंशन को डीबग करना
• सोर्स पैनल में बेहतर सोर्स फ़ोल्डर ट्री
• सोर्स पैनल में, वर्कर की सोर्स फ़ाइलें दिखाना
• Chrome में गहरे रंग वाली थीम के बारे में Chrome में अपडेट
• टच में इस्तेमाल होने वाला कलर पिकर और स्प्लिट पैनल
• अलग-अलग तरह की हाइलाइट

Chrome 98

• झलक दिखाने वाली सुविधा: पूरे पेज पर दिखने वाला सुलभता ट्री
• 'बदलाव' टैब में ज़्यादा सटीक बदलाव
• यूज़र फ़्लो रिकॉर्डिंग के लिए, ज़्यादा समय तक टाइम आउट सेट करना
• बैक-फ़ॉरवर्ड कैश मेमोरी टैब की मदद से, पक्का करें कि आपके पेजों को कैश मेमोरी में सेव किया जा सकता हो
• नया प्रॉपर्टी पैनल फ़िल्टर
• सीएसएस फ़ोर्स-कलर मीडिया फ़ीचर को एम्युलेट करना
• होवर करने वाले निर्देश पर रूलर दिखाना
• Flexbox एडिटर में, row-reverse और column-reverse के साथ काम करें
• XHR को फिर से चलाने और खोज के सभी नतीजों को बड़ा करने के लिए, नए कीबोर्ड शॉर्टकट
• Lighthouse पैनल में Lighthouse 9
• बेहतर सोर्स पैनल
• अलग-अलग तरह की हाइलाइट
• [प्रयोग के तौर पर] Reporting API पैनल में एंडपॉइंट

Chrome 97

• झलक दिखाने की सुविधा: नया रिकॉर्डर पैनल
• डिवाइस मोड में डिवाइस की सूची रीफ़्रेश करना
• 'एचटीएमएल के रूप में बदलाव करें' की मदद से ऑटोकंप्लीट करना
• कोड डीबग करने का बेहतर अनुभव
• सभी डिवाइसों पर DevTools सेटिंग सिंक करना

Chrome 96

• झलक दिखाने की सुविधा: सीएसएस की खास जानकारी देने वाला नया पैनल
• सीएसएस की लंबाई में बदलाव करने और उसे कॉपी करने का अनुभव पहले जैसा किया गया और बेहतर किया गया
• सीएसएस befores-Conrast मीडिया की सुविधा को एम्युलेट करना
• Chrome में, ऑटो डार्क थीम की सुविधा को बेहतर बनाना
• स्टाइल पैनल में, एलानों को JavaScript के तौर पर कॉपी करना
• नेटवर्क पैनल में नया पेलोड टैब
• प्रॉपर्टी पैनल में प्रॉपर्टी दिखाने की सुविधा को बेहतर बनाया गया
• कंसोल में सीओआरएस से जुड़ी गड़बड़ियों को छिपाने का विकल्प
• कंसोल में, Intl ऑब्जेक्ट की सही झलक और जांच करना
• एक साथ काम नहीं करने वाले स्टैक ट्रेस
• कंसोल के साइडबार को बनाए रखना
• ऐप्लिकेशन पैनल में ऐप्लिकेशन कैश मेमोरी पैनल अब काम नहीं करता
• [प्रयोग के तौर पर] ऐप्लिकेशन पैनल में नया Reporting API पैनल

Chrome 95

• सीएसएस की लंबाई वाले नए टूल
• 'समस्याएं' टैब में समस्याएं छिपाना
• प्रॉपर्टी दिखाने की सुविधा को बेहतर बनाया गया
• Lighthouse पैनल में Lighthouse 8.4
• सोर्स पैनल में स्निपेट को क्रम से लगाना
• प्रॉडक्ट की जानकारी का अनुवाद करने के नए लिंक और अनुवाद से जुड़ी गड़बड़ी की शिकायत करना
• DevTools कमांड मेन्यू के लिए बेहतर यूज़र इंटरफ़ेस (यूआई)

Chrome 94

• अपनी पसंदीदा भाषा में DevTools का इस्तेमाल करना
• डिवाइसों की सूची में शामिल नए Nest Hub डिवाइस
• फ़्रेम की जानकारी वाले व्यू में, ऑरिजिन ट्रायल
• सीएसएस कंटेनर क्वेरी का नया बैज
• नेटवर्क फ़िल्टर को बदलने के लिए नया चेकबॉक्स
• Console के साइडबार को रोकने की सुविधा
• समस्याएं टैब और नेटवर्क पैनल में रॉ Set-Cookies हेडर दिखाएं
• कंसोल में, नेटिव ऐक्सेसर को अपनी प्रॉपर्टी के तौर पर लगातार दिखाना
• #sourceURL वाली इनलाइन स्क्रिप्ट के लिए, सही गड़बड़ी वाले स्टैक ट्रेस
• कंप्यूटेड पैनल में कलर फ़ॉर्मैट बदलना
• कस्टम टूलटिप को नेटिव एचटीएमएल टूलटिप से बदलें
• [प्रयोग के तौर पर] समस्याएं टैब में समस्याओं को छिपाना

Chrome 93

• स्टाइल पैनल में मौजूद सीएसएस कंटेनर क्वेरी में बदलाव किया जा सकता है
• नेटवर्क पैनल में वेब बंडल की झलक
• Attribution Reporting API को डीबग करना
• कंसोल में स्ट्रिंग को बेहतर तरीके से हैंडल करने के बारे में जानकारी
• सीओआरएस को बेहतर तरीके से डीबग करना
• लाइटहाउस 8.1
• मेनिफ़ेस्ट पैनल में नए नोट का यूआरएल
• सीएसएस मैच करने वाले सिलेक्टर को ठीक किया गया
• नेटवर्क पैनल में JSON के शानदार जवाब

Chrome 92

• सीएसएस ग्रिड एडिटर
• कंसोल में, const के लिए फिर से एलान करने से जुड़ी सहायता
• सोर्स ऑर्डर व्यूअर
• फ़्रेम की जानकारी देखने के लिए नया शॉर्टकट
• सीओआरएस को डीबग करने की बेहतर सहायता
• XHR लेबल का नाम बदलकर 'फ़ेच/XHR' करें
• नेटवर्क पैनल में Wasm के रिसॉर्स टाइप को फ़िल्टर करना
• नेटवर्क की शर्तें टैब में मौजूद डिवाइसों के लिए उपयोगकर्ता-एजेंट क्लाइंट हिंट
• समस्याएं टैब में जाकर, क्वर्क मोड (पुराने वर्शन पर काम करने की सुविधा) से जुड़ी समस्याओं की शिकायत करना
• परफ़ॉर्मेंस पैनल में कंप्यूट इंटरसेक्शन शामिल करना
• लाइटहाउस पैनल में Lighthouse 7.5
• कॉल स्टैक में मौजूद "फ़्रेम रीस्टार्ट करें" संदर्भ मेन्यू पर काम न करना
• [प्रयोग के तौर पर] प्रोटोकॉल मॉनिटर
• [प्रयोग के तौर पर] Puppeteer Recorder

Chrome 91

• वेबसाइट की परफ़ॉर्मेंस की जानकारी का पॉप-अप
• नया मेमोरी इंस्पेक्टर
• सीएसएस स्क्रोल-स्नैप को विज़ुअलाइज़ करना
• बैज की सेटिंग का नया पैनल
• आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) की जानकारी के साथ इमेज की बेहतर झलक
• Content-Encoding को कॉन्फ़िगर करने के विकल्पों के साथ नई नेटवर्क शर्तों का बटन
• कैलकुलेट की गई वैल्यू देखने का शॉर्टकट
• accent-color कीवर्ड
• रंग और आइकॉन के हिसाब से, समस्याओं को अलग-अलग कैटगरी में बांटना
• Trust टोकन मिटाना
• फ़्रेम की जानकारी वाले व्यू में, ब्लॉक की गई सुविधाएं
• एक्सपेरिमेंट की सेटिंग में एक्सपेरिमेंट फ़िल्टर करना
• कैश मेमोरी पैनल में नया Vary Header कॉलम
• JavaScript की निजी ब्रैंड की जांच में मदद करना
• ब्रेकपॉइंट डीबग करने के लिए बेहतर सहायता
• [] नोटेशन के साथ, कर्सर घुमाने पर दिखने वाली झलक का इस्तेमाल करें
• एचटीएमएल फ़ाइलों की बेहतर आउटलाइन
• Wsm डीबग करने के लिए, गड़बड़ी वाले स्टैक ट्रेस की सही जानकारी

Chrome 90

• सीएसएस फ़्लेक्सबॉक्स को डीबग करने वाले नए टूल
• वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाला नया ओवरले
• समस्या की गिनती को कंसोल के स्टेटस बार में ले जाया गया
• भरोसेमंद वेब गतिविधि से जुड़ी समस्याओं की शिकायत करना
• कंसोल में स्ट्रिंग को (मान्य) JavaScript स्ट्रिंग लिटरल के तौर पर फ़ॉर्मैट करना
• ऐप्लिकेशन पैनल में नया ट्रस्ट टोकन पैनल
• सीएसएस कलर-गामट मीडिया सुविधा का इस्तेमाल करना
• प्रोग्रेसिव वेब ऐप्लिकेशन के लिए पहले से बेहतर टूलिंग
• नेटवर्क पैनल में नया Remote Address Space कॉलम
• परफ़ॉर्मेंस में सुधार
• फ़्रेम की जानकारी वाले व्यू में, अनुमति वाली/अस्वीकार की गई सुविधाएं दिखाना
• कुकी पैनल में नया SameParty कॉलम
• बिना स्टैंडर्ड वाली fn.displayName सहायता
• सेटिंग मेन्यू में Don't show Chrome Data Saver warning का इस्तेमाल बंद होना
• [प्रयोग के तौर पर] समस्याएं टैब में, कम कंट्रास्ट वाली समस्या की अपने-आप रिपोर्ट होने की सुविधा
• [प्रयोग के तौर पर] एलिमेंट पैनल में सुलभता के पूरे ट्री व्यू

Chrome 89

• भरोसेमंद तरह के उल्लंघनों के लिए सहायता को डीबग करना
• व्यूपोर्ट के अलावा, नोड का स्क्रीनशॉट लेना
• नेटवर्क अनुरोधों के लिए नया ट्रस्ट टोकन टैब
• Lighthouse पैनल में Lighthouse 7
• सीएसएस :target की स्थिति को ज़बरदस्ती लागू करने की सुविधा
• डुप्लीकेट एलिमेंट का नया शॉर्टकट
• कस्टम सीएसएस प्रॉपर्टी के लिए कलर पिकर
• सीएसएस प्रॉपर्टी कॉपी करने के लिए नए शॉर्टकट
• डिकोड की गई यूआरएल कुकी दिखाने का नया विकल्प
• सिर्फ़ दिखने वाली कुकी मिटाना
• स्टोरेज पैनल में तीसरे पक्ष की कुकी मिटाने का नया विकल्प
• पसंद के मुताबिक बनाए गए डिवाइसों के लिए, उपयोगकर्ता एजेंट क्लाइंट हिंट में बदलाव करना
• "नेटवर्क लॉग रिकॉर्ड करें" सेटिंग को बनाए रखें
• नेटवर्क पैनल में WebTransport कनेक्शन देखें
• "ऑनलाइन" का नाम बदलकर "कोई थ्रॉटलिंग नहीं" किया गया
• कंसोल, सोर्स पैनल, और स्टाइल पैनल में कॉपी करने के नए विकल्प
• फ़्रेम की जानकारी वाले व्यू में, नए सर्विस वर्कर की जानकारी
• फ़्रेम की जानकारी वाले व्यू में, मेमोरी की जानकारी मापना
• 'समस्याएं' टैब में जाकर सुझाव/राय देना या शिकायत करना
• परफ़ॉर्मेंस पैनल में छोड़े गए फ़्रेम
• डिवाइस मोड में फ़ोल्ड किए जा सकने वाले डिवाइस और ड्यूअल-स्क्रीन पर सबको बेहतर अनुभव देना
• [प्रयोग के तौर पर] Puppeteer Recorder से ब्राउज़र टेस्टिंग को ऑटोमेट करना
• [प्रयोग के तौर पर] स्टाइल पैनल में फ़ॉन्ट एडिटर
• [प्रयोग के तौर पर] सीएसएस फ़्लेक्सबॉक्स डीबग करने वाले टूल
• [प्रयोग के तौर पर] सीएसपी के उल्लंघन से जुड़ा नया टैब
• [प्रयोग के तौर पर] कलर कंट्रास्ट की नई कैलकुलेशन - ऐडवांस पर्सेप्चुअल कंट्रास्ट एल्गोरिदम (एपीसीए)

Chrome 88

• DevTools चालू करना
• सीएसएस के ऐंगल विज़ुअलाइज़ेशन के नए टूल
• काम न करने वाली इमेज टाइप को एम्युलेट करें
• स्टोरेज पैनल में स्टोरेज कोटा के साइज़ को सिम्युलेट करना
• परफ़ॉर्मेंस पैनल में, वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली नई लेन
• नेटवर्क पैनल में सीओआरएस से जुड़ी गड़बड़ियों की शिकायत करना
• फ़्रेम के ब्यौरे वाले व्यू में क्रॉस-ऑरिजिन आइसोलेशन की जानकारी
• फ़्रेम की जानकारी वाले व्यू में, नए वेब वर्कर की जानकारी
• खुली विंडो के लिए, ओपनर फ़्रेम की जानकारी दिखाना
• सर्विस वर्कर पैनल से नेटवर्क पैनल खोलना
• प्रॉपर्टी की वैल्यू कॉपी करें
• नेटवर्क शुरू करने वाले के लिए स्टैकट्रेस को कॉपी करें
• माउसओवर पर Wasm वैरिएबल की वैल्यू की झलक देखना
• कंसोल में Wasm वैरिएबल का आकलन करना
• फ़ाइल/मेमोरी के साइज़ के लिए मेज़रमेंट की एक जैसी इकाइयां
• एलिमेंट पैनल में झूठे एलिमेंट हाइलाइट करना
• [प्रयोग के तौर पर] सीएसएस Flexbox को डीबग करने वाले टूल
• [प्रयोग के तौर पर] कॉर्ड कीबोर्ड शॉर्टकट को पसंद के मुताबिक बनाएं

Chrome 87

• सीएसएस ग्रिड को डीबग करने वाले नए टूल
• नया WebAuthn टैब
• टूल को सबसे ऊपर और सबसे नीचे मौजूद पैनल के बीच एक जगह से दूसरी जगह ले जाना
• स्टाइल पैनल में, कंप्यूटेड साइडबार वाला नया पैनल
• कंप्यूटेड पैनल में सीएसएस प्रॉपर्टी को ग्रुप में बांटना
• Lighthouse पैनल में Lighthouse 6.3
• समय सेक्शन में performance.mark() इवेंट
• नेटवर्क पैनल में नए resource-type और url फ़िल्टर
• फ़्रेम की जानकारी वाले व्यू से जुड़े अपडेट
• ज़्यादा टूल मेन्यू में Settings को बंद किया गया
• [प्रयोग के तौर पर] सीएसएस की खास जानकारी वाले पैनल में, कलर कंट्रास्ट से जुड़ी समस्याएं देखना और उन्हें ठीक करना
• [प्रयोग के तौर पर] DevTools में कीबोर्ड शॉर्टकट को पसंद के मुताबिक बनाना

Chrome 86

• नया मीडिया पैनल
• एलिमेंट पैनल के संदर्भ मेन्यू का इस्तेमाल करके नोड के स्क्रीनशॉट कैप्चर करना
• समस्याएं टैब के अपडेट
• जो लोकल फ़ॉन्ट मौजूद नहीं हैं उन्हें एम्युलेट करें
• इनऐक्टिव उपयोगकर्ताओं को एम्युलेट करना
• prefers-reduced-data को एम्युलेट करें
• JavaScript की नई सुविधाओं के लिए सहायता
• Lighthouse पैनल में Lighthouse 6.2
• सर्विस वर्कर पैनल में "अन्य ऑरिजिन" लिस्टिंग को बंद करना
• फ़िल्टर किए गए आइटम के लिए कवरेज की खास जानकारी दिखाना
• ऐप्लिकेशन पैनल में फ़्रेम की जानकारी वाला नया व्यू
• स्टाइल पैनल में रंगों का ऐक्सेस किया जा सकने वाला सुझाव
• एलिमेंट पैनल में प्रॉपर्टी पैनल को फिर से चालू करना
• नेटवर्क पैनल में X-Client-Data हेडर की ऐसी वैल्यू जिन्हें इंसान पढ़ सकते हैं
• स्टाइल पैनल में पसंद के मुताबिक फ़ॉन्ट अपने-आप पूरा होना
• नेटवर्क पैनल में संसाधन का टाइप लगातार दिखाना
• एलिमेंट और नेटवर्क पैनल में मौजूद बटन हटाना

Chrome 85

• CSS-in-JS फ़्रेमवर्क के लिए स्टाइल में बदलाव
• Lighthouse पैनल में Lighthouse 6
• फ़र्स्ट मीनिंगफ़ुल पेंट (एफ़एमपी) का इस्तेमाल बंद होना
• JavaScript की नई सुविधाओं के लिए सहायता
• मेनिफ़ेस्ट पैनल में ऐप्लिकेशन शॉर्टकट के लिए नई चेतावनियां
• समय टैब में सर्विस वर्कर respondWith के इवेंट
• कंप्यूटेड पैनल का लगातार डिसप्ले
• WebAssembly फ़ाइलों के लिए बाइट कोड ऑफ़सेट
• सोर्स पैनल में लाइन के हिसाब से कॉपी और कट करें
• कंसोल सेटिंग से जुड़े अपडेट
• परफ़ॉर्मेंस पैनल से जुड़े अपडेट
• ब्रेकपॉइंट, शर्त के साथ ब्रेकपॉइंट, और लॉगपॉइंट के लिए नए आइकॉन

Chrome 84

• 'समस्याओं' के नए टैब में, साइट की समस्याएं ठीक करना
• जांच मोड के टूलटिप में सुलभता की जानकारी देखना
• परफ़ॉर्मेंस पैनल से जुड़े अपडेट
• कंसोल में उपलब्ध, प्रॉमिस के लिए ज़्यादा सटीक शब्दावली
• स्टाइल पैनल से जुड़े अपडेट
• एलिमेंट पैनल में प्रॉपर्टी पैनल का बंद होना
• मेनिफ़ेस्ट पैनल में ऐप्लिकेशन शॉर्टकट की सुविधा

Chrome 83

• देखने की क्षमता में कमी को दूर करना
• भाषाओं को एम्युलेट करें
• क्रॉस-ऑरिजिन एम्बेडर नीति (सीओईपी) को डीबग करना
• ब्रेकपॉइंट, शर्त के साथ ब्रेकपॉइंट, और लॉगपॉइंट के लिए नए आइकॉन
• किसी खास कुकी को सेट करने वाले नेटवर्क के अनुरोध देखना
• कमांड मेन्यू से बाईं ओर डॉक करें
• मुख्य मेन्यू में मौजूद 'सेटिंग' विकल्प को अब अलग कर दिया गया है
• ऑडिट पैनल अब लाइटहाउस पैनल है
• फ़ोल्डर में मौजूद सभी स्थानीय बदलावों को मिटाना
• लंबे टास्क का यूज़र इंटरफ़ेस (यूआई) अपडेट किया गया
• मेनिफ़ेस्ट पैनल में, मास्केबल आइकॉन की सुविधा

Chrome 82

Chrome 82 रद्द कर दिया गया है.

Chrome 81

• डिवाइस मोड में Moto G4 की सहायता टीम
• कुकी से जुड़े अपडेट
• वेब ऐप्लिकेशन मेनिफ़ेस्ट के ज़्यादा सटीक आइकॉन
• एस्केप्ड वैल्यू देखने के लिए, सीएसएस content प्रॉपर्टी पर कर्सर घुमाएं
• कंसोल में सोर्स मैप से जुड़ी गड़बड़ियां
• फ़ाइल खत्म होने से पहले स्क्रोल करने की सुविधा बंद करने की सेटिंग

Chrome 80

• कंसोल में let और class को फिर से एलान करने से जुड़ी सहायता
• WebAssembly डीबग करने की बेहतर सुविधा
• शुरू करने वाले टैब में, इनिशिएटर चेन का अनुरोध करें
• खास जानकारी में, चुने गए नेटवर्क अनुरोध को हाइलाइट करना
• नेटवर्क पैनल में यूआरएल और पाथ कॉलम
• अपडेट की गई उपयोगकर्ता एजेंट स्ट्रिंग
• नया ऑडिट पैनल कॉन्फ़िगरेशन यूज़र इंटरफ़ेस (यूआई)
• हर फ़ंक्शन या हर ब्लॉक कोड कवरेज के मोड
• अब पेज को फिर से लोड करके कोड कवरेज शुरू करना ज़रूरी है

Chrome 79

• कुकी ब्लॉक होने की वजह डीबग करना
• कुकी की वैल्यू देखना
• पसंद के हिसाब से रंग की अलग-अलग स्कीम और प्राथमिकता से कम किए गए मोशन से जुड़ी प्राथमिकताओं को सिम्युलेट करें
• कोड कवरेज से जुड़े अपडेट
• नेटवर्क रिसॉर्स के अनुरोध की वजह डीबग करना
• कंसोल और सोर्स पैनल, इंडेंट की सेटिंग को फिर से लागू करते हैं
• कर्सर नेविगेशन के लिए नए शॉर्टकट

Chrome 78

• ऑडिट पैनल में एक से ज़्यादा क्लाइंट वाली सहायता
• पेमेंट हैंडलर को डीबग करना
• ऑडिट पैनल में Lighthouse 5.2
• परफ़ॉर्मेंस पैनल में सबसे बड़ा कॉन्टेंटफ़ुल पेंट
• मुख्य मेन्यू में मौजूद DevTools से जुड़ी समस्याएं हल करें

Chrome 77

• एलिमेंट स्टाइल कॉपी करना
• लेआउट शिफ़्ट को विज़ुअलाइज़ करना
• ऑडिट पैनल में Lighthouse 5.1
• ओएस की थीम सिंक करना
• ब्रेकपॉइंट एडिटर खोलने के लिए कीबोर्ड शॉर्टकट
• नेटवर्क पैनल में कैश मेमोरी को प्रीफ़ेच करें
• ऑब्जेक्ट देखते समय निजी प्रॉपर्टी
• ऐप्लिकेशन पैनल में सूचनाएं और पुश मैसेज

Chrome 76

• सीएसएस वैल्यू की मदद से ऑटोकंप्लीट करना
• नेटवर्क सेटिंग के लिए नया यूज़र इंटरफ़ेस (यूआई)
• HAR एक्सपोर्ट में WebSocket मैसेज
• HAR इंपोर्ट और एक्सपोर्ट करें बटन
• रीयल-टाइम में मेमोरी का इस्तेमाल
• सर्विस वर्कर के रजिस्ट्रेशन पोर्ट नंबर
• बैकग्राउंड फ़ेच और बैकग्राउंड सिंक इवेंट की जांच करना
• Firefox के लिए Puppeteer

Chrome 75

• सीएसएस फ़ंक्शन अपने-आप पूरे होने पर, काम के प्रीसेट
• कमांड मेन्यू से साइट डेटा मिटाना
• सभी IndexedDB डेटाबेस देखें
• होवर करने पर संसाधन का कंप्रेस नहीं किया गया साइज़ देखना
• ब्रेकपॉइंट पैनल में इनलाइन ब्रेकपॉइंट
• IndexedDB और कैश रिसॉर्स की संख्या
• जांच करने के बारे में ज़्यादा जानकारी देने वाले टूलटिप को बंद करने की सेटिंग
• एडिटर में टैब इंडेंट को टॉगल करने की सेटिंग

Chrome 74

• सीएसएस प्रॉपर्टी से जिन नोड पर असर पड़ा है उन्हें हाइलाइट करना
• ऑडिट पैनल में Lighthouse v4
• WebSocket बाइनरी मैसेज व्यूअर
• कमांड मेन्यू में एरिया का स्क्रीनशॉट कैप्चर करें
• नेटवर्क पैनल में सर्विस वर्कर फ़िल्टर
• परफ़ॉर्मेंस पैनल से जुड़े अपडेट
• परफ़ॉर्मेंस पैनल की रिकॉर्डिंग में लंबे टास्क
• समय सेक्शन में फ़र्स्ट पेंट
• बोनस सलाह: आरजीबी और एचएसएल कलर कोड देखने के लिए शॉर्टकट (वीडियो)

Chrome 73

• लॉगपॉइंट
• जांच मोड में, ज़्यादा जानकारी देने वाले टूलटिप
• कोड कवरेज का डेटा एक्सपोर्ट करना
• कीबोर्ड की मदद से कंसोल पर नेविगेट करना
• कलर पिकर में AAA के कंट्रास्ट अनुपात की लाइन
• पसंद के मुताबिक जियोलोकेशन के बदलाव सेव करें
• कोड फ़ोल्डिंग
• फ़्रेम टैब का नाम बदलकर मैसेज टैब किया गया
• बोनस के लिए सलाह: प्रॉपर्टी के हिसाब से नेटवर्क पैनल फ़िल्टर करना (वीडियो)

Chrome 72

• परफ़ॉर्मेंस पैनल में परफ़ॉर्मेंस मेट्रिक को विज़ुअलाइज़ करना
• डीओएम ट्री में टेक्स्ट नोड हाइलाइट करें
• डीओएम नोड में JS पाथ कॉपी करें
• ऑडिट पैनल अपडेट, जिसमें एक नया ऑडिट शामिल है जो कमांड मेन्यू से ऑडिट पैनल को ऐक्सेस करने के लिए JS लाइब्रेरी और नए कीवर्ड का पता लगाता है
• बोनस के लिए सलाह: मीडिया क्वेरी की जांच करने के लिए डिवाइस मोड का इस्तेमाल करें (वीडियो)

Chrome 71

• डीओएम नोड को हाइलाइट करने के लिए, लाइव एक्सप्रेशन के नतीजे पर कर्सर घुमाएं
• डीओएम नोड को ग्लोबल वैरिएबल के तौर पर स्टोर करना
• शुरू करने वाले और प्राथमिकता की जानकारी अब HAR इंपोर्ट और एक्सपोर्ट में
• मुख्य मेन्यू में जाकर निर्देश मेन्यू ऐक्सेस करना
• पिक्चर में पिक्चर ब्रेकपॉइंट
• बोनस के लिए सलाह: कंसोल में नोड के ट्रिगर हुए इवेंट को लॉग करने के लिए, monitorEvents() का इस्तेमाल करें (वीडियो)

Chrome 70

• कंसोल में लाइव एक्सप्रेशन
• ईगर इवैलुएशन के दौरान डीओएम नोड को हाइलाइट करना
• परफ़ॉर्मेंस पैनल को ऑप्टिमाइज़ करना
• ज़्यादा भरोसेमंद डीबग करना
• कमांड मेन्यू से, नेटवर्क थ्रॉटलिंग चालू करना
• शर्त के साथ ब्रेकपॉइंट अपने-आप पूरा होने की सुविधा
• AudioContext इवेंट के बारे में ब्रेक
• ndb की मदद से Node.js ऐप्लिकेशन को डीबग करना
• बोनस सलाह: User Timing API की मदद से असल दुनिया के उपयोगकर्ता इंटरैक्शन को मेज़र करें

Chrome 68

• एगर इवैलुएशन
• आर्ग्युमेंट से जुड़े संकेत
• फ़ंक्शन अपने-आप पूरा होना
• ES2017 के कीवर्ड
• ऑडिट पैनल में Lighthouse 3.0
• BigInt की सहायता
• वॉच पैनल में प्रॉपर्टी पाथ जोड़ना
• "टाइमस्टैंप दिखाएं" को 'सेटिंग' में ले जाया गया
• बोनस के लिए सलाह: कंसोल के ऐसे तरीके जिन्हें कम लोग जानते हैं (वीडियो)

Chrome 67

• सभी नेटवर्क हेडर में खोजना
• सीएसएस के वैरिएबल की वैल्यू की झलक
• फ़ेच के तौर पर कॉपी करें
• नए ऑडिट, डेस्कटॉप कॉन्फ़िगरेशन के विकल्प, और व्यू ट्रेस
• इनफ़ाइनाइट लूप को रोकना
• परफ़ॉर्मेंस टैब में उपयोगकर्ता समय की जानकारी
• JavaScript वीएम इंस्टेंस की जानकारी, मेमोरी पैनल में साफ़ तौर पर दिखती है
• नेटवर्क टैब का नाम बदलकर पेज टैब किया गया
• गहरे रंग वाली थीम के अपडेट
• सुरक्षा पैनल में सर्टिफ़िकेट की पारदर्शिता से जुड़ी जानकारी
• परफ़ॉर्मेंस पैनल में साइट आइसोलेशन की सुविधाएं
• बोनस के लिए सलाह: लेयर पैनल + ऐनिमेशन इंस्पेक्टर (वीडियो)

Chrome 66

• नेटवर्क पैनल में ब्लैकबॉक्सिंग
• डिवाइस मोड में ज़ूम करने की सुविधा में अपने-आप बदलाव होना
• झलक और जवाब टैब में सुंदर-प्रिंटिंग
• झलक टैब में एचटीएमएल कॉन्टेंट की झलक देखना
• एचटीएमएल के अंदर मौजूद स्टाइल के लिए, लोकल ओवरराइड की सुविधा
• बोनस के लिए सलाह: इवेंट लिसनर ब्रेकपॉइंट को ज़्यादा काम का बनाने के लिए, Blackbox फ़्रेमवर्क स्क्रिप्ट का इस्तेमाल करना

Chrome 65

• स्थानीय बदलाव
• नए सुलभता टूल
• बदलाव टैब
• एसईओ और परफ़ॉर्मेंस के नए ऑडिट
• परफ़ॉर्मेंस पैनल में एक से ज़्यादा रिकॉर्डिंग
• एक साथ काम नहीं करने वाले कोड में कर्मचारियों के साथ काम करने वाला भरोसेमंद कोड
• बोनस के लिए सलाह: Puppeteer की मदद से DevTools से जुड़ी अपने-आप होने वाली कार्रवाइयां (वीडियो)

Chrome 64

• परफ़ॉर्मेंस मॉनिटर
• कंसोल साइडबार
• Console के मिलते-जुलते मैसेज का ग्रुप बनाना
• बोनस के लिए सलाह: गलत क्लास को टॉगल करें (वीडियो)

Chrome 63

• एक से ज़्यादा क्लाइंट वाले रिमोट को डीबग करने की सुविधा
• फ़ाइल फ़ोल्डर 2.0
• चार नए ऑडिट
• कस्टम डेटा की मदद से पुश नोटिफ़िकेशन सिम्युलेट करना
• कस्टम टैग की मदद से, बैकग्राउंड सिंक इवेंट ट्रिगर करना
• बोनस के लिए सलाह: इवेंट लिसनर के लिए ब्रेकपॉइंट (वीडियो)

Chrome 62

• कंसोल में टॉप-लेवल के लोगों का इंतज़ार करना
• स्क्रीनशॉट का नया वर्कफ़्लो
• सीएसएस ग्रिड को हाइलाइट करने की सुविधा
• ऑब्जेक्ट की क्वेरी के लिए एक नया Console एपीआई
• नए कंसोल फ़िल्टर
• नेटवर्क पैनल में HAR इंपोर्ट
• झलक में दिखने वाली कैश मेमोरी के संसाधन
• कैश मेमोरी को डीबग करने के अनुमान के बारे में ज़्यादा जानकारी
• ब्लॉक-लेवल के कोड का कवरेज

Chrome 61

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

Chrome 60

• नया ऑडिट पैनल
• तीसरे पक्ष के बैज
• 'यहां पर जारी रखें' के लिए नया जेस्चर
• एक साथ काम नहीं करने वाली प्रोसेस में जाएं
• कंसोल में ज़्यादा जानकारी देने वाले ऑब्जेक्ट की झलक
• कंसोल में ज़्यादा जानकारी देने वाला कॉन्टेक्स्ट चुनना
• कवरेज टैब में रीयल-टाइम अपडेट
• नेटवर्क को कंट्रोल करने के आसान विकल्प
• एक साथ काम नहीं करने वाली स्टैक, डिफ़ॉल्ट रूप से चालू रहती हैं

Chrome 59

• सीएसएस और जेएस कोड कवरेज
• पूरे पेज के स्क्रीनशॉट
• अनुरोधों को ब्लॉक करना
• एक साथ सिंक करने के इंतज़ार में हैं
• यूनिफ़ाइड कमांड मेन्यू