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

Kayce Basques

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

हाइलाइट

नई सुविधाएं

सीएसएस और 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 मेन्यू खोलने पर, ध्यान दें कि इससे ज़्यादा वर्ण (>) से पहले जोड़ा जाता है. ऐसा इसलिए है क्योंकि Command मेन्यू को फ़ाइल खोलें मेन्यू के साथ जोड़ दिया गया है, जो Command+O (Mac) या Control+O (Windows, Linux).

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

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

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

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

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

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