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

Kayce Basques
Kayce Basques

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

रेंडरिंग टैब खोलें और देखने की कमियों को हाइलाइट करें की नई सुविधा का इस्तेमाल करें. इससे, आपको इस बारे में बेहतर जानकारी मिलेगी कि दृष्टि की अलग-अलग तरह की समस्याओं से जूझ रहे लोगों को आपकी साइट पर कैसा अनुभव मिलता है.

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

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

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

  • प्रोटेनोपिया: लाल रंग की किसी भी रोशनी को ठीक से समझ न पाना.
  • ड्यूटरनोपिया: किसी भी हरी रोशनी को ठीक से न समझ पाना.
  • ट्रिटैनोपिया: किसी भी नीली रोशनी को ठीक से न समझ पाना.
  • एक्रोमटॉप्सिया: धूसर रंग के रंगों को छोड़कर किसी भी रंग को ठीक से समझ न पाना (बहुत कम).

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

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

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

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

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

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

इसे आज़माने के लिए, Locale - डिपेंडेंट कोड का उदाहरण देखें.

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

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

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

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

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

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

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

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

ब्रेकपॉइंट, कंडिशनल ब्रेकपॉइंट, और लॉगपॉइंट के लिए नए आइकॉन

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

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

Chromium से जुड़ी समस्या #1041830 पर सुझाव/राय भेजें या शिकायत करें.

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

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

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

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

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

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

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

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

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

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

ऑडिट पैनल अब Lighthouse पैनल हो गया है

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

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

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

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

सभी बदलाव मिटाएं

Chromium से जुड़ी समस्या #1016501 पर सुझाव/राय भेजें या शिकायत करें.

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

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

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

नया लंबा टास्क यूज़र इंटरफ़ेस (यूआई)

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

मेनिफ़ेस्ट पैनल में, मास्क किए जा सकने वाले आइकॉन की सुविधा

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

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

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

झलक दिखाने वाले चैनलों को डाउनलोड करें

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

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

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

  • crbug.com के ज़रिए हमें कोई सुझाव या फ़ीडबैक सबमिट करें.
  • DevTools में ज़्यादा विकल्प   ज़्यादा दिखाएं   > सहायता > DevTools से जुड़ी समस्याओं की शिकायत करें का इस्तेमाल करके DevTools से जुड़ी समस्या की शिकायत करें.
  • @ChromeDevTools पर ट्वीट करें.
  • DevTools YouTube वीडियो या DevTools के बारे में सलाह YouTube वीडियो में नया क्या है, इस पर टिप्पणी करें.

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 को रद्द कर दिया गया था.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59