रेगुलर एक्सप्रेशन के अलावा: Chrome DevTools में सीएसएस वैल्यू पार्स करने की सुविधा को बेहतर बनाना

Philip Pfaffe

Ergün Erdogmus

ध्यान दें: क्या आपको DevTools को बेहतर बनाने में मदद करनी है? Google के उपयोगकर्ताओं पर होने वाली रिसर्च में हिस्सा लेने के लिए, यहां साइन अप करें.

क्या आपने हाल ही में Chrome DevTools के स्टाइल टैब में, सीएसएस प्रॉपर्टी को थोड़ा बेहतर दिखते हुए देखा है? ये अपडेट, Chrome 121 और 128 के बीच रोल आउट किए गए थे. ये अपडेट, सीएसएस वैल्यू को पार्स और दिखाने के तरीके में हुए अहम सुधार की वजह से हुए हैं. इस लेख में, हम आपको इस बदलाव की तकनीकी जानकारी देंगे. इसमें, रेगुलर एक्सप्रेशन मैचिंग सिस्टम से ज़्यादा बेहतर पार्स करने वाले सिस्टम पर जाने के बारे में बताया गया है.

आइए, मौजूदा DevTools की तुलना पिछले वर्शन से करें:

इसमें काफ़ी फ़र्क़ है, है न? यहां मुख्य सुधारों के बारे में जानकारी दी गई है:

• color-mix. color-mix फ़ंक्शन में दो रंग के आर्ग्युमेंट को विज़ुअल तौर पर दिखाने वाली आसान झलक.
• pink. नाम वाले रंग pink के लिए, क्लिक की जा सकने वाली रंग की झलक. आसानी से बदलाव करने के लिए, कलर पिकर खोलने के लिए इस पर क्लिक करें.
• var(--undefined, [fallback value]). बिना वैल्यू वाले वैरिएबल को बेहतर तरीके से मैनेज किया जा सकता है. इसके लिए, बिना वैल्यू वाले वैरिएबल को धूसर किया जाता है. साथ ही, चालू फ़ॉलबैक वैल्यू (इस मामले में, एचएसएल रंग) को क्लिक किए जा सकने वाले रंग की झलक के साथ दिखाया जाता है.
• hsl(…): hsl कलर फ़ंक्शन के लिए, क्लिक किए जा सकने वाले कलर की एक और झलक. इससे कलर पिकर को तुरंत ऐक्सेस किया जा सकता है.
• 177deg: क्लिक की जा सकने वाली ऐंगल क्लॉक, जिसकी मदद से ऐंगल की वैल्यू को इंटरैक्टिव तरीके से खींचकर और उसमें बदलाव करके सेट किया जा सकता है.
• var(--saturation, …): कस्टम प्रॉपर्टी की परिभाषा का क्लिक किया जा सकने वाला लिंक, जिससे काम के एलान पर आसानी से पहुंचा जा सकता है.

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

क्या ये झलक पहले से उपलब्ध नहीं थीं?

ये झलक वाले आइकॉन आपको भले ही पहचाने-पहचाने लगें, लेकिन ये हमेशा एक जैसे नहीं दिखते. खास तौर पर, ऊपर दिए गए उदाहरण जैसे जटिल सीएसएस सिंटैक्स में. जिन मामलों में ये टूल काम करते थे वहां भी उन्हें सही तरीके से काम कराने के लिए, अक्सर ज़्यादा मेहनत करनी पड़ती थी.

इसकी वजह यह है कि DevTools के शुरुआती दिनों से ही, वैल्यू का विश्लेषण करने वाला सिस्टम ऑर्गैनिक तरीके से बेहतर हो रहा है. हालांकि, यह CSS से मिलने वाली नई सुविधाओं और भाषा की जटिलता में हुई बढ़ोतरी के साथ नहीं चल पा रहा है. समय के साथ बदलावों को ध्यान में रखते हुए, सिस्टम को पूरी तरह से फिर से डिज़ाइन करना ज़रूरी था. हमने ऐसा ही किया है!

