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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

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

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

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

Workspaces 2.0

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

Workspaces 2.0, 1.0 पर आधारित है. इसमें बेहतर यूज़र एक्सपीरियंस और ट्रांसपाइल किए गए कोड की बेहतर ऑटो-मैपिंग की सुविधा जोड़ी गई है. इस सुविधा को मूल रूप से Chrome Developer Summit (CDS) 2016 के कुछ समय बाद लॉन्च किया जाना था. हालांकि, टीम ने कुछ समस्याओं को ठीक करने के लिए इसे बाद में लॉन्च करने का फ़ैसला किया.

Workspaces 2.0 को इस्तेमाल करने का तरीका जानने के लिए, CDS 2016 में हुई DevTools की बातचीत का "Authoring" हिस्सा (लगभग 14:28) देखें.

चार नए ऑडिट

Chrome 63 में, Audits पैनल में चार नई ऑडिट जोड़ी गई हैं:

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

अपने पेजों की क्वालिटी को बेहतर बनाने के लिए, ऑडिट पैनल का इस्तेमाल करने का तरीका जानने के लिए, Chrome DevTools में Lighthouse चलाना लेख पढ़ें.

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

कस्टम डेटा के साथ पुश नोटिफ़िकेशन की जांच करना

DevTools में पुश नोटिफ़िकेशन को सिम्युलेट करने की सुविधा कुछ समय से उपलब्ध है. हालांकि, इसमें एक सीमा है: इसमें कस्टम डेटा नहीं भेजा जा सकता. हालांकि, Chrome 63 में Service Worker पैनल में Push टेक्स्ट बॉक्स की नई सुविधा उपलब्ध होने के बाद, अब ऐसा किया जा सकता है. इसे अभी आज़माएं:

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

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

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

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

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

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

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

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

बैकग्राउंड सिंक इवेंट को ट्रिगर करने की सुविधा, कुछ समय से Service Workers पैनल में भी उपलब्ध है. हालांकि, अब कस्टम टैग भेजे जा सकते हैं:

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

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

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

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

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

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

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

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

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