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

Kayce Basques

कुकी के लिए नई सुविधाएं

यह डीबग करना कि कुकी को ब्लॉक क्यों किया गया

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

कुकी टैब.

कुकी टैब.

  • पीले रंग की अनुरोध कुकी, वायर पर नहीं भेजी गईं. ये डिफ़ॉल्ट रूप से छिपे होते हैं. उन्हें दिखाने के लिए, फ़िल्टर की गई रिक्वेस्ट कुकी दिखाएं पर क्लिक करें.
  • पीली रिस्पॉन्स कुकी, वायर के ज़रिए भेजी गई थीं, लेकिन उन्हें सेव नहीं किया गया.
  • किसी कुकी को ब्लॉक किए जाने की वजह जानने के लिए, ज़्यादा जानकारी जानकारी पर कर्सर घुमाएं.
  • अनुरोध कुकी और रिस्पॉन्स कुकी टेबल में मौजूद ज़्यादातर डेटा, संसाधन के एचटीटीपी हेडर से मिलता है. डोमेन, पाथ, और Expires/Max-Age का डेटा, Chrome DevTools प्रोटोकॉल से मिलता है.

Chromium से जुड़ी समस्याएं #856777, #993843

कुकी की वैल्यू देखना

किसी कुकी की वैल्यू देखने के लिए, कुकी पैनल में मौजूद लाइन पर क्लिक करें.

किसी कुकी की वैल्यू देखना.

किसी कुकी की वैल्यू देखना.

Chromium से जुड़ी समस्या #462370

prefers-color-scheme और prefers-reduced-motion की अलग-अलग सेटिंग को सिम्युलेट करना

prefers-color-scheme मीडिया क्वेरी की मदद से, अपनी साइट के स्टाइल को उपयोगकर्ता की प्राथमिकताओं के हिसाब से मैच किया जा सकता है. उदाहरण के लिए, अगर prefers-color-scheme: dark मीडिया क्वेरी 'सही' है, तो इसका मतलब है कि आपके उपयोगकर्ता ने अपने ऑपरेटिंग सिस्टम को 'डार्क मोड' पर सेट किया है और उसे डार्क मोड वाले यूज़र इंटरफ़ेस (यूआई) पसंद हैं.

कमांड मेन्यू खोलें और रेंडरिंग दिखाएं कमांड चलाएं. इसके बाद, prefers-color-scheme: dark और prefers-color-scheme: light स्टाइल को डीबग करने के लिए, सीएसएस मीडिया फ़ीचर के लिए prefers-color-scheme को एम्युलेट करें ड्रॉपडाउन सेट करें.

prefers-color-scheme: dark

जब prefers-color-scheme: dark सेट होता है (मध्य बॉक्स), तो स्टाइल पैनल (दायां बॉक्स) उस सीएसएस को दिखाता है जो मीडिया क्वेरी के सही होने पर लागू होती है. साथ ही, व्यूपोर्ट में डार्क मोड स्टाइल (बायां बॉक्स) दिखते हैं.

prefers-reduced-motion: reduce को सिम्युलेट करने के लिए, सीएसएस मीडिया फ़ीचर के लिए, कम मोशन का इस्तेमाल करें ड्रॉपडाउन के बगल में मौजूद, सीएसएस मीडिया फ़ीचर के लिए, कलर स्कीम का इस्तेमाल करें ड्रॉपडाउन का इस्तेमाल करें.

Chromium से जुड़ी समस्या #1004246

टाइम ज़ोन एम्युलेशन

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

कोड कवरेज से जुड़े अपडेट

कवरेज टैब की मदद से, इस्तेमाल न किए गए JavaScript और सीएसएस को ढूंढा जा सकता है.

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

कवरेज के टाइप के हिसाब से फ़िल्टर वाले नए टेक्स्ट बॉक्स की मदद से, कवरेज की जानकारी को उसके टाइप के हिसाब से फ़िल्टर किया जा सकता है: सिर्फ़ JavaScript कवरेज, सिर्फ़ सीएसएस या सभी तरह की कवरेज दिखाएं.

कवरेज टैब.

कवरेज टैब.

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

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

सोर्स पैनल में कवरेज डेटा. आठवीं लाइन, इस्तेमाल न किए गए कोड का उदाहरण है. लाइन 11, इस्तेमाल किए गए कोड का उदाहरण है.

Chromium से जुड़ी समस्याएं #1003671, #1004185

यह डीबग करना कि नेटवर्क संसाधन का अनुरोध क्यों किया गया

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

'शुरू करने वाला' टैब.

शुरू करने वाला टैब.

Chromium से जुड़ी समस्याएं 963183, 842488

कंसोल और सोर्स पैनल में, इंडेंटेशन की सेटिंग फिर से काम करती है

DevTools में लंबे समय से, इंडेंटेशन की सेटिंग को अपनी पसंद के मुताबिक बनाने की सुविधा है. इसकी मदद से, इंडेंटेशन को 2 स्पेस, 4 स्पेस, 8 स्पेस या टैब पर सेट किया जा सकता है. हाल ही में, यह सेटिंग काम की नहीं थी, क्योंकि Console और सोर्स पैनल इस सेटिंग को अनदेखा कर रहे थे. इस गड़बड़ी को अब ठीक कर दिया गया है.

अपनी प्राथमिकता सेट करने के लिए, सेटिंग > प्राथमिकताएं > सोर्स > डिफ़ॉल्ट इंडेंटेशन पर जाएं.

Chromium से जुड़ी समस्या #977394

कर्सर नेविगेशन के लिए नए शॉर्टकट

कर्सर को ऊपर वाली लाइन पर ले जाने के लिए, कंसोल या सोर्स पैनल में Control+P दबाएं. कर्सर को नीचे वाली लाइन पर ले जाने के लिए, Control+N दबाएं.

Chromium से जुड़ी समस्या #983874

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

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

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

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

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

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