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

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

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

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