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

Kayce Basques

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

कुकी को ब्लॉक किए जाने की वजह डीबग करें

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

कुकी टैब.

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

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

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

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

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

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

अपनी पसंद के हिसाब से अलग-अलग रंग-रूप की सुविधाएं आज़माएं

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

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

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

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

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

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

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

कोड कवरेज के बारे में अपडेट

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

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

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

कवरेज टैब.

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

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

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

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

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

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

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

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

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

सेटिंग पर जाएं > प्राथमिकताएं > सोर्स > डिफ़ॉल्ट इंडेंट: प्राथमिकता चुनें.

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

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

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

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

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

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

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

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

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

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

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