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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

एलिमेंट > स्टाइल से जुड़े अपडेट

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

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

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

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

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

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

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

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

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

कंसोल में लॉगपॉइंट और कंडिशनल ब्रेकपॉइंट मार्क करना

बेहतर ब्रेकपॉइंट उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, कंसोल अब ब्रेकपॉइंट से ट्रिगर होने वाले मैसेज को मार्क करता है:

• नारंगी रंग के सवाल के निशान ? के साथ, कंडिशनल ब्रेकपॉइंट में console.* कॉल
• गुलाबी दो बिंदुओं .. के साथ लॉगपॉइंट मैसेज

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

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

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

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

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

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

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

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

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

JavaScript प्रोफ़ाइलर को बंद करने की प्रोसेस शुरू की गई

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

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

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

इस बारे में ज़्यादा जानें. साथ ही, इससे जुड़े आरएफ़सी और crbug.com/1354548 पर सुझाव दें.

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

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

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

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

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

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

लाइटहाउस 10

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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