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

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

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

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

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

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 आइकॉन, मास्क किए जा सकने वाले आइकॉन के स्टैंडर्ड के साथ काम करने वाले डिवाइसों पर अच्छा दिखे.

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

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

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

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

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

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

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

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