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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

कुकी टैब.

कुकी टैब.

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

Chromium की समस्याएं #856777, #993843

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

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

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

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

Chromium की समस्या #462370

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

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

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

prefers-color-scheme: dark

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

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

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

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

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

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

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

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

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

कवरेज टैब.

कवरेज टैब.

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

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

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

Chromium की समस्याएं #1003671, #1004185

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

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

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

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

Chromium की समस्याएं 963183, 842488

Console और Sources पैनल में, इंडेंटेशन की सेटिंग फिर से लागू की गई हैं

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

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

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

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

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

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

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

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

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

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

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

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