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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

रीप्ले एक्सटेंशन की सुविधा

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

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

फिर से चलाने के लिए कस्टम यूज़र इंटरफ़ेस (यूआई).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

तत्व > स्टाइल से जुड़े अपडेट

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript Profiler को बंद करने की प्रोसेस शुरू हो गई है

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

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

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

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

ज़्यादा जानें और इससे जुड़े आरएफ़सी और 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).
    • Console: Arrow down पहले सुझाव को चुनता है और सुझावों को Tab हिंट (1276960) मिलते हैं.
  • DevTools ने इवेंट लिसनर ब्रेकपॉइंट जोड़ा है. इससे, दस्तावेज़ की पिक्चर में पिक्चर विंडो खोलने पर, आपको वीडियो को रोकने की सुविधा मिलती है (1315352).
  • DevTools ने एक ऐसा तरीका सेट अप किया है जिससे Vue2 webpack आर्टफ़ैक्ट, JavaScript के तौर पर सही तरीके से दिखते हैं (1416562).
  • Console सेटिंग का नाम बदलकर, Console.trace() मैसेज अपने-आप बड़े होने की सुविधा कर दिया गया है. (1139616).

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

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

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

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

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

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