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

Sofia Emelianova

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

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

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

1. इस demo पर रेंडरिंग टैब खोलें और विज्ञापन फ़्रेम हाइलाइट करें को चुनें.
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 फ़ॉर्मैट में इमेज दिखाने के लिए, यह HTML कोड है. साथ ही, पुराने ब्राउज़र के लिए फ़ॉलबैक 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 इमेज को भी बंद किया जा सकता है.