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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

रिकॉर्डर से जुड़े अपडेट

रीप्ले एक्सटेंशन के लिए सहायता

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

उदाहरण के तौर पर दिया गया एक्सटेंशन आज़माएं. कस्टम रीप्ले यूज़र इंटरफ़ेस (यूआई) खोलने के लिए, कस्टम रीप्ले का नया विकल्प चुनें.

रीप्ले का कस्टम यूज़र इंटरफ़ेस (यूआई).

रिकॉर्डर को अपनी ज़रूरतों के हिसाब से बनाने और उसे अपने टूल के साथ इंटिग्रेट करने के लिए, अपना एक्सटेंशन बनाएं: chrome.devtools.recorder API को एक्सप्लोर करें और एक्सटेंशन के ज़्यादा उदाहरण देखें.

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

पियर्स सिलेक्टर की मदद से रिकॉर्ड करना

अब कस्टम, सीएसएस, ARIA, टेक्स्ट, और XPath सिलेक्टर के अलावा, पियर्स सिलेक्टर का इस्तेमाल करके भी रिकॉर्ड किया जा सकता है. ये सिलेक्टर, सीएसएस सिलेक्टर की तरह ही काम करते हैं. हालांकि, ये शैडो रूट में भी जा सकते हैं.

शैडो डीओएम वाले पेज पर नई रिकॉर्डिंग शुरू करें और रिकॉर्डिंग के लिए सिलेक्टर के टाइप में जाकर, चेकबॉक्स. पियर्स को चुनें. शैडो DOM में एलिमेंट के साथ अपने इंटरैक्शन को रिकॉर्ड करें और उससे जुड़े चरण की जांच करें.

रिकॉर्डर को पियर्स सिलेक्टर का इस्तेमाल करने के लिए सेट करना; पियर्स सिलेक्टर का इस्तेमाल करते हुए.

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

Lighthouse के विश्लेषण के साथ Puppeteer स्क्रिप्ट के तौर पर एक्सपोर्ट करना

रिकॉर्डर में, एक्सपोर्ट करने का एक नया विकल्प जोड़ा गया है: Puppeteer (इसमें Lighthouse का विश्लेषण भी शामिल है). Puppeteer की मदद से, Chrome को ऑटोमेट और कंट्रोल किया जा सकता है. Lighthouse की मदद से, अपनी वेबसाइट की परफ़ॉर्मेंस को कैप्चर किया जा सकता है और उसे बेहतर बनाया जा सकता है.

अपनी रिकॉर्डिंग खोलें, एक्सपोर्ट करें पर टैप करें. एक्सपोर्ट करें पर क्लिक करें, नया विकल्प चुनें, और .js फ़ाइल सेव करें.

Puppeteer (इसमें Lighthouse का विश्लेषण भी शामिल है) एक्सपोर्ट करें.

flow.report.html फ़ाइल में लाइटहाउस रिपोर्ट पाने के लिए, Puppeteer स्क्रिप्ट चलाएं.

Chrome में खुली Lighthouse रिपोर्ट.

एक्सटेंशन पाना

रिकॉर्ड करने की सुविधा को अपनी पसंद के मुताबिक बनाने के विकल्पों को एक्सप्लोर करें. उदाहरण के लिए, एक्सपोर्ट करने के कस्टम विकल्पों की मदद से. रिकॉर्डर के लिए एक्सटेंशन पाने के लिए, किसी रिकॉर्डिंग में एक्सपोर्ट करें पर टैप करें. एक्सपोर्ट करें > एक्सटेंशन पाएं पर क्लिक करें.

एक्सपोर्ट ड्रॉप-डाउन मेन्यू में, एक्सटेंशन पाएं विकल्प.

रिकॉर्डर एक्सटेंशन की सूची में, अपना एक्सटेंशन जोड़ें. हमें इस सूची में आपका नाम देखने का इंतज़ार रहेगा!

Chromium से जुड़ी समस्याएं: 1417104, 1413168.

एलिमेंट > स्टाइल के अपडेट

सीएसएस दस्तावेज़

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

सीएसएस प्रॉपर्टी के दस्तावेज़ वाला टूलटिप.

टूलटिप में ज़्यादा जानें लिंक भी होता है. यह लिंक आपको इस प्रॉपर्टी के MDN सीएसएस रेफ़रंस पर ले जाता है.

अगर आपको CSS के बारे में अच्छी तरह पता है, तो हो सकता है कि टूलटिप आपके लिए परेशानी भरे हों. सभी विकल्पों को बंद करने के लिए, चेकबॉक्स. न दिखाएं पर सही का निशान लगाएं.

