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 हैंडलर को ट्रिगर करते हैं और विंडो ऑब्जेक्ट पर window.onerror इवेंट के तौर पर भेजे जाते हैं."error"

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

Enter दबाकर लाइव एक्सप्रेशन सबमिट करना

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

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

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

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

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

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

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

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

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

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

अन्य हाइलाइट

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

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

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

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

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

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

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

[एक्सपेरिमेंट के तौर पर उपलब्ध] ब्राउज़र के बाहर से रंग चुनना

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

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

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

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

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

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

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

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

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

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