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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

एचएआर एक्सपोर्ट में 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 समस्या #496006 पर जाएं.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Firefox के लिए Puppeteer

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

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

Puppeteer और Firefox के लिए Puppeteer के बारे में ज़्यादा जानने के लिए, Google I/O 2019 में जोएल और ऐंड्री की 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 में नया क्या है सीरीज़ में शामिल सभी चीज़ों की सूची.