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

Kayce Basques

आपका फिर से स्वागत है! Chrome 63 में DevTools में ये नई सुविधाएं जोड़ी जा रही हैं:

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

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

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

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

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

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

Workspaces 2.0

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

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

Workspaces 2.0 को इस्तेमाल करने का तरीका जानने के लिए, CDS 2016 में DevTools के बारे में बताए गए टॉक के "Authoring" सेक्शन (14:28 के आस-पास) को देखें.

चार नए ऑडिट

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

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

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

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

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

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

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

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

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

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

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

    नकली पुश नोटिफ़िकेशन

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

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

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

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

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

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

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

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

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

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

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

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