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

Kayce Basques

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

सीएसएस वैल्यू की मदद से ऑटोकंप्लीट करें

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

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

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

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

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

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

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

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

Chromium की समस्या #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 की समस्या #496006 पर, इस नई सुविधा के बारे में सुझाव/राय दें या शिकायत करें.

HAR इंपोर्ट और एक्सपोर्ट बटन

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

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

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

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

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

चित्र 5. मेमोरी पैनल के नीचे दिखाता है कि पृष्ठ 43.4 MB मेमोरी का उपयोग कुल. 209 केबी/से॰ का मतलब है कि हर सेकंड में कुल मेमोरी का इस्तेमाल 209 केबी/सेकंड बढ़ रहा है.

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

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

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

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

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

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

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

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

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

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

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

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

Firefox के लिए Puppeteer

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

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

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

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

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

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

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

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

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

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