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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

लाइटहाउस रिपोर्ट Chrome में खोली गई.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

कंसोल से अब आपको सोर्स फ़ाइलों में ब्रेकपॉइंट के लिए सही ऐंकर लिंक मिलते हैं, न कि 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.

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

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

&#39;दृष्टि कमियों को बेहतर करें&#39; के तहत चुना गया कम किया गया कंट्रास्ट विकल्प सुविधा पर काम करता है.

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

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

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

लाइटहाउस 10

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

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

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

लेगसी नेविगेशन की सुविधा बंद है.

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

डिवाइस की सूची में Moto G Power मौजूद है.

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