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

आपका स्वागत है! Chrome 60 में DevTools में आने वाली नई सुविधाओं और बड़े बदलावों में ये शामिल हैं:

• नया ऑडिट पैनल, जिसमें प्रोग्रेसिव वेब ऐप्लिकेशन, परफ़ॉर्मेंस, सुलभता, और सबसे सही तरीकों के लिए टेस्ट शामिल हैं.
• तीसरे पक्ष के बैज. यह पता लगाएं कि कौनसे तीसरे पक्ष नेटवर्क अनुरोध कर रहे हैं, Console में लॉग कर रहे हैं, और JavaScript को लागू कर रहे हैं.
• यहां जारी रखें. एक नया जेस्चर, जो JavaScript की गड़बड़ी को डीबग करने के आपके वर्कफ़्लो को तेज़ कर सकता है.
• असाइनॉन्स JavaScript के लिए, डीबग करने की सुविधा.
• Console में ऑब्जेक्ट की झलक.
• कवरेज टैब में रीयल-टाइम अपडेट.
• Console में संदर्भ चुनने के लिए नया मेन्यू.
• नेटवर्क थ्रॉटलिंग के आसान विकल्प.
• एक साथ काम नहीं करने वाली स्टैक ट्रेस की सुविधा डिफ़ॉल्ट रूप से चालू होती है.

रिलीज़ नोट का वीडियो वर्शन यहां देखें या ज़्यादा जानने के लिए आगे पढ़ें.

नई सुविधाएं

Lighthouse की मदद से काम करने वाला नया ऑडिट पैनल

ऑडिट पैनल अब Lighthouse की मदद से काम करता है. Lighthouse, आपके वेब पेजों की क्वालिटी को मेज़र करने के लिए, जांच के कई तरीकों का सेट उपलब्ध कराता है.

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

पहली इमेज. लाइटहाउस रिपोर्ट

किसी पेज का ऑडिट करने के लिए:

1. ऑडिट टैब पर क्लिक करें.
2. ऑडिट करें पर क्लिक करें.
3. ऑडिट चलाएं पर क्लिक करें. Lighthouse, मोबाइल डिवाइस को एमुलेट करने के लिए DevTools को सेट अप करता है. इसके बाद, वह पेज के लिए कई तरह की जांच करता है और नतीजों को ऑडिट पैनल में दिखाता है.

Google I/O '17 में लाइटहाउस के बारे में जानकारी

DevTools में Lighthouse के इंटिग्रेशन के बारे में ज़्यादा जानने के लिए, Google I/O '17 में हुई DevTools से जुड़ी बातचीत देखें.

Lighthouse में योगदान देना

Lighthouse एक ओपन सोर्स प्रोजेक्ट है. इस टूल के काम करने के तरीके और इसमें योगदान देने के बारे में ज़्यादा जानने के लिए, Google I/O '17 में Lighthouse के बारे में दी गई जानकारी देखें.

क्या आपके पास Lighthouse ऑडिट के लिए कोई आइडिया है? इसे यहां पोस्ट करें!

तीसरे पक्ष के बैज

तीसरे पक्ष के बैज का इस्तेमाल करके, उन इकाइयों के बारे में ज़्यादा जानकारी पाएं जो किसी पेज पर नेटवर्क अनुरोध कर रही हैं, Console में लॉग कर रही हैं, और JavaScript को लागू कर रही हैं.

दूसरी इमेज. नेटवर्क पैनल में, तीसरे पक्ष के बैज पर कर्सर घुमाना

तीसरी इमेज. Console में तीसरे पक्ष के बैज पर कर्सर घुमाना

तीसरे पक्ष के बैज चालू करने के लिए:

1. कमांड मेन्यू खोलें.
2. Show third party badges कमांड चलाएं.

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

चौथी इमेज. बॉटम-अप टैब में प्रॉडक्ट के हिसाब से ग्रुप करना

'यहां से जारी रखें' सुविधा के लिए नया जेस्चर

मान लें कि आपने स्क्रिप्ट की 25वीं लाइन पर रोक लगाई है और आपको 50वीं लाइन पर जाना है. पहले, लाइन 50 पर ब्रेकपॉइंट सेट किया जा सकता था या लाइन पर राइट क्लिक करके यहां से जारी रखें को चुना जा सकता था. हालांकि, अब इस वर्कफ़्लो को मैनेज करने के लिए, तेज़ी से इस्तेमाल किया जा सकने वाला जेस्चर उपलब्ध है.

कोड में आगे बढ़ते समय, Command (Mac) या Control (Windows, Linux) को दबाकर रखें. इसके बाद, कोड की उस लाइन पर जाने के लिए क्लिक करें. DevTools, जिन जगहों पर जाया जा सकता है उन्हें नीले रंग से हाइलाइट करता है.

पांचवीं इमेज. यहां जाएं

DevTools में डीबग करने की बुनियादी बातें जानने के लिए, JavaScript को डीबग करना शुरू करना लेख पढ़ें.

एसिंक्रोनस प्रोसेस के बारे में जानकारी

