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

Jecelyn Yeen

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

परफ़ॉर्मेंस की अहम जानकारी पैनल का इस्तेमाल करके, अपनी वेबसाइट की परफ़ॉर्मेंस के बारे में अहम जानकारी पाएं. यह अहम जानकारी अलग-अलग मामलों में इस्तेमाल की जा सकती है.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript को लागू करना जारी रखने से, डेवलपर को कई समस्याएं हो सकती हैं. ऐसे में, हो सकता है कि रेंडरर काम न करे. यह बदलाव डीबग करने के व्यवहार को Firefox जैसे दूसरे ब्राउज़र के साथ अलाइन करता है.

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

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

कंसोल से जुड़े अपडेट

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

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

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

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

Enter की मदद से लाइव एक्सप्रेशन दिखाएं

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

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

Enter की मदद से लाइव एक्सप्रेशन दिखाएं

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

शुरुआत में यूज़र फ़्लो रिकॉर्डिंग रद्द करें

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

शुरुआत में यूज़र फ़्लो रिकॉर्डिंग रद्द करें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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