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

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

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

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

नई सुविधाएं

नया ऑडिट पैनल, लाइटहाउस की मदद से काम करता है

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

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

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

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

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

Google I/O '17 में मौजूद लाइटहाउस

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

लाइटहाउस में योगदान दें

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

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

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

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

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

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

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

1. Command मेन्यू खोलें.
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 की बातचीत का नीचे दिया गया डेमो देखें.

बदलाव

कंसोल में, ऑब्जेक्ट की ज़्यादा जानकारी देने वाली झलक दिखाना

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

छठी इमेज. ऑब्जेक्ट की झलक देखने के लिए, कंसोल का इस्तेमाल कैसे किया जाता है

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

कंसोल में संदर्भ चुनने के लिए ज़्यादा जानकारी वाला मेन्यू

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

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

आठवीं इमेज. नए संदर्भ चयन मेनू में किसी iframe पर होवर करने से वह व्यूपोर्ट

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

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

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

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

नेटवर्क को थ्रॉट करने के ज़्यादा आसान विकल्प

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

आकृति 11. नेटवर्क को थ्रॉटलिंग के नए विकल्प

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

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

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

Google I/O '17 में DevTools

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

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

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

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

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

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

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

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