आने वाले समय में, DevTools टीम की मुख्य कोशिश यह होगी कि एसिंक्रोनस कोड को डीबग करने के तरीके को आसान बनाया जाए. साथ ही, आपको एसिंक्रोनस कोड के चलने का पूरा इतिहास भी उपलब्ध कराया जाए.

'यहां से जारी रखें' सुविधा के लिए नया जेस्चर, एसिंक्रोनस कोड के साथ भी काम करता है. Command (Mac) या Control (Windows, Linux) को दबाकर रखने पर, DevTools उन डेस्टिनेशन को हरे रंग में हाइलाइट करता है जिन पर असाइनमेंट के पूरा होने के बाद, एक साथ कूदा जा सकता है.

उदाहरण के लिए, I/O में DevTools के बारे में बताए गए टॉक का यह डेमो देखें.

बदलाव

Console में ऑब्जेक्ट की ज़्यादा जानकारी वाली झलकें

पहले, जब Console में किसी ऑब्जेक्ट को लॉग किया जाता था या उसका आकलन किया जाता था, तो Console सिर्फ़ Object दिखाता था. इससे खास तौर पर कोई मदद नहीं मिलती थी. अब Console, ऑब्जेक्ट के कॉन्टेंट के बारे में ज़्यादा जानकारी देता है.

छठी इमेज. Console में ऑब्जेक्ट की झलक देखने का तरीका

सातवीं इमेज. Console अब ऑब्जेक्ट की झलक कैसे दिखाता है

Console में, ज़्यादा जानकारी वाला कॉन्टेक्स्ट चुनने का मेन्यू

Console के कॉन्टेक्स्ट चुनने वाले मेन्यू में, अब उपलब्ध कॉन्टेक्स्ट के बारे में ज़्यादा जानकारी मिलती है.

• टाइटल से पता चलता है कि हर आइटम क्या है.
• टाइटल के नीचे मौजूद सबटाइटल से पता चलता है कि आइटम किस डोमेन से आया है.
• व्यूपोर्ट में किसी iframe कॉन्टेक्स्ट को हाइलाइट करने के लिए, उस पर कर्सर घुमाएं.

आठवीं इमेज. नए कॉन्टेक्स्ट सिलेक्शन मेन्यू में किसी iframe पर कर्सर घुमाने से, वह व्यूपोर्ट में हाइलाइट हो जाता है

कवरेज टैब में रीयल-टाइम अपडेट

Chrome 59 में कोड कवरेज रिकॉर्ड करते समय, कवरेज टैब में सिर्फ़ "रिकॉर्डिंग की जा रही है..." दिखेगा. साथ ही, यह भी नहीं दिखेगा कि किस कोड का इस्तेमाल किया जा रहा है. अब कवरेज टैब में, आपको रीयल-टाइम में दिखता है कि किस कोड का इस्तेमाल किया जा रहा है.

नौवीं इमेज. पुराने कवरेज टैब का इस्तेमाल करके, किसी पेज को लोड करना और उससे इंटरैक्ट करना

10वीं इमेज. नए कवरेज टैब का इस्तेमाल करके, किसी पेज को लोड करना और उससे इंटरैक्ट करना

नेटवर्क थ्रॉटलिंग के आसान विकल्प

नेटवर्क और परफ़ॉर्मेंस पैनल में, नेटवर्क थ्रॉटल करने वाले मेन्यू को आसान बनाया गया है, ताकि उनमें सिर्फ़ तीन विकल्प शामिल किए जा सकें: ऑफ़लाइन, धीमा 3G, जो भारत जैसी जगहों पर आम है, और तेज़ 3G, जो अमेरिका जैसी जगहों पर आम है.

11वीं इमेज. नेटवर्क थ्रॉटलिंग के नए विकल्प

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

एक साथ काम नहीं करने वाले स्टैक डिफ़ॉल्ट रूप से चालू होते हैं

सोर्स पैनल से असाइनमेंट सिंक होने में लगने वाला समय चेकबॉक्स हटा दिया गया है. एक साथ काम नहीं करने वाली स्टैक ट्रेस अब डिफ़ॉल्ट रूप से चालू हैं. पहले, परफ़ॉर्मेंस में होने वाले खर्च की वजह से, यह विकल्प ऑप्ट-इन था. अब यह सुविधा डिफ़ॉल्ट रूप से चालू की जा सकती है, क्योंकि इसके लिए ज़रूरी प्रोसेस में लगने वाला समय बहुत कम है. अगर आपको असाइन किए गए स्टैक ट्रेस बंद करने हैं, तो सेटिंग में जाकर या कमांड मेन्यू में Do not capture async stack traces कमांड चलाकर ऐसा किया जा सकता है.

Google I/O '17 में DevTools

DevTools की टीम पिछले साल किस पर काम कर रही थी और आने वाले समय में किन बड़ी थीम पर काम करेगी, इस बारे में ज़्यादा जानने के लिए, यहां पॉल आयरिश की बातचीत देखें.

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

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

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

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

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

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

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