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

Kayce Basques

नमस्कार! Chrome 76 में Chrome DevTools में जो नई सुविधाएं जोड़ी गई हैं उनके बारे में यहां बताया गया है.

सीएसएस वैल्यू के साथ ऑटोकंप्लीट

किसी DOM नोड में स्टाइल डिक्लेरेशन जोड़ते समय, डिक्लेरेशन के नाम के मुकाबले डिक्लेरेशन की वैल्यू को याद रखना कभी-कभी आसान होता है. उदाहरण के लिए, <p> नोड को बोल्ड करते समय, bold वैल्यू को font-weight नाम के मुकाबले याद रखना आसान हो सकता है. स्टाइल पैनल के ऑटोकंप्लीट यूज़र इंटरफ़ेस (यूआई) में अब सीएसएस वैल्यू का इस्तेमाल किया जा सकता है. अगर आपको कीवर्ड की वैल्यू याद है, लेकिन प्रॉपर्टी का नाम याद नहीं है, तो वैल्यू टाइप करें. इसके बाद, अपने-आप पूरा होने की सुविधा की मदद से, आपको वह नाम मिल जाएगा जो आपको चाहिए.

चित्र 1. bold टाइप करने के बाद, स्टाइल पैनल अपने-आप font-weight: bold पर पूरा हो जाता है.

इस नई सुविधा के बारे में सुझाव, शिकायत या राय देने के लिए, Chromium की समस्या #931145 पर जाएं.

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

नेटवर्क पैनल में पहले इस्तेमाल से जुड़ी समस्या थी. इसमें, DevTools विंडो छोटी होने पर, ट्रॉथलिंग मेन्यू जैसे विकल्पों को ऐक्सेस नहीं किया जा सकता था. इस समस्या को ठीक करने और नेटवर्क पैनल को व्यवस्थित करने के लिए, कम इस्तेमाल होने वाले कुछ विकल्पों को नेटवर्क सेटिंग पैनल में ले जाया गया है.

चित्र 2. नेटवर्क सेटिंग.

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

चित्र 3. पुरानी जगहों को नई जगहों से मैप करना.

यूज़र इंटरफ़ेस (यूआई) में हुए इस बदलाव के बारे में सुझाव/राय देने या शिकायत करने के लिए, Chromium की समस्या #892969 पर जाएं.

HAR एक्सपोर्ट में WebSocket मैसेज

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

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

इस नई सुविधा के बारे में सुझाव/राय/शिकायत देने के लिए, Chromium की समस्या #496006 पर जाएं.

एचएआर इंपोर्ट और एक्सपोर्ट करने के बटन

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

चित्र 4. नए HAR बटन.

यूज़र इंटरफ़ेस (यूआई) में हुए इस बदलाव के बारे में सुझाव, शिकायत या राय देने के लिए, Chromium की समस्या #904585 पर जाएं.

रीयल-टाइम में मेमोरी का कुल इस्तेमाल

मेमोरी पैनल में, अब रीयल-टाइम में मेमोरी के इस्तेमाल की कुल जानकारी दिखती है.

चित्र 5. मेमोरी पैनल में सबसे नीचे दिख रहा है कि पेज कुल 43.4 एमबी मेमोरी का इस्तेमाल कर रहा है. 209 केबी/सेकंड से पता चलता है कि कुल मेमोरी का इस्तेमाल हर सेकंड 209 केबी बढ़ रहा है.

मेमोरी के इस्तेमाल को रीयल-टाइम में ट्रैक करने के लिए, परफ़ॉर्मेंस मॉनिटर भी देखें.

इस नई सुविधा के बारे में सुझाव, शिकायत या राय देने के लिए, Chromium की समस्या #958177 पर जाएं.

सर्विस वर्कर के रजिस्ट्रेशन पोर्ट के नंबर

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

छठी इमेज. सर्विस वर्कर पोर्ट.

यूज़र इंटरफ़ेस (यूआई) में हुए इस बदलाव के बारे में सुझाव/राय देने या शिकायत करने के लिए, Chromium की समस्या #601286 पर जाएं.

बैकग्राउंड में फ़ेच और बैकग्राउंड में सिंक करने के इवेंट की जांच करना

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

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

सातवां चित्र. बैकग्राउंड फ़ेच पैनल. मैक्सिम साल्निकोव का डेमो.

आठवां चित्र. बैकग्राउंड सिंक पैनल.

इन नई सुविधाओं के बारे में सुझाव, शिकायत या राय देने के लिए, Chromium की समस्या #927726 पर जाएं.

Firefox के लिए Puppeteer

Firefox के लिए Puppeteer एक नया एक्सपेरिमेंटल प्रोजेक्ट है. इसकी मदद से, Puppeteer API की मदद से Firefox को ऑटोमेट किया जा सकता है. दूसरे शब्दों में, अब एक ही Node API की मदद से, Firefox और Chromium को ऑटोमेट किया जा सकता है. इस बारे में नीचे दिए गए वीडियो में बताया गया है.

node example.js चलाने के बाद, Firefox खुल जाता है और Puppeteer के दस्तावेज़ की साइट पर मौजूद खोज बॉक्स में टेक्स्ट page डाल दिया जाता है. इसके बाद, Chromium में भी वही टास्क दोहराया जाता है.

Puppeteer और Firefox के लिए Puppeteer के बारे में ज़्यादा जानने के लिए, Google I/O 2019 में Joel और एंड्रे की बातचीत देखें. Firefox के बारे में जानकारी 4:05 बजे के आस-पास दी जाती है.

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

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

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

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

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

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

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