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

Kayce Basques

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

रेंडरिंग टैब खोलें और आंखों की कमियों को एमुलेट करें की नई सुविधा का इस्तेमाल करें. इससे आपको यह बेहतर तरीके से पता चलेगा कि अलग-अलग तरह की आंखों की कमियों वाले लोग आपकी साइट को कैसे देखते हैं.

धुंधली नज़र को एम्युलेट करना.

धुंधली की गई नज़र को एम्युलेट करना.

DevTools, धुंधले विज़न और रंगों की पहचान करने में होने वाली इन समस्याओं को एमुलेट कर सकता है:

  • प्रोटानोपिया: लाल रंग न देख पाना.
  • हरा रंग न देख पाने की समस्या: इस समस्या में, हरे रंग की लाइट को नहीं देखा जा सकता.
  • ट्रिटैनोपिया: नीले रंग को न देख पाना.
  • ऐक्रोमैटोप्सिया: इस बीमारी में व्यक्ति को स्लेटी रंग के अलावा कोई भी रंग नहीं दिखता. यह बीमारी बहुत ही कम होती है.

रंगों की पहचान न कर पाने की समस्या के कुछ ऐसे भी वर्शन हैं जो ज़्यादा गंभीर नहीं होते. असल में, ये वर्शन ज़्यादा आम हैं. उदाहरण के लिए, प्रोटनॉमली में लाल रंग के प्रति संवेदनशीलता कम होती है. यह प्रोटानोपिया से अलग है, जिसमें लाल रंग को पहचानने की पूरी क्षमता नहीं होती. हालांकि, इन "-माली" वाली दृष्टि की गड़बड़ियों के बारे में साफ़ तौर पर नहीं बताया गया है: जिन लोगों की दृष्टि में ऐसी गड़बड़ी होती है वे सभी अलग-अलग होते हैं और हो सकता है कि वे चीज़ों को अलग तरह से देखें (ज़रूरी रंगों को ज़्यादा/कम देख पाएं).

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

Chromium की समस्या #1003700 पर सुझाव, शिकायत या राय भेजें या लागू करने के बारे में ज़्यादा पढ़ें.

स्थानीय भाषाओं को एमुलेट करना

अब सेंसर > जगह की जानकारी में जाकर, जगह की जानकारी सेट करके, स्थानीय भाषाओं को एमुलेट किया जा सकता है. कमांड मेन्यू खोलें और सेंसर टैब को ऐक्सेस करने के लिए Sensors टाइप करें. ये कार्रवाइयां करने के बाद, DevTools मौजूदा डिफ़ॉल्ट स्थानीय भाषा में बदलाव करता है. इससे इन पर असर पड़ता है:

  • Intl.* एपीआई, जैसे कि new Intl.NumberFormat().resolvedOptions().locale
  • स्थानीय भाषा के हिसाब से काम करने वाले अन्य JavaScript API, जैसे कि String.prototype.localeCompare और *.prototype.toLocaleString, जैसे कि 123_456..toLocaleString()
  • navigator.language और navigator.languages जैसे डीओएम एपीआई
  • Accept-Language एचटीटीपी अनुरोध हेडर

इसे खुद आज़माने के लिए, स्थानीय भाषा के हिसाब से कोड का उदाहरण देखें.

Chromium की समस्या #1051822 के लिए सुझाव, शिकायत या राय भेजें.

क्रॉस-ऑरिजिन एम्बेडर नीति (सीओईपी) की डीबगिंग

नेटवर्क पैनल में अब क्रॉस-ऑरिजिन एम्बेडर नीति की डीबगिंग की जानकारी मिलती है.

स्टेटस कॉलम में अब यह जानकारी तुरंत मिलती है कि किसी अनुरोध को ब्लॉक क्यों किया गया. साथ ही, उस अनुरोध के हेडर देखने के लिए लिंक भी मिलता है, ताकि उसे डीबग किया जा सके:

स्टेटस कॉलम में ब्लॉक किए गए अनुरोध

हेडर टैब के रिस्पॉन्स हेडर सेक्शन में, समस्याओं को हल करने के बारे में ज़्यादा जानकारी मिलती है:

रिस्पॉन्स हेडर सेक्शन में ज़्यादा जानकारी

Chromium की समस्या #1051466 के लिए सुझाव, शिकायत या राय भेजें.

ब्रेकपॉइंट, शर्त के हिसाब से ब्रेकपॉइंट, और लॉगपॉइंट के लिए नए आइकॉन

