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

Kayce Basques

आपका फिर से स्वागत है! Chrome 63 में DevTools की आने वाली नई सुविधाओं में ये शामिल हैं:

ज़्यादा जानने के लिए आगे पढ़ें या नीचे दिया गया वीडियो देखें!

एक से ज़्यादा क्लाइंट वाले रिमोट डीबग की सुविधा

अगर आपने कभी भी वीएस कोड या WebStore जैसे किसी IDE से ऐप्लिकेशन को डीबग करने की कोशिश की है, तो यह पता चला है कि DevTools खोलने पर आपका डीबग सेशन गड़बड़ हो गया है. इस समस्या की वजह से, ऐसा करना मुमकिन नहीं था WebDriver टेस्ट को डीबग करने के लिए DevTools का इस्तेमाल करें.

Chrome 63 के बाद से, DevTools अब डिफ़ॉल्ट रूप से कई रिमोट डीबगिंग क्लाइंट के साथ काम करता है. कॉन्फ़िगरेशन की ज़रूरत है.

मल्टी-क्लाइंट रिमोट डीबगिंग, crbug.com पर DevTools से जुड़ी सबसे लोकप्रिय समस्या में पहले नंबर पर था और नंबर 3 पर माइग्रेट करने की कोशिश करते हैं. एक से ज़्यादा क्लाइंट के लिए सहायता पाने की सुविधा में भी, कुछ DevTools के साथ अन्य टूल इंटिग्रेट करने या नए टूल में तरीके. उदाहरण के लिए:

  • वीएस कोड और Webstore के लिए, ChromeDriver या Chrome डीबगिंग एक्सटेंशन जैसे प्रोटोकॉल क्लाइंट, और Puppeteer जैसे WebSocket क्लाइंट, अब DevTools के साथ ही चलाए जा सकते हैं.
  • दो अलग-अलग WebSocket प्रोटोकॉल क्लाइंट, जैसे कि Puppeteer या chrome-remote-interface, अब एक ही टैब से एक साथ कनेक्ट हो सकता है.
  • chrome.debugger API का इस्तेमाल करने वाले Chrome एक्सटेंशन, अब DevTools के साथ ही चलाए जा सकते हैं.
  • कई अलग-अलग Chrome एक्सटेंशन अब एक ही टैब पर, chrome.debugger एपीआई का इस्तेमाल कर सकते हैं साथ-साथ

वर्कस्पेस 2.0

DevTools में कुछ समय से फ़ाइल फ़ोल्डर मौजूद हैं. इस सुविधा की मदद से, DevTools का इस्तेमाल आपका IDE. DevTools में अपने सोर्स कोड में कुछ बदलाव किए जाते हैं और वे बदलाव आपके फ़ाइल सिस्टम पर आपके प्रोजेक्ट का लोकल वर्शन है.

Workspace 2.0 में, 1.0 का इस्तेमाल किया जाता है. इससे उपयोगकर्ता अनुभव को बेहतर बनाया जाता है. साथ ही, ट्रांसपिल किए गए टूल की ऑटो-मैपिंग बेहतर होती है कोड. इस सुविधा को मूल रूप से Chrome डेवलपर सम्मेलन के कुछ समय बाद रिलीज़ होने के लिए शेड्यूल किया गया था (CDS) 2016 में किया गया था, लेकिन टीम ने कुछ समस्याओं को सुलझाने के लिए इसलिए आगे टाल दिया.

"लेखक" देखें काम करने की जगहों को देखने के लिए CDS 2016 की DevTools बातचीत का हिस्सा (करीब 14:28) 2.0 सक्रिय है.

चार नए ऑडिट

Chrome 63 में ऑडिट पैनल में चार नए ऑडिट हैं:

  • इमेज को WebP के तौर पर दिखाएं.
  • सही आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) वाली इमेज इस्तेमाल करें.
  • ऐसी फ़्रंटएंड JavaScript लाइब्रेरी से बचें जिनमें सुरक्षा से जुड़े जोखिम के बारे में जानकारी मौजूद होती है.
  • ब्राउज़र की गड़बड़ियों को कंसोल में लॉग किया गया.

Chrome DevTools में रन लाइटहाउस देखें और ऑडिट पैनल का इस्तेमाल करके, आपके पेजों की क्वालिटी कैसी होती है.

ऑडिट पैनल को चलाने वाले प्रोजेक्ट के बारे में ज़्यादा जानने के लिए, Lighthouse देखें.

पुश नोटिफ़िकेशन को कस्टम डेटा की मदद से सिम्युलेट करें

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

  1. आसान पुश डेमो पर जाएं.
  2. पुश नोटिफ़िकेशन चालू करें पर क्लिक करें.
  3. जब Chrome आपको सूचनाएं भेजने की अनुमति देने का अनुरोध करे, तो अनुमति दें पर क्लिक करें.
  4. DevTools खोलें.
  5. सर्विस वर्कर पैनल पर जाएं.

  6. पुश टेक्स्ट बॉक्स में कुछ लिखें.

    पुश नोटिफ़िकेशन को कस्टम डेटा से सिम्युलेट किया जा रहा है.

    पहली इमेज. Push टेक्स्ट बॉक्स के ज़रिए, कस्टम डेटा वाले पुश नोटिफ़िकेशन को सिम्युलेट किया जा रहा है सर्विस वर्कर पैनल

  7. सूचना भेजने के लिए, पुश पर क्लिक करें.

    सिम्युलेट किया गया पुश नोटिफ़िकेशन

    दूसरी इमेज. सिम्युलेट किया गया पुश नोटिफ़िकेशन

कस्टम टैग से, बैकग्राउंड सिंक वाले इवेंट ट्रिगर करें

बैकग्राउंड सिंक इवेंट ट्रिगर करना कुछ समय से सर्विस वर्कर पैनल में भी मौजूद है, लेकिन अब आप कस्टम टैग भेज सकते हैं:

  1. DevTools खोलें.
  2. सर्विस वर्कर पैनल पर जाएं.
  3. सिंक करें टेक्स्ट बॉक्स में कुछ टेक्स्ट डालें.
  4. सिंक करें पर क्लिक करें.

कस्टम बैकग्राउंड सिंक इवेंट को ट्रिगर करना

तीसरी इमेज. सिंक करें पर क्लिक करने के बाद, DevTools कस्टम टैग के साथ बैकग्राउंड सिंक इवेंट भेजता है सर्विस वर्कर को update-content

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

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

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

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

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

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

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