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

Jecelyn Yeen

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

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

स्टाइल पैनल में अब 12 नए कलर स्पेस और 7 नए गैमट काम करते हैं. इनके बारे में सीएसएस कलर लेवल 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

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

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

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

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

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

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

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

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

Recorder के शॉर्टकट को पसंद के मुताबिक बनाने की सुविधा

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

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

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

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

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

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

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

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

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

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

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

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

अन्य हाइलाइट

इस रिलीज़ में, इन समस्याओं को ठीक किया गया है:

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

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

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

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

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

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

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

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