सोर्स पैनल में, ब्रेकपॉइंट, कंडीशनल ब्रेकपॉइंट, और लॉगपॉइंट के लिए नए आइकॉन हैं:

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

Chromium की समस्या #1041830 के लिए सुझाव, शिकायत या राय भेजें.

नेटवर्क पैनल में नए cookie-path फ़िल्टर कीवर्ड का इस्तेमाल करके, उन नेटवर्क अनुरोधों पर फ़ोकस करें जो कोई खास कुकी पाथ सेट करते हैं.

cookie-path जैसे ज़्यादा खास कीवर्ड खोजने के लिए, प्रॉपर्टी के हिसाब से अनुरोध फ़िल्टर करें लेख पढ़ें.

कमांड मेन्यू से बाईं ओर डॉक करें

कमांड मेन्यू खोलें और Dock to left कमांड चलाकर, DevTools को अपने व्यूपोर्ट की बाईं ओर ले जाएं.

DevTools को व्यूपोर्ट की बाईं ओर डॉक किया गया है

Chromium की समस्या #1011679 के लिए सुझाव, शिकायत या राय भेजें.

मुख्य मेन्यू में Settings विकल्प की जगह बदल गई है

मुख्य मेन्यू से सेटिंग खोलने का विकल्प, अब ज़्यादा टूल में दिखेगा.

'सेटिंग' पर फ़ोकस किया गया 'ज़्यादा टूल' वाला 'मुख्य मेन्यू'

Chromium की समस्या #1050855 के लिए सुझाव, शिकायत या राय भेजें.

ऑडिट पैनल अब Lighthouse पैनल है

DevTools और Lighthouse की टीमों को वेब डेवलपर से अक्सर यह सुझाव मिलता था कि DevTools से Lighthouse को चलाया जा सकता है. हालांकि, जब वे इसे आज़माते थे, तो उन्हें "Lighthouse" पैनल नहीं मिलता था. इसलिए, ऑडिट पैनल को अब Lighthouse पैनल कहा जाता है.

लाइटहाउस पैनल

किसी फ़ोल्डर में मौजूद सभी लोकल बदलाव मिटाना

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

सभी बदलाव मिटाना

Chromium की समस्या #1016501 के लिए सुझाव, शिकायत या राय भेजें.

ज़्यादा समय लेने वाले टास्क के लिए अपडेट किया गया यूज़र इंटरफ़ेस (यूआई)

लंबे समय तक चलने वाला टास्क, JavaScript कोड होता है. यह मुख्य थ्रेड पर लंबे समय तक कब्जा करता है. इसकी वजह से, वेब पेज फ़्रीज़ हो जाता है.

परफ़ॉर्मेंस पैनल में लंबे टास्क को विज़ुअलाइज़ करने की सुविधा, पिछले कुछ समय से उपलब्ध है. हालांकि, Chrome 83 में परफ़ॉर्मेंस पैनल में लंबे टास्क को विज़ुअलाइज़ करने वाले यूज़र इंटरफ़ेस (यूआई) को अपडेट किया गया है. टास्क के लंबे हिस्से को अब लाल रंग के स्ट्रिप वाले बैकग्राउंड से रंगा गया है.

ज़्यादा समय तक चलने वाले टास्क का नया यूज़र इंटरफ़ेस

Chromium की समस्या #1054447 के लिए सुझाव, शिकायत या राय भेजें.

मेनिफ़ेस्ट पैनल में, मास्क किए जा सकने वाले आइकॉन के लिए सहायता

Android Oreo में, ऐडैप्टिव आइकॉन की सुविधा लॉन्च की गई थी. यह सुविधा, अलग-अलग डिवाइस मॉडल पर ऐप्लिकेशन के आइकॉन को अलग-अलग आकार में दिखाती है. मास्क किए जा सकने वाले आइकॉन, आइकॉन का एक नया फ़ॉर्मैट है. यह अडैप्टिव आइकॉन के साथ काम करता है. इससे यह पक्का किया जा सकता है कि आपके PWA आइकॉन, उन डिवाइसों पर अच्छे दिखें जो मास्क किए जा सकने वाले आइकॉन के स्टैंडर्ड के साथ काम करते हैं.

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

'मास्केबल आइकॉन के लिए, कम से कम ज़रूरी जगह दिखाएं' चेकबॉक्स

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

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

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

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

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

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