सीएसएस प्रॉपर्टी वैल्यू को कैसे प्रोसेस किया जाता है

DevTools में, स्टाइल टैब में प्रॉपर्टी के एलान को रेंडर करने और उन्हें सजाने की प्रोसेस को दो अलग-अलग चरणों में बांटा गया है:

1. स्ट्रक्चरल ऐनलिसिस. इस शुरुआती चरण में, प्रॉपर्टी के एलान को अलग-अलग हिस्सों में बांटा जाता है, ताकि उसके कॉम्पोनेंट और उनके बीच के संबंधों की पहचान की जा सके. उदाहरण के लिए, border: 1px solid red एलान में, 1px को लंबाई, solid को स्ट्रिंग, और red को रंग के तौर पर पहचाना जाएगा.
2. रेंडर हो रहा है. स्ट्रक्चरल विश्लेषण के आधार पर, रेंडरिंग के चरण में इन कॉम्पोनेंट को एचटीएमएल में बदल दिया जाता है. इससे, प्रॉपर्टी के टेक्स्ट को इंटरैक्टिव एलिमेंट और विज़ुअल के साथ बेहतर बनाया जा सकता है. उदाहरण के लिए, रंग की वैल्यू red को क्लिक किए जा सकने वाले रंग आइकॉन के साथ रेंडर किया जाता है. इस आइकॉन पर क्लिक करने पर, आसानी से बदलाव करने के लिए कलर पिकर दिखता है.

रेगुलर एक्सप्रेशन

पहले, हम स्ट्रक्चरल विश्लेषण के लिए प्रॉपर्टी वैल्यू का विश्लेषण करने के लिए, रेगुलर एक्सप्रेशन (रेगुलर एक्सप्रेशन) का इस्तेमाल करते थे. हमने रेगुलर एक्सप्रेशन की एक सूची बनाई है, ताकि प्रॉपर्टी की उन वैल्यू से मैच किया जा सके जिन्हें हमने डेकोरेट करने के लिए चुना है. उदाहरण के लिए, ऐसे एक्सप्रेशन थे जो सीएसएस के रंगों, लंबाई, ऐंगल, और var फ़ंक्शन कॉल जैसी ज़्यादा जटिल सब-एक्सप्रेशन से मेल खाते थे. वैल्यू का विश्लेषण करने के लिए, हमने टेक्स्ट को बाएं से दाएं स्कैन किया. साथ ही, सूची में से वह पहला एक्सप्रेशन खोजा जो टेक्स्ट के अगले हिस्से से मैच करता हो.

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

मैच करना color-mix()

color-mix() फ़ंक्शन के लिए इस्तेमाल किया गया रेगुलर एक्सप्रेशन यह था:

/color-mix\(.*,\s*(?<firstColor>.+)\s*,\s*(?<secondColor>.+)\s*\)/g

जो इसके सिंटैक्स से मेल खाता हो:

color-mix(<color-interpolation-method>, [<color> && <percentage [0,100]>?]#{2})

मैच को विज़ुअलाइज़ करने के लिए, नीचे दिया गया उदाहरण चलाकर देखें.

const re = /color-mix\(.*,\s*(?<firstColor>.+)\s*,\s*(?<secondColor>.+)\s*\)/g;

// it works - simpler example
const simpler = re.exec('color-mix(in srgb, pink, hsl(127deg 100% 50%))');
console.table(simpler.groups);

re.exec('');

// it doesn't work - complex example
const complex = re.exec('color-mix(in srgb, pink, var(--undefined, hsl(127deg var(--saturation, 100%) 50%)))');
console.table(complex.groups);

आसान उदाहरण ठीक से काम करता है. हालांकि, ज़्यादा जटिल उदाहरण में, <firstColor> मैच hsl(177deg var(--saturation है और <secondColor> मैच 100%) 50%)) है, जो पूरी तरह से बेमतलब है.

