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

Sofia Emelianova

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

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

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

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

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

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

चेतावनी: इस विकल्प के चालू होने पर, document.visibilityState को visible पर सेट किया जाता है और visibilitychange इवेंट फ़ायर नहीं होता है. ज़्यादा जानकारी के लिए, पेज विज़िबिलिटी एपीआई देखें.

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

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

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

   

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

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

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

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

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

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

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

अगर आपके डिवाइस पर यह फ़ॉन्ट मिलता है, तो Chrome इस वाक्य को Courier New में रेंडर करता है.

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

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

   

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

3. वेब पर मिलने वाले Roboto में दिए गए वाक्य को पढ़ें.

   

गहरे रंग वाला मोड अपने-आप चालू करें

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

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

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

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

अहम जानकारी: ऑटो डार्क थीम चालू होने पर, सीएसएस मीडिया फ़ीचर prefers-color-scheme की ड्रॉप-डाउन सूची बंद हो जाती है और अपने-आप prefers-color-scheme: dark पर सेट हो जाती है.

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

सभी के लिए वेब को ऐक्सेस करना और इसका आनंद लेना ज़रूरी है. 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. पेज को फिर से लोड करें और img src पर कर्सर घुमाएं. मौजूदा इमेज src (currentSrc) अब फ़ॉलबैक WebP इमेज है.

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

अहम जानकारी: ये विकल्प इमेज को अपने-आप कैश मेमोरी में सेव करने की सुविधा को बंद कर देते हैं.