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 दबाएं. आईड्रॉपर टूल सिर्फ़ उन रंगों के सैंपल लेता है जो एसआरजीबी कलर स्पेस में मौजूद होते हैं. उदाहरण के लिए, अगर color(display-p3 1 0 1) रंग को सैंपल के तौर पर इस्तेमाल करने की कोशिश की जाती है, जो कि एसआरजीबी कलर स्पेस से बाहर है, तो आईड्रॉपर टूल उस रंग को एसआरजीबी स्पेस में सबसे नज़दीकी रंग से क्लिप कर देगा, जो मजेंटा 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 ने ऐंग्युलर एचटीएमएल टेंप्लेट के लिए सिंटैक्स हाइलाइट करने की सुविधा को बेहतर बनाया है. इससे आपको कोड पढ़ने और उसके स्ट्रक्चर को पहचानने में आसानी होगी.

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

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

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

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

अन्य खास बातें

इस रिलीज़ में ध्यान देने लायक कुछ सुधार किए गए हैं:

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

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

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

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

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

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

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

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