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

Jecelyn Yeen

झलक देखने की सुविधा: परफ़ॉर्मेंस की अहम जानकारी देने वाला नया पैनल

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

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

परफ़ॉर्मेंस की अहम जानकारी देने वाला नया पैनल

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

सिलसिलेवार निर्देशों वाले ट्यूटोरियल की मदद से ज़्यादा जानने के लिए, परफ़ॉर्मेंस की अहम जानकारी पैनल के दस्तावेज़ पर जाएं.

यह झलक दिखाने की सुविधा है. इससे वेब डेवलपर (खास तौर पर, परफ़ॉर्मेंस विशेषज्ञ नहीं) को परफ़ॉर्मेंस से जुड़ी संभावित समस्याओं का पता लगाने और उन्हें ठीक करने में मदद मिलती है. हमारी टीम इस सुविधा पर लगातार काम कर रही है. इसे और बेहतर बनाने के लिए, हमें आपका सुझाव/राय चाहिए.

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

हल्के और गहरे रंग वाली थीम को इस्तेमाल करने के लिए नए शॉर्टकट

अब स्टाइल पैनल में मौजूद नए शॉर्टकट की मदद से, लाइट और डार्क थीम (सीएसएस मीडिया फ़ीचर prefers-color-scheme) को तेज़ी से एम्युलेट किया जा सकता है.

पहले, रेंडरिंग टैब में थीम को एमुलेट करने के लिए, ज़्यादा चरण पूरे करने पड़ते थे.

हल्के और गहरे रंग वाली थीम को इस्तेमाल करने के लिए नए शॉर्टकट

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

'नेटवर्क की झलक' टैब पर बेहतर सुरक्षा

DevTools अब नेटवर्क पैनल के झलक टैब में, कॉन्टेंट की सुरक्षा नीति (सीएसपी) लागू करता है.

उदाहरण के लिए, पहले स्क्रीनशॉट में एक ऐसा पेज दिखाया गया है जिसमें मिले-जुले कॉन्टेंट का इस्तेमाल किया गया है. पेज, सुरक्षित एचटीटीपीएस कनेक्शन पर लोड होता है, लेकिन स्टाइलशीट, असुरक्षित एचटीटीपी कनेक्शन पर लोड होती है.

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

'नेटवर्क की झलक' टैब पर सुरक्षा को बेहतर बनाना

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

ब्रेकपॉइंट पर फिर से लोड करने की सुविधा को बेहतर बनाया गया

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

उदाहरण के लिए, इस React डेमो में ReactDOM ब्रेकपॉइंट पर सेट करने और रीलोड करने के दौरान, स्क्रिप्ट अनलिमिटेड लूप में चली गई थी. इनफ़ाइनाइट लूप की वजह से, सोर्स पैनल काम नहीं कर रहा है.

JavaScript को लगातार चलाने से, डेवलपर को बहुत परेशानी हो रही है. साथ ही, रेंडरर काम नहीं कर सकता. इस बदलाव से, Firefox जैसे अन्य ब्राउज़र के साथ डीबग करने के तरीके में बदलाव होता है.

ब्रेकपॉइंट पर फिर से लोड करने की सुविधा को बेहतर बनाया गया

Chromium से जुड़ी समस्याएं: 1014415, 1004038, 1112863, 1134899

Console से जुड़े अपडेट

कंसोल में स्क्रिप्ट को चलाने से जुड़ी गड़बड़ियों को मैनेज करना

Console में स्क्रिप्ट की जांच के दौरान होने वाली गड़बड़ियां, अब सही गड़बड़ी वाले इवेंट जनरेट करती हैं. ये इवेंट, window.onerror हैंडलर को ट्रिगर करते हैं और उन्हें विंडो ऑब्जेक्ट पर "error" इवेंट के तौर पर भेजा जाता है.

कंसोल में स्क्रिप्ट को चलाने से जुड़ी गड़बड़ियों को मैनेज करना

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

Enter दबाकर लाइव एक्सप्रेशन को लागू करना

लाइव एक्सप्रेशन टाइप करने के बाद, उसे लागू करने के लिए Enter पर क्लिक करें. पहले, Enter दबाने पर नई लाइनें जुड़ जाती थीं. यह DevTools के दूसरे हिस्सों से मेल नहीं खाता.

