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

Kayce Basques
Kayce Basques
X GitHub

DevTools की रिलीज़ की जानकारी के एक और वर्शन में आपका स्वागत है. नीचे दिया गया वीडियो देखें या Chrome 59 में Chrome DevTools की नई सुविधाओं के बारे में जानने के लिए, आगे पढ़ें!

हाइलाइट

नई सुविधाएं

सीएसएस और JS कोड कवरेज

नए कवरेज टैब की मदद से, इस्तेमाल न किए गए सीएसएस और JS कोड का पता लगाएं. किसी पेज को लोड या चलाने पर, यह टैब आपको बताता है कि कितना कोड इस्तेमाल किया गया है और कितना कोड लोड किया गया है. आपको जिस कोड की ज़रूरत है उसे ही शिप करके, अपने पेजों का साइज़ कम किया जा सकता है.

कवरेज टैब

किसी यूआरएल पर क्लिक करने से, सोर्स पैनल में वह फ़ाइल दिखती है. साथ ही, यह भी पता चलता है कि कोड की कौनसी लाइनें एक्ज़ीक्यूट की गई हैं.

सोर्स पैनल में कोड कवरेज की जानकारी

कोड की हर लाइन को अलग-अलग रंगों में दिखाया गया है:

  • हरे रंग का मतलब है कि कोड की यह लाइन एक्ज़ीक्यूट हो गई है.
  • पूरी तरह से लाल रंग का मतलब है कि यह काम नहीं करता.
  • अगर कोड की कोई लाइन लाल और हरी, दोनों रंग की है, तो इसका मतलब है कि उस लाइन का सिर्फ़ कुछ कोड ही एक्ज़ीक्यूट हुआ है. जैसे, ऊपर दिए गए स्क्रीनशॉट में तीसरी लाइन. उदाहरण के लिए, var b = (a > 0) ? a : 0 जैसे टर्नरी एक्सप्रेशन को लाल और हरे, दोनों रंगों में दिखाया गया है.

कवरेज टैब खोलने के लिए:

  1. कमांड मेन्यू खोलें.
  2. Coverage टाइप करना शुरू करें और कवरेज दिखाएं को चुनें.

पूरे पेज के स्क्रीनशॉट

पेज के सबसे ऊपर से लेकर सबसे नीचे तक का स्क्रीनशॉट लेने का तरीका जानने के लिए, यहां दिया गया वीडियो देखें.

अनुरोध ब्लॉक करना

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

अनुरोध यूआरएल ब्लॉक करें

async await से आगे बढ़ें

अब तक, नीचे दिए गए स्निपेट जैसे कोड को स्टेप-बाय-स्टेप समझने में बहुत मुश्किल होती थी. ऐसे में, आपको test() के बीच में एक लाइन पार करनी होगी. इसके बाद, setInterval() कोड से रुकावट आएगी. अब test() जैसे एसिंक कोड के ज़रिए आगे बढ़ने पर, DevTools पहली से आखिरी लाइन तक एक जैसा काम करता है.

  function wait(ms) {
    return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
  }

  // do some work in background.
  setInterval(() => 42, 200);

  async function test() {
    debugger;
    const hello = "world";
    const response = await fetch('index.html');
    const tmp = await wait(1000);
    console.log(tmp);
    return hello;
  }

  async function runTest() {
    let result = await test();
    console.log(result);
  }

अतिरिक्त जानकारी: क्या आपको डीबग करने के अपने हुनर को ज़्यादा बेहतर बनाना है? ये नए दस्तावेज़ देखें:

बदलाव

यूनिफ़ाइड कमांड मेन्यू

अब कमांड मेन्यू खोलने पर, ध्यान दें कि आपकी कमांड के आगे ग्रेटर-देन कैरेक्टर (>) जोड़ा गया है. ऐसा इसलिए है, क्योंकि कमांड मेन्यू को फ़ाइल खोलें मेन्यू के साथ जोड़ दिया गया है. इसे खोलने के लिए, Command+O (Mac) या Control+O (Windows, Linux) दबाएं.

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

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

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

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

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

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