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

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

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

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

नई सुविधाएं

Lighthouse की मदद से काम करने वाला नया Audits पैनल

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

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

पहली इमेज. Lighthouse रिपोर्ट

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

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

Google I/O 2017 में Lighthouse

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 में कोड कवरेज रिकॉर्ड करते समय, कवरेज टैब में सिर्फ़ "रिकॉर्डिंग..." दिखता था. इससे यह पता नहीं चलता था कि कौनसे कोड का इस्तेमाल किया जा रहा है. अब कवरेज टैब में, आपको रीयल-टाइम में यह जानकारी दिखेगी कि कौनसे कोड का इस्तेमाल किया जा रहा है.

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

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

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

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

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

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

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

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

Google I/O '17 में DevTools

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

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

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

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

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

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

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

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