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

Jecelyn Yeen

स्टाइल पैनल की मदद से, एचडी कलर को डीबग करना

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

स्टाइल पैनल में अब 12 नए कलर स्पेस और सात नए गैमट काम करते हैं. इनके बारे में सीएसएस कलर लेवल 4 स्पेसिफ़िकेशन में बताया गया है. वेब पर उपलब्ध रंग के विकल्पों के बारे में पूरी जानकारी पाने के लिए, हाई डेफ़िनिशन सीएसएस कलर गाइड देखें.

यहां color(), lch(), oklab(), और color-mix() के साथ सीएसएस कलर डेफ़िनिशन के उदाहरण दिए गए हैं.

color-mix() फ़ंक्शन का इस्तेमाल करते समय, कंप्यूट किया गया पैनल में रंग का आखिरी आउटपुट देखा जा सकता है.

कलर पिकर, ज़्यादा सुविधाओं के साथ सभी नए कलर स्पेस के साथ काम करता है. उदाहरण के लिए, color(display-p3 1 0 1) के कलर स्वैच पर क्लिक करें. गैमट की सीमा वाली लाइन भी जोड़ी गई है. इससे, चुने गए रंग के गैमट को बेहतर तरीके से समझने के लिए, sRGB और display-p3 गैमट के बीच अंतर किया जा सकता है.

DevTools में, रंगों को एक फ़ॉर्मैट से दूसरे फ़ॉर्मैट में बदला जा सकता है. कन्वर्ज़न पॉप-अप को ऐक्सेस करने के लिए, रंग का फ़ॉर्मैट बदलें आइकॉन का इस्तेमाल करें. इसके अलावा, Shift का इस्तेमाल करके, स्टाइल पैनल में किसी कलर स्वैच पर क्लिक करें.

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

इसके अलावा, नए शॉर्टकट की मदद से, स्क्रीन से रंग चुने जा सकते हैं. ऐयर ड्रॉपर चालू करने के लिए, 'c' दबाएं और उसे बंद करने के लिए, Escape दबाएं. आईड्रॉपर टूल, सिर्फ़ sRGB कलर स्पेस में रंगों का सैंपल लेता है. उदाहरण के लिए, अगर sRGB कलर स्पेस से बाहर के रंग color(display-p3 1 0 1) का सैंपल लिया जाता है, तो ऐयरड्रॉपर टूल उस रंग को sRGB कलर स्पेस में मौजूद सबसे मिलते-जुलते रंग पर काट देगा. यह रंग मैजेंटा color(display-p3 0.92 0.2 0.97) है.

आखिर में, एचडी कलर फ़ॉर्मैट के लिए जगह बनाने के लिए, कलर फ़ॉर्मैट सेटिंग अब काम नहीं करती.

Chromium से जुड़ी समस्याएं: 1073895, 1395782, 1408777, 1395782, 1392717, 1382409, 1392054

बेहतर ब्रेकपॉइंट यूज़र एक्सपीरियंस (UX)

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

इनमें से कुछ हाइलाइट इस तरह हैं: - अपवाद के लिए, प्रोग्राम को रोकने के दोनों विकल्पों को ब्रेकपॉइंट पैनल में ले जाया गया है. साथ ही, उन्हें टेक्स्ट के साथ लेबल किया गया है, ताकि उन्हें समझना आसान हो.

• ब्रेकपॉइंट को फ़ाइल के हिसाब से ग्रुप किया जाता है. साथ ही, उन्हें लाइन या कॉलम नंबर के हिसाब से क्रम में लगाया जाता है. साथ ही, इन्हें छोटा भी किया जा सकता है.

• ब्रेकपॉइंट या फ़ाइल पर कर्सर घुमाने पर, उसे बंद करने, हटाने, और उसमें बदलाव करने के नए विकल्प मिलते हैं.

• ब्रेकपॉइंट एडिटर खोलने के लिए, 'ब्रेकपॉइंट में बदलाव करें' बटन पर क्लिक करें. यहां से, ब्रेकपॉइंट की शर्त डाली जा सकती है या लॉगपॉइंट पर स्विच किया जा सकता है.

DevTools की मदद से डीबग करने का तरीका जानने के लिए, JavaScript डीबग करने से जुड़ा रेफ़रंस देखें.

Chromium से जुड़ी समस्याएं: 1407586, 1402891, 1402893

रिकॉर्डर के लिए पसंद के मुताबिक शॉर्टकट

उपयोगकर्ता फ़्लो को तेज़ी से रिकॉर्ड और फिर से चलाने के लिए, कीबोर्ड शॉर्टकट का इस्तेमाल करें.

रिकॉर्डर में, उपयोगकर्ता फ़्लो को तेज़ी से रिकॉर्ड करने और फिर से चलाने के लिए, कीबोर्ड के कुछ आसान शॉर्टकट जोड़े गए हैं.

क्या आपको शॉर्टकट याद नहीं हैं? कोई बात नहीं, किसी भी समय सभी शॉर्टकट देखने के लिए, ? बटन पर क्लिक करें.

सेटिंग मेन्यू में जाकर, इन शॉर्टकट को अपनी पसंद के मुताबिक भी बनाया जा सकता है.

अगर किसी दूसरे पैनल में काम किया जा रहा है और आपको उपयोगकर्ता फ़्लो की रिकॉर्डिंग शुरू करनी है, तो DevTools में कमांड मेन्यू में जाकर, नई रिकॉर्डिंग बनाएं कमांड का इस्तेमाल करें.

Chromium से जुड़ी समस्या: 1339771

Angular के लिए बेहतर सिंटैक्स हाइलाइट

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

Chromium से जुड़ी समस्याएं: 1385374, 1385678

ऐप्लिकेशन पैनल में कैश मेमोरी को फिर से व्यवस्थित करना

कैश मेमोरी का स्टोरेज पैनल अब ऐप्लिकेशन पैनल के स्टोरेज सेक्शन में दिखेगा. वहीं, बैक/फ़ॉरवर्ड कैश मेमोरी पैनल को बैकग्राउंड सेवाएं सेक्शन में ले जाया गया है.

Chromium से जुड़ी समस्या: 1407166

अन्य हाइलाइट

इस रिलीज़ में, कुछ ऐसी समस्याएं ठीक की गई हैं जिन पर ध्यान देने की ज़रूरत है:

• DevTools को अपडेट किया गया है, ताकि सोर्समैप लोड करते समय कैश मेमोरी में सेव करने की सुविधा बंद करें सेटिंग का पालन किया जा सके. (1407084)
• एलिमेंट पैनल, अब खोज के नतीजों में मैच करने वाले पहले एलिमेंट पर अपने-आप फ़ोकस कर लेता है. (1381853)
• सोर्स मैप और ब्रेकपॉइंट की भरोसेमंदता को बेहतर बनाने के लिए, कई सुधार किए गए हैं. (508270, 1403362, 1403432, 1396298, 1395337, 1405134)
• डीबग करने की सुविधा को बेहतर बनाने के लिए, DevTools अब निजी क्लास के सदस्यों के साथ एक्सप्रेशन का आकलन करने की सुविधा देता है. (1381806)

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

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

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

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

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

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

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