इन्हें फिर से चालू करने के लिए, सेटिंग. सेटिंग > प्राथमिकताएं > एलिमेंट > चेकबॉक्स. सीएसएस दस्तावेज़ टूलटिप दिखाएं पर जाएं.

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

सीएसएस नेस्टिंग की सुविधा

एलिमेंट > स्टाइल पैनल में, अब सीएसएस नेस्टिंग सिंटैक्स को पहचाना जाता है. साथ ही, सही एलिमेंट पर नेस्ट की गई स्टाइल लागू की जाती हैं.

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

Console में लॉगपॉइंट और शर्त के हिसाब से ब्रेकपॉइंट मार्क करना

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

ब्रेकपॉइंट से ट्रिगर किए गए मैसेज को कंसोल अब कैसे दिखाता है: आइकॉन और सही सोर्स लिंक के साथ.

कंसोल अब आपको सोर्स फ़ाइलों में ब्रेकपॉइंट के लिए सही ऐंकर लिंक देता है. यह लिंक, VM<number> स्क्रिप्ट के बजाय होता है. Chrome, V8 पर किसी भी JavaScript को चलाने के लिए स्क्रिप्ट बनाता है.

ब्रेकपॉइंट एडिटर पर सीधे जाने के लिए, ब्रेकपॉइंट मैसेज के बगल में मौजूद लिंक पर क्लिक करें.

लॉगपॉइंट मैसेज के बगल में मौजूद ऐंकर लिंक, जो ब्रेकपॉइंट एडिटर खोलता है.

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

डीबग करने के दौरान काम की स्क्रिप्ट को अनदेखा करना

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

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

अनदेखा करने से जुड़े विकल्पों के साथ, फ़ोल्डर और स्क्रिप्ट के संदर्भ मेन्यू.

अनदेखा की गई सूची में शामिल सभी स्क्रिप्ट और फ़ोल्डर, फ़ाइल ट्री में धूसर रंग में दिखते हैं.

&#39;अनदेखा करें&#39; सूची में शामिल स्क्रिप्ट और फ़ोल्डर धूसर हो जाते हैं. इन्हें &#39;ज़्यादा विकल्प&#39; ड्रॉप-डाउन मेन्यू में मौजूद एक्सपेरिमेंटल विकल्प की मदद से छिपाया जा सकता है.

अगर आपने अनदेखी की गई कोई स्क्रिप्ट चुनी है, तो कॉन्फ़िगर करें बटन आपको सेटिंग. सेटिंग > अनदेखी की गई सूची पर ले जाता है. तीन बिंदु वाला मेन्यू. > 'अनदेखा करें' की सूची में शामिल सोर्स छिपाएं प्रयोगात्मक. का इस्तेमाल करके, फ़ाइल ट्री से अनदेखा किए गए सोर्स भी छिपाए जा सकते हैं.

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

JavaScript प्रोफ़ाइलर का इस्तेमाल बंद किया जा रहा है

Chrome 58 में, DevTools टीम ने JavaScript प्रोफ़ाइलर को बंद करने का फ़ैसला लिया था. साथ ही, Node.js और Deno डेवलपर को JavaScript सीपीयू की परफ़ॉर्मेंस की प्रोफ़ाइल बनाने के लिए, परफ़ॉर्मेंस पैनल का इस्तेमाल करने के लिए कहा था.

DevTools के इस वर्शन (112) में, JavaScript प्रोफ़ाइलर को बंद करने की प्रोसेस के चार चरण शुरू किए गए हैं. JavaScript प्रोफ़ाइलर पैनल में, अब उससे जुड़ी चेतावनी वाला बैनर दिखता है.

प्रोफ़ाइलर के सबसे ऊपर मौजूद, बंद होने का बैनर.

सीपीयू की प्रोफ़ाइल बनाने के लिए, प्रोफ़ाइलर के बजाय, परफ़ॉर्मेंस पैनल का इस्तेमाल करें.

ज़्यादा जानने और सुझाव, शिकायत या राय देने के लिए, उससे जुड़े RFC और crbug.com/1354548 पर जाएं.

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

कम किए गए कंट्रास्ट को एम्युलेट करना

रेंडरिंग टैब, दृष्टि से जुड़ी समस्याओं को एम्युलेट करें सूची में एक नया विकल्प जोड़ता है—कम किया गया कंट्रास्ट. इस विकल्प की मदद से, यह पता लगाया जा सकता है कि कम कंट्रास्ट सेंसिटिविटी वाले लोगों को आपकी वेबसाइट कैसी दिखती है.

