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

Kayce Basques

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

हाइलाइट

नई सुविधाएं

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

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

कवरेज टैब

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

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

कोड की हर लाइन अलग-अलग रंग से कोड की होती है:

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

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

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

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

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

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

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

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