लाइव एक्सप्रेशन एडिटर में नई लाइन जोड़ने के लिए, Shift + Enter का इस्तेमाल करें.

Enter दबाकर लाइव एक्सप्रेशन लागू करना

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

उपयोगकर्ता फ़्लो की रिकॉर्डिंग शुरू होने पर उसे रद्द करना

उपयोगकर्ता फ़्लो रिकॉर्डिंग शुरू करने के दौरान, रिकॉर्डिंग को रद्द किया जा सकता है. पहले, रिकॉर्डिंग रद्द करने का विकल्प नहीं था.

उपयोगकर्ता फ़्लो की रिकॉर्डिंग शुरू होने पर उसे रद्द करना

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

स्टाइल पैनल में, इनहेरिट किए गए हाइलाइट वाले स्यूडो-एलिमेंट दिखाना

स्टाइल पैनल में, इनहेरिट किए गए हाइलाइट के स्यूडो-एलिमेंट (जैसे, ::selection, ::spelling-error, ::grammar-error, और ::highlight) देखें. पहले, ये नियम नहीं दिखाए जाते थे.

स्पेसिफ़िकेशन में बताया गया है कि जब एक से ज़्यादा स्टाइल एक-दूसरे से मेल खाते हैं, तो कैस्केड से यह तय होता है कि कौनसा स्टाइल लागू होगा. इस नई सुविधा से, आपको नियमों के इनहेरिटेंस और प्राथमिकता को समझने में मदद मिलती है.

स्टाइल पैनल में, इनहेरिट किए गए हाइलाइट वाले स्यूडो-एलिमेंट दिखाना

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

अन्य हाइलाइट

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

  • प्रॉपर्टी पैनल में, अब डिफ़ॉल्ट रूप से वैल्यू के साथ ऐक्सेस करने वाली प्रॉपर्टी दिखती हैं. इसे पहले गलती से छिपा दिया गया था. (1309087)
  • स्टाइल पैनल में, अब बदले गए @support नियमों को सही तरीके से स्ट्राइकथ्रू के तौर पर दिखाया जाता है. पहले, नियमों को स्ट्राइकथ्रू नहीं किया जाता था. (1298025)
  • सोर्स पैनल में, सीएसएस फ़ॉर्मैटिंग लॉजिक को ठीक किया गया. इसकी वजह से, सीएसएस में बदलाव करते समय कई खाली लाइनें दिखती थीं. (1309588)
  • कंसोल में किसी ऑब्जेक्ट के बार-बार बड़ा करें विकल्प को ज़्यादा से ज़्यादा 100 तक सीमित करें, ताकि यह सर्कुलर ऑब्जेक्ट के लिए हमेशा चालू न रहे. (1272450)

[प्रयोग के तौर पर उपलब्ध] सीएसएस में किए गए बदलावों को कॉपी करना

इस एक्सपेरिमेंट की मदद से, स्टाइल पैनल, सीएसएस में किए गए बदलावों को हरे रंग में हाइलाइट करता है. बदले गए नियमों पर कर्सर घुमाकर, उन्हें कॉपी करने के लिए उनके बगल में मौजूद 'कॉपी करें' बटन पर क्लिक करें.

इसके अलावा, किसी भी नियम पर दायां क्लिक करके और सीएसएस में हुए सभी बदलावों को कॉपी करें को चुनकर, सभी एलान में सीएसएस में हुए सभी बदलावों को कॉपी किया जा सकता है.

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

सीएसएस में किए गए बदलावों को कॉपी करना

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

[प्रयोग के तौर पर उपलब्ध] ब्राउज़र के बाहर रंग चुनना

कलर पिकर की मदद से, ब्राउज़र के बाहर कोई रंग चुनने के लिए, इस एक्सपेरिमेंट को चालू करें. पहले, सिर्फ़ ब्राउज़र में जाकर रंग चुना जा सकता था.

कलर पिकर खोलने के लिए, स्टाइल पैनल में, किसी भी रंग की झलक पर क्लिक करें. कहीं से भी रंग चुनने के लिए, आईड्रॉपर का इस्तेमाल करें.

ब्राउज़र के बाहर रंग चुनना

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

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

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

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

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

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

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