हमें पता था कि यह समस्या है. आखिरकार, सीएसएस एक सामान्य भाषा नहीं है. इसलिए, हमने var फ़ंक्शन जैसे ज़्यादा जटिल फ़ंक्शन आर्ग्युमेंट को हैंडल करने के लिए, पहले से ही खास हैंडल शामिल किया है. हालांकि, जैसा कि पहले स्क्रीनशॉट में देखा जा सकता है, यह सुविधा सभी मामलों में काम नहीं करती.

मैच करना tan()

शिकायत किए गए सबसे मज़ेदार गड़बड़ियों में से एक, त्रिकोणमितीय tan() फ़ंक्शन से जुड़ी थी . रंगों से मैच करने के लिए इस्तेमाल किए जा रहे रेगुलर एक्सप्रेशन में, नाम वाले रंगों से मैच करने के लिए एक सब-एक्सप्रेशन \b[a-zA-Z]+\b(?!-) शामिल था. जैसे, red कीवर्ड. इसके बाद, हमने यह जांच की कि मैच होने वाला हिस्सा, रंग का नाम है या नहीं. अंदाज़ा लगाइए, tan भी रंग का नाम है! इसलिए, हमने tan() एक्सप्रेशन को रंगों के तौर पर गलत तरीके से समझा.

मैच करना var()

आइए, एक और उदाहरण देखें. इसमें var() फ़ंक्शन के साथ फ़ॉलबैक दिया गया है, जिसमें अन्य var() रेफ़रंस शामिल हैं: var(--non-existent, var(--margin-vertical)).

