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

Trusted Types के उल्लंघन ठीक करने से जुड़ी सहायता

Trusted Type के उल्लंघनों पर ब्रेकपॉइंट

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

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

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

Trusted Type के उल्लंघनों पर ब्रेकपॉइंट

Chromium से जुड़ी समस्या: 1142804

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

सोर्स पैनल में मौजूद समस्या को 'समस्याएं' टैब से लिंक करना

Chromium से जुड़ी समस्या: 1150883

व्यू पोर्ट से बाहर के नोड का स्क्रीनशॉट कैप्चर करना

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

Elements पैनल में, किसी एलिमेंट पर राइट क्लिक करें और Capture node screenshot को चुनें.

व्यू पोर्ट से बाहर के नोड का स्क्रीनशॉट कैप्चर करना

Chromium से जुड़ी समस्या: 1003629

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

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

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

डीबग करने से जुड़ी ज़्यादा सुविधाएं, आने वाली रिलीज़ में उपलब्ध होंगी.

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

Chromium की समस्या: 1126824

Lighthouse पैनल में Lighthouse 7

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

Lighthouse पैनल में Lighthouse 7

Lighthouse 7 में नए ऑडिट:

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

    • "Registers a service worker…" ऑडिट को PWA Optimized ग्रुप में ले जाया गया है. साथ ही, "Uses HTTPS" ऑडिट को अब "installability requirements" ऑडिट के मुख्य हिस्से के तौर पर शामिल किया गया है.
    • तेज़ और भरोसेमंद ग्रुप हटा दिया जाता है. "इंस्टॉल करने की सुविधा से जुड़ी ज़रूरी शर्तों" की नई ऑडिट में, ऑफ़लाइन होने पर काम करने की सुविधा की जांच शामिल है. इसलिए, "ऑफ़लाइन होने पर, मौजूदा पेज और start_url, 200 कोड का जवाब देते हैं" ऑडिट को हटा दिया गया है. "मोबाइल नेटवर्क पर पेज लोड होने की गति ज़रूरत के मुताबिक तेज़ है" ऑडिट को भी हटा दिया गया था.

Chromium से जुड़ी समस्या: 772558

Elements पैनल से जुड़े अपडेट

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

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

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

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

सीएसएस `:target` स्टेट को चालू करना

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 कनेक्शन

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

Chromium से जुड़ी समस्या: 1152290

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

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

नेटवर्क लॉग रिकॉर्ड करें

Chromium से जुड़ी समस्या: 1028078

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

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

अब 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 को ऐक्सेस करने के लिए, वेब प्लैटफ़ॉर्म की एक्सपेरिमेंटल सुविधाएं भी चालू की जा सकती हैं. एक्सपेरिमेंट आइकॉन, Experimental Web Platform features फ़्लैग की स्थिति दिखाता है. फ़्लैग चालू होने पर, आइकॉन हाइलाइट हो जाता है. chrome://flags पर जाएं और फ़्लैग को टॉगल करें.

ड्यूअल स्क्रीन मोड को एम्युलेट करना

Chromium से जुड़ी समस्या: 1054281

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

Puppeteer Recorder की मदद से, ब्राउज़र की टेस्टिंग अपने-आप होने की सुविधा चालू करना

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

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

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

स्क्रिप्ट चलाने के लिए, Puppeteer की आधिकारिक साइट पर मौजूद शुरू करने के लिए गाइड में दिए गए निर्देशों का पालन करें.

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

Puppeteer Recorder

Chromium से जुड़ी समस्या: 1144127

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

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

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

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

Chromium से जुड़ी समस्या: 1093229

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

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

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

Flexbox

Chromium से जुड़ी समस्या: 1139949

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

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

'सीएसपी के उल्लंघन' टैब

Chromium से जुड़ी समस्या: 1137837

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

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

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

कलर पिकर में एपीसीए

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

Chromium से जुड़ी समस्या: 1121900

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

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

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

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

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

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