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

Sofia Emelianova

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

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

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

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

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

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

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

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

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

   

आपको यह विकल्प, एलिमेंट > स्टाइल में ऐक्शन बार पर मौजूद :hov बटन में भी दिखेगा.

किसी एलिमेंट को फ़्रीज़ करने के अन्य तरीके जानने के लिए, स्क्रीन को फ़्रीज़ करना और गायब होने वाले एलिमेंट की जांच करना लेख पढ़ें.

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

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

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

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

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

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

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

1. ऊपर दिए गए वाक्य की जांच करें. इसके लिए, एलिमेंट > कंप्यूट किया गया खोलें. इसके बाद, नीचे की ओर स्क्रोल करें और रेंडर किए गए फ़ॉन्ट में जाकर देखें कि 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>

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

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

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