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

Kayce Basques

नमस्कार! Chrome 76 में, Chrome DevTools में नया क्या है, यहां बताया गया है.

सीएसएस वैल्यू के साथ अपने-आप पूरा होने की सुविधा

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

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

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

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

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

इमेज 2. नेटवर्क सेटिंग पर क्लिक करें.

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

इमेज 3. पुरानी जगहों को नई जगहों से मैप करना.

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

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

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

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

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

HAR फ़ाइल इंपोर्ट और एक्सपोर्ट करने के बटन

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

इमेज 4. नए एचएआर बटन.

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

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

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

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

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

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

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

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

इमेज 6. सर्विस वर्कर पोर्ट.

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

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

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

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

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

इमेज 8. बैकग्राउंड सिंक वाला पैनल.

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

Puppeteer for Firefox

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

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

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

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

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

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

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

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

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

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