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

Kayce Basques

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

हाइलाइट

नई सुविधाएं

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

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

कवरेज टैब

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

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

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

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

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

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

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

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

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

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

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

एक साथ काम न करने वाले टास्क के लिए, 'आउटपुट देखें' सुविधा का इस्तेमाल करना

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

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

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

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

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