दूसरे इफ़ेक्ट इस्तेमाल करें: अपने-आप गहरे रंग वाली थीम चालू करें, फ़ोकस को एम्युलेट करें वगैरह

Sofia Emelianova

रेंडरिंग टैब के विकल्पों के इस रेफ़रंस की मदद से, अपने पेज पर लागू करने के लिए मददगार इफ़ेक्ट के बारे में जानें.

विज्ञापन के फ़्रेम हाइलाइट करें

फ़्रेम को विज्ञापनों के तौर पर टैग किया गया है या नहीं, यह देखने के लिए:

1. इस डेमो पर रेंडरिंग टैब खोलें और विज्ञापन फ़्रेम हाइलाइट करें को चुनें.
2. लाल रंग से हाइलाइट किए गए विज्ञापन फ़्रेम को देखें.

फ़ोकस किए गए पेज को एम्युलेट करें

फ़ोकस को पेज से DevTools पर स्विच करने पर, फ़ोकस से ट्रिगर होने पर कुछ ओवरले एलिमेंट अपने-आप छिप जाते हैं. उदाहरण के लिए, ड्रॉप-डाउन सूचियां, मेन्यू या तारीख चुनने वाला टूल. check_box फ़ोकस किए गए पेज को एम्युलेट करें विकल्प की मदद से, आप ऐसे एलिमेंट को इस तरह डीबग कर सकते हैं जैसे वह फ़ोकस में है.

फ़ोकस किए गए पेज को एम्युलेट करने के लिए:

1. वह पेज खोलें जिसमें डीबग करने के लिए एलिमेंट मौजूद है. उदाहरण के लिए, खोज बार के साथ YouTube वेबसाइट.

2. पेज पर, रेंडरिंग टैब खोलें. इसके बाद, फ़ोकस किए गए पेज को एम्युलेट करें पर सही का निशान लगाएं और उसे हटाएं.

   

यही विकल्प :hov बटन के नीचे, एलिमेंट में जाकर भी देखा जा सकता है > स्टाइल.

स्थानीय फ़ॉन्ट बंद करें

@font-face नियमों में local() सोर्स को बंद करके देखें कि स्थानीय फ़ॉन्ट के विकल्प उम्मीद के मुताबिक काम कर रहे हैं या नहीं.

अक्सर, डेवलपर और डिज़ाइनर डेवलपमेंट के दौरान एक ही फ़ॉन्ट की दो अलग-अलग कॉपी का इस्तेमाल करते हैं:

• डिज़ाइन टूल के लिए स्थानीय फ़ॉन्ट और
• आपके कोड के लिए वेब फ़ॉन्ट

स्थानीय फ़ॉन्ट बंद करने से, ये काम करने में आसानी होती है:

• वेब फ़ॉन्ट लोड होने की परफ़ॉर्मेंस और ऑप्टिमाइज़ेशन को डीबग करें और मेज़र करें
• पुष्टि करें कि आपकी सीएसएस @font-face के नियम सही हैं
• वेब फ़ॉन्ट और उनके लोकल वर्शन के बीच के अंतर का पता लगाएं

@font-face नियमों में, local() सोर्स मौजूद न होने की नकल करें:

1. ऊपर दिए गए वाक्य की जांच करें, इसके बाद Elements खोलें > कंप्यूट किए गए, नीचे की ओर स्क्रोल करें और रेंडर किए गए फ़ॉन्ट में जाकर देखें कि Chrome को लोकल फ़ाइलों में Courier New मिला.

   

2. रेंडरिंग टैब खोलें, स्थानीय फ़ॉन्ट बंद करें को चुनें और refresh पेज को फिर से लोड करें.

3. वेब पर मिले Roboto में वाक्य को ध्यान से देखें.

   

गहरे रंग वाला मोड अपने-आप चालू होने की सुविधा चालू करें

देखें कि गहरे रंग वाले मोड में आपकी साइट कैसी दिख सकती है, भले ही आपने इसे लागू न किया हो.

Chrome 96 ने Android पर, ऑटो डार्क थीम के लिए ऑरिजिन ट्रायल लॉन्च किया है. इस सुविधा के तहत, अगर उपयोगकर्ता ऑपरेटिंग सिस्टम में गहरे रंग वाली थीम के लिए ऑप्ट इन करता है, तो ब्राउज़र हल्के रंग वाली थीम वाली साइटों पर अपने-आप जनरेट होने वाली गहरे रंग वाली थीम लागू करता है.

गहरे रंग वाला मोड अपने-आप चालू होने की सुविधा चालू करने के लिए:

1. इस पेज पर, रेंडरिंग टैब खोलें और अपने-आप गहरे रंग वाला मोड चालू करें को चुनें.
2. इस पेज को गहरे रंग वाले मोड में देखें.

देखने से जुड़ी समस्याओं को एम्युलेट करें

सभी लोगों को वेब का ऐक्सेस और उसका आनंद लेना चाहिए. Google इसे हकीकत में बदलने के लिए प्रतिबद्ध है.

Chrome DevTools की मदद से यह देखा जा सकता है कि दृष्टि कमियों वाले लोगों को आपकी साइट कैसे दिखती है, ताकि आप उनके लिए साइट को बेहतर बना सकें. ज़्यादा जानकारी के लिए, कलर विज़न की कमियों को सिम्युलेट करना देखें.

देखने से जुड़ी समस्याओं को एम्युलेट करने के लिए:

1. रेंडरिंग टैब खोलें.

2. दृष्टि कमियों को बेहतर बनाएं के नीचे, ड्रॉप-डाउन सूची में से इनमें से कोई एक चुनें:

   • कोई एम्युलेशन नहीं.
   • धुंधला दिखना.
   • कम कंट्रास्ट.
   • प्रोटेनोपिया (लाल रंग नहीं). लाल रंग का दिखाई न देना; हरे, लाल, और पीले रंगों के बारे में भ्रम पैदा करना.
   • ड्यूटेरानोपिया (हरा नहीं). हरे रंग का अनुमान कम है; हरे, लाल, और पीले रंगों के बारे में भ्रम पैदा करना.
   • ट्रिटानोपिया (नीला नहीं). नीले रंग का अंदाज़ा न होना; हरे और नीले रंग का भ्रम.
   • अक्रोमाटोप्सिया (कोई रंग नहीं). कलर विज़न का थोड़ा या पूरा न होना.

AVIF और WebP इमेज फ़ॉर्मैट को बंद करना

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

मान लें कि आपके पास नए ब्राउज़र के लिए AVIF और WebP फ़ॉर्मैट में इमेज दिखाने के लिए, यहां दिया गया एचटीएमएल कोड है. पुराने ब्राउज़र के लिए, फ़ॉलबैक PNG इमेज का इस्तेमाल किया जा सकता है.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

किसी पेज (या इसी तरह, WebP इमेज) पर सभी AVIF इमेज को बंद करने के लिए:

1. रेंडरिंग टैब खोलें, AVIF इमेज फ़ॉर्मैट बंद करें को चुनें.
2. refresh पेज को फिर से लोड करें और इस पर कर्सर घुमाएं img src. इमेज के मौजूदा सोर्स (currentSrc) को अब फ़ॉलबैक WebP इमेज के तौर पर सेट किया गया है.

इसी तरह, WebP इमेज को बंद किया जा सकता है.