&#39;ऐसी समस्याओं को एमुलेट करना जिनकी वजह से, देखने में परेशानी होती है&#39; सुविधा में जाकर, कम किया गया कंट्रास्ट विकल्प चुना गया.

ध्यान दें कि सूची के विकल्पों को अपडेट कर दिया गया है, ताकि आपको यह पता चल सके कि विकल्पों में रंग के अंतर को किस तरह दिखाया गया है.

DevTools की मदद से, कंट्रास्ट से जुड़ी सभी समस्याओं का एक साथ पता लगाया जा सकता है और उन्हें ठीक किया जा सकता है. ज़्यादा जानकारी के लिए, अपनी वेबसाइट को ज़्यादा पढ़ने लायक बनाना लेख पढ़ें.

Chromium से जुड़ी समस्याएं: 1412719, 1412721.

Lighthouse 10

Lighthouse पैनल अब Lighthouse 10.0.1 पर काम करता है. ज़्यादा जानकारी के लिए, Lighthouse 10.0.1 में नया क्या है लेख पढ़ें.

DevTools में Lighthouse पैनल का इस्तेमाल करने के बुनियादी तरीकों के बारे में जानने के लिए, Lighthouse: वेबसाइट की स्पीड ऑप्टिमाइज़ करना लेख पढ़ें.

Lighthouse > सेटिंग. > खाली चेकबॉक्स. लेगसी नेविगेशन अब डिफ़ॉल्ट रूप से बंद है. यह विकल्प, नेविगेशन मोड में लेगसी Lighthouse कॉन्फ़िगरेशन का इस्तेमाल करता है.

लेगसी नेविगेशन बंद किया गया.

Lighthouse 10 अब डिफ़ॉल्ट एम्युलेट करने वाले डिवाइस के तौर पर, Moto G Power का इस्तेमाल करता है. DevTools ने इस डिवाइस को सेटिंग. सेटिंग > डिवाइस में जोड़ा है.

डिवाइसों की सूची में Moto G Power.

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

कोई काम न करने वाले सेवा वर्कर फ़ेच हैंडलर को हटाने के लिए, कंसोल से मिली चेतावनी

Chrome 112, नो-ऑप (कोई कार्रवाई नहीं) सर्विस वर्कर फ़ेच हैंडल को स्किप करता है, क्योंकि ये नेविगेशन को धीमा कर सकते हैं, लेकिन कोई काम नहीं करते. अब आपकी वेबसाइट को प्रोग्रेसिव वेब ऐप्लिकेशन के तौर पर मंज़ूरी पाने के लिए, ऐसे हैंडलर की ज़रूरत नहीं है.

अगर Console को आपकी वेबसाइट पर कोई ऐसा फ़ेच हैंडलर मिलता है जो काम नहीं करता, तो वह चेतावनी दिखाता है. इसे हटा दें.

कोई काम न करने वाला फ़ेच हैंडलर और Console में इससे जुड़ी चेतावनी.

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

अन्य हाइलाइट

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

  • सोर्स > ब्रेकपॉइंट पैनल में, अब फ़ाइल के नाम के बगल में फ़ाइल पाथ अलग-अलग दिखते हैं. ऐसा तब होता है, जब फ़ाइल के नाम में कोई खास जानकारी न हो (1403924).
  • परफ़ॉर्मेंस पैनल के फ़्लेम चार्ट में मौजूद मुख्य सेक्शन में, अब CpuProfiler::StartProfiling को Profiler Overhead (1358602) के तौर पर दिखाया जाता है.
  • DevTools में, अपने-आप पूरा होने की सुविधा को बेहतर बनाया गया है:
    • सोर्स: किसी भी शब्द को लगातार पूरा करना (1320204).
    • कंसोल: Arrow down पहला सुझाव चुनता है और सुझावों को Tab के सुझाव मिलते हैं (1276960).
  • DevTools में इवेंट लिसनर ब्रेकपॉइंट जोड़ा गया है, ताकि दस्तावेज़ की पिक्चर में पिक्चर विंडो (1315352) खोलने पर, उसे रोका जा सके.
  • DevTools ने एक ऐसा तरीका सेट अप किया है जिससे Vue2 वेबपैक आर्टफ़ैक्ट को JavaScript (1416562) के तौर पर सही तरीके से दिखाया जा सकता है.
  • Console सेटिंग का नाम बदला गया है: console.trace() मैसेज को अपने-आप बड़ा करें. (1139616).

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

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

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

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

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

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