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

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

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

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

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

• प्रोटानोपिया: लाल रंग की रोशनी को न देख पाना.
• ड्यूटरनोपिया: इसमें व्यक्ति को हरे रंग की लाइट नहीं दिखती.
• ट्राइटानोपिया: नीली रोशनी को न देख पाने की समस्या.
• अक्रोमैटोप्सिया: इसमें व्यक्ति को स्लेटी रंग के अलावा कोई और रंग नहीं दिखता. यह समस्या बहुत कम लोगों को होती है.

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

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

Chromium issue #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 के बारे में सुझाव, शिकायत या राय भेजें.

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

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

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

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

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

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

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

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

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

Chromium issue #1041830 पर सुझाव, शिकायत या राय भेजें.

नेटवर्क से जुड़े उन अनुरोधों को देखना जिन्होंने कुकी का कोई पाथ सेट किया है

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

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

कमांड मेन्यू में जाकर, बाईं ओर डॉक करें को चुनें

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

Chromium issue #1011679 पर सुझाव, शिकायत या राय भेजें.

मुख्य मेन्यू में मौजूद Settings विकल्प को दूसरी जगह भेज दिया गया है

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

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

ऑडिट पैनल का नाम बदलकर अब Lighthouse पैनल कर दिया गया है

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

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

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

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

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

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

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

Chromium issue #1054447 को सुझाव, शिकायत या राय भेजें.

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

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

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

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

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

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

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

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

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

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