var() के लिए हमारा रेगुलर एक्सप्रेशन, इस वैल्यू से मैच करेगा. हालांकि, यह पहले ब्रैकेट के बंद होने पर मैच करना बंद कर देगा. इसलिए, ऊपर दिया गया टेक्स्ट var(--non-existent, var(--margin-vertical) के तौर पर मैच होता है. यह रेगुलर एक्सप्रेशन से मैच करने की एक बुक की सीमा है. जिन भाषाओं में ब्रैकेट मैच करने की ज़रूरत होती है वे मूल रूप से रेगुलर नहीं होती हैं.

सीएसएस पार्स करने वाले टूल पर ट्रांज़िशन करना

रेगुलर एक्सप्रेशन का इस्तेमाल करके टेक्स्ट का विश्लेषण करने की सुविधा तब काम नहीं करती, जब विश्लेषण की गई भाषा रेगुलर न हो. ऐसे में, अगला कदम यह है: बेहतर टाइप के व्याकरण के लिए पार्स करने वाले टूल का इस्तेमाल करें. सीएसएस के लिए, इसका मतलब कॉन्टेक्स्ट-फ़्री भाषाओं के लिए पार्स करने वाले टूल से है. असल में, DevTools के कोडबेस में पहले से ही ऐसा पार्स करने वाला सिस्टम मौजूद था: CodeMirror का Lezer. यह CodeMirror में सिंटैक्स हाइलाइट करने की सुविधा का आधार है. CodeMirror, सोर्स पैनल में मौजूद एडिटर है. Lezer के सीएसएस पार्सर की मदद से, हम सीएसएस नियमों के लिए सिंटैक्स ट्री (ऐबस्ट्रैक्ट नहीं) बना सकते हैं. यह पार्सर, इस्तेमाल के लिए तैयार था. जीत का निशान.

हालांकि, हमें रेगुलर एक्सप्रेशन पर आधारित मैचिंग से पार्सर पर आधारित मैचिंग पर सीधे तौर पर माइग्रेट करने में समस्या आ रही थी. ऐसा इसलिए, क्योंकि ये दोनों तरीके एक-दूसरे के उलट काम करते हैं. रेगुलर एक्सप्रेशन के साथ वैल्यू के हिस्सों को मैच करते समय, DevTools इनपुट को बाएं से दाएं स्कैन करेगा. साथ ही, पैटर्न की क्रम से लगाई गई सूची में से सबसे पहले मैच करने वाली वैल्यू को बार-बार ढूंढने की कोशिश करेगा. सिंटैक्स ट्री की मदद से, मैचिंग नीचे से ऊपर की ओर शुरू होगी. उदाहरण के लिए, फ़ंक्शन कॉल से मैच करने की कोशिश करने से पहले, पहले कॉल के आर्ग्युमेंट का विश्लेषण किया जाएगा. इसे अंकगणितीय एक्सप्रेशन के आकलन के तौर पर देखें. इसमें सबसे पहले ब्रैकेट वाले एक्सप्रेशन, फिर गुणा करने वाले ऑपरेटर, और फिर जोड़ने वाले ऑपरेटर का इस्तेमाल किया जाता है. इस फ़्रेमिंग में, रेगुलर एक्सप्रेशन पर आधारित मैचिंग, बाईं से दाईं ओर अंकगणितीय एक्सप्रेशन का आकलन करने से जुड़ी होती है. हम मैच करने वाले पूरे सिस्टम को फिर से लिखना नहीं चाहते थे: इसमें 15 अलग-अलग मैचर और रेंडरर पेयर थे, जिनमें कोड की हज़ारों लाइनें थीं. इस वजह से, यह संभावना नहीं थी कि हम इसे एक ही माइलस्टोन में शिप कर पाएं.

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

पहला चरण: बॉटम-अप मैचिंग

पहले चरण में, कवर पर बताए गए काम ही किए जाते हैं. हम ट्री को नीचे से ऊपर की ओर ट्रैवर्स करते हैं और हर सिंटैक्स ट्री नोड पर सब-एक्सप्रेशन को मैच करने की कोशिश करते हैं. किसी खास सब-एक्सप्रेशन से मैच करने के लिए, मैचर मौजूदा सिस्टम की तरह ही रेगुलर एक्सप्रेशन का इस्तेमाल कर सकता है. हालांकि, 128 वर्शन में हम अब भी कुछ मामलों में ऐसा करते हैं. जैसे, लंबाई मैच करने के लिए. इसके अलावा, मैचर मौजूदा नोड पर रूट किए गए सबट्री के स्ट्रक्चर का विश्लेषण कर सकता है. इससे, सिंटैक्स की गड़बड़ियों का पता चलता है और स्ट्रक्चर की जानकारी रिकॉर्ड की जाती है.

ऊपर दिए गए सिंटैक्स ट्री के उदाहरण पर ध्यान दें:

इस ट्री के लिए, मैच करने वाले टूल इस क्रम में लागू होंगे:

1. hsl(177degvar(--saturation, 100%) 50%): सबसे पहले, हम hsl फ़ंक्शन कॉल का पहला आर्ग्युमेंट, ह्यू ऐंगल ढूंढते हैं. हम इसे ऐंगल मैचर से मैच करते हैं, ताकि हम ऐंगल वैल्यू को ऐंगल आइकॉन से सजा सकें.
2. hsl(177degvar(--saturation, 100%)50%): दूसरा, हम var मैचर की मदद से var फ़ंक्शन कॉल का पता लगाते हैं. ऐसे कॉल के लिए, हम मुख्य रूप से दो काम करना चाहते हैं:
   • वैरिएबल का एलान देखें और उसकी वैल्यू का हिसाब लगाएं. साथ ही, वैरिएबल के नाम से कनेक्ट करने के लिए, उसमें लिंक और पॉपओवर जोड़ें.
   • अगर कैलकुलेट की गई वैल्यू कोई रंग है, तो कॉल को कलर आइकॉन से सजाएं. असल में, एक तीसरा विकल्प भी है, लेकिन हम इस बारे में बाद में बात करेंगे.
3. hsl(177deg var(--saturation, 100%) 50%): आखिर में, हम hsl फ़ंक्शन के कॉल एक्सप्रेशन को मैच करते हैं, ताकि हम उसे कलर आइकॉन से सजा सकें.

हम उन सब-एक्सप्रेशन को खोजने के साथ-साथ उन्हें सजाना भी चाहते हैं. इसके अलावा, हम मैच करने की प्रोसेस के तहत एक दूसरी सुविधा भी चला रहे हैं. ध्यान दें कि दूसरे चरण में हमने कहा था कि हम किसी वैरिएबल के नाम के लिए, कैलकुलेट की गई वैल्यू देखेंगे. हम एक कदम आगे बढ़कर, नतीजों को ट्री में ऊपर तक भेजते हैं. यह सिर्फ़ वैरिएबल के लिए ही नहीं, बल्कि फ़ॉलबैक वैल्यू के लिए भी है! यह पक्का है कि var फ़ंक्शन नोड पर जाने से पहले, उसके चाइल्ड नोड पर जाया जा चुका है. इसलिए, हमें पहले से ही उन सभी var फ़ंक्शन के नतीजे पता होते हैं जो फ़ॉलबैक वैल्यू में दिख सकते हैं. इसलिए, हम var फ़ंक्शन के नतीजों को आसानी से और कम लागत में, फ़्लाइट पर बदल सकते हैं. इससे, "क्या इस var कॉल का नतीजा कोई रंग है?" जैसे सवालों के जवाब आसानी से मिल जाते हैं, जैसा कि हमने दूसरे चरण में किया था.

दूसरा चरण: टॉप-डाउन रेंडरिंग

दूसरे चरण के लिए, हम दिशा बदल देते हैं. पहले चरण में मैच के नतीजों को लेकर, हम ट्री को ऊपर से नीचे की ओर क्रम से ट्रैवर्स करके, उसे एचटीएमएल में रेंडर करते हैं. विज़िट किए गए हर नोड के लिए, हम यह जांच करते हैं कि वह मेल खाता है या नहीं. अगर मेल खाता है, तो हम मैचर के उससे जुड़े रेंडरर को कॉल करते हैं. हम टेक्स्ट नोड के लिए डिफ़ॉल्ट मैचर और रेंडरर को शामिल करके, सिर्फ़ टेक्स्ट वाले नोड (जैसे, NumberLiteral "50%") के लिए खास तरीके से मैनेज करने की ज़रूरत को कम करते हैं. रेंडरर सिर्फ़ एचटीएमएल नोड दिखाते हैं. इन्हें एक साथ जोड़ने पर, प्रॉपर्टी वैल्यू और उसके डेकोरेशन का रेप्रज़ेंटेशन मिलता है.

उदाहरण के तौर पर दिए गए ट्री में, प्रॉपर्टी वैल्यू इस क्रम में रेंडर की जाती है:

1. hsl फ़ंक्शन कॉल पर जाएं. यह मैच हो गया है, इसलिए कलर फ़ंक्शन रेंडरर को कॉल करें. यह दो काम करता है:
   • किसी भी var आर्ग्युमेंट के लिए, ऑन-द-फ़्लाई बदलाव करने की सुविधा का इस्तेमाल करके, कलर की असल वैल्यू का हिसाब लगाता है. इसके बाद, कलर आइकॉन बनाता है.
   • CallExpression के बच्चों को बार-बार रेंडर करता है. इससे फ़ंक्शन के नाम, ब्रैकेट, और कॉमा को अपने-आप रेंडर किया जाता है. ये सिर्फ़ टेक्स्ट होते हैं.
2. hsl कॉल के पहले आर्ग्युमेंट पर जाएं. यह मैच हो गया है, इसलिए ऐंगल रेंडरर को कॉल करें. यह ऐंगल आइकॉन और ऐंगल का टेक्स्ट बनाता है.
3. दूसरे आर्ग्युमेंट पर जाएं, जो var कॉल है. यह मैच हो गया, इसलिए वैरिएबल रेंडरर को कॉल करें. इससे यह आउटपुट मिलता है:
   • शुरुआत में टेक्स्ट var(.
   • वैरिएबल का नाम और उसे वैरिएबल की परिभाषा के लिंक या स्लेटी रंग के टेक्स्ट से सजाता है, ताकि यह पता चल सके कि वैरिएबल की वैल्यू तय नहीं की गई है. साथ ही, यह वैरिएबल की वैल्यू के बारे में जानकारी दिखाने के लिए, उसमें पॉपओवर भी जोड़ता है.
   • इसके बाद, कॉमा और फिर फ़ॉलबैक वैल्यू को बार-बार रेंडर किया जाता है.
   • क्लोज़ ब्रैकेट.
4. hsl कॉल के आखिरी आर्ग्युमेंट पर जाएं. यह मैच नहीं हुआ, इसलिए सिर्फ़ इसका टेक्स्ट कॉन्टेंट दिखाएं.

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

रेंडरर की एक और शानदार सुविधा यह है कि यह मैच किए गए नोड के चाइल्ड के रेंडरिंग को कंट्रोल करता है. इससे, हमें जो आइकॉन जोड़े जा रहे हैं उनके बीच की डिपेंडेंसी के बारे में जानने में मदद मिलती है. ऊपर दिए गए उदाहरण में, hsl फ़ंक्शन से मिलने वाला रंग, उसकी ह्यू वैल्यू पर निर्भर करता है. इसका मतलब है कि कलर आइकॉन से दिखाया गया रंग, ऐंगल आइकॉन से दिखाए गए ऐंगल पर निर्भर करता है. अगर उपयोगकर्ता उस आइकॉन की मदद से ऐंगल एडिटर खोलता है और ऐंगल में बदलाव करता है, तो अब हम कलर आइकॉन का रंग रीयल टाइम में अपडेट कर सकते हैं:

ऊपर दिए गए उदाहरण में देखा जा सकता है कि हम इस तरीके का इस्तेमाल, आइकॉन के दूसरे पेयर के लिए भी करते हैं. जैसे, color-mix() और उसके दो कलर चैनल या var फ़ंक्शन, जो फ़ॉलबैक से रंग दिखाते हैं.

परफ़ॉर्मेंस पर असर

भरोसे को बेहतर बनाने और लंबे समय से चल रही समस्याओं को ठीक करने के लिए, इस समस्या की जांच करते समय हमें परफ़ॉर्मेंस में कुछ गिरावट दिखने की उम्मीद थी. इसकी वजह यह थी कि हमने पूरी तरह से काम करने वाला पार्स करने वाला टूल इस्तेमाल करना शुरू किया था. इसकी जांच करने के लिए, हमने एक मानदंड बनाया है, जो करीब 3.5 हज़ार प्रॉपर्टी एलान को रेंडर करता है. साथ ही, M1 मशीन पर छह गुना थ्रॉटलिंग के साथ, रेगुलर एक्सप्रेशन पर आधारित और पार्स करने वाले, दोनों वर्शन की प्रोफ़ाइल बनाता है.

जैसा कि हमने अनुमान लगाया था, उस मामले के लिए पार्सिंग पर आधारित तरीका, रेगुलर एक्सप्रेशन पर आधारित तरीके से 27% धीमा था. रेगुलर एक्सप्रेशन पर आधारित तरीके को रेंडर होने में 11 सेकंड लगे, जबकि पार्सर पर आधारित तरीके को रेंडर होने में 15 सेकंड लगे.

नए तरीके से हमें जो फ़ायदे मिले हैं उन्हें ध्यान में रखते हुए, हमने इसे आगे बढ़ाने का फ़ैसला लिया है.

आभार

इस पोस्ट में बदलाव करने में हमारी मदद करने के लिए, सोफ़िया एमिलियानोवा और जेसलीन येन का बहुत-बहुत धन्यवाद!

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

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

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

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

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