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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

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

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

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

पसंद के मुताबिक फिर से चलाने का यूज़र इंटरफ़ेस (यूआई).

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

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

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

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

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

Recorder को पियर्स सिलेक्टर का इस्तेमाल करने के लिए सेट किया जाता है; पियर्स सिलेक्टर इस्तेमाल किया जा रहा है.

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

लाइटहाउस विश्लेषण के साथ, Puppeteer स्क्रिप्ट के तौर पर एक्सपोर्ट करें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

लाइटहाउस 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 में नया क्या है सीरीज़ में शामिल की गई सभी चीज़ों की सूची.