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

Kayce Basques

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

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

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

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

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

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

DevTools में बेहतरीन सिम्युलेशन के लिए डिज़ाइन करने से, आपके वेब ऐप्लिकेशन असल में यह उन लोगों को भी ठीक लगता है जिन्हें लाल-हरे रंग की पहचान से जुड़ी समस्या (प्रोटनॉमली), ड्यूटरनॉमली (ड्यूटरनॉमली), ट्राईटैनॉमली (ट्राई-नॉमली), और एक्रोटोमली (एक्रोमटॉली) वाली समस्या है.

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

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

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

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

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

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

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

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

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

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

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

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

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

• ब्रेकपॉइंट जिन्हें लाल रंग के सर्कल से दिखाया गया है.
• शर्त के साथ ब्रेकपॉइंट जिन्हें आधा लाल आधे सफ़ेद रंग के सर्कल से दिखाया जाता है.
• लॉगपॉइंट को कंसोल आइकॉन के साथ लाल रंग के सर्कल से दिखाया जाता है.

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

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

कोई खास कुकी पाथ सेट करने वाले नेटवर्क अनुरोध देखना

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

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

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

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

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 में नया क्या है सीरीज़ में शामिल की गई सभी चीज़ों की सूची.