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

तीसरे पक्ष की कुकी का फ़ेज़आउट

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

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

Chromium से जुड़ी समस्या: 1466310.

Privacy Sandbox विश्लेषण टूल की मदद से अपनी वेबसाइट की कुकी का विश्लेषण करें

DevTools के लिए, Privacy Sandbox विश्लेषण टूल के एक्सटेंशन पर अभी काम चल रहा है. इस पर अभी काम चल रहा है. रिलीज़ से पहले का 0.3.2 वर्शन रिलीज़ होने से पहले का है. इस टूल से आपको यह पता चलता है कि आपकी वेबसाइट, कुकी का इस्तेमाल कैसे करती है. साथ ही, निजता बनाए रखने वाले नए Chrome API के बारे में आपको दिशा-निर्देश भी मिलते हैं.

अपनी कुकी का विश्लेषण करने के लिए:

1. Chrome में एक्सटेंशन इंस्टॉल करें.
2. सबसे अच्छे विश्लेषण के लिए अपनी वेबसाइट को एक ही टैब में खोलें.
3. DevTools खोलें और प्राइवसी सैंडबॉक्स पैनल पर जाएं. यह पैनल, सबसे ऊपर मौजूद ड्रॉप-डाउन बटन के पीछे छिपा हो सकता है.
4. कुकी सेक्शन खोलें और इस टैब का विश्लेषण करें पर क्लिक करें. अगर टूल को कोई कुकी नहीं मिलती है, तो पेज को फिर से लोड करके देखें.

Privacy Sandbox विश्लेषण टूल (PSAT) का इस्तेमाल करने के तरीके के बारे में ज़्यादा जानकारी के लिए यहां देखें:

• पीएसएटी का 'कैसे करें' निर्देशों वाला कॉन्टेंट.
• यह अनुमान लगाने के लिए कि सेवा बंद होने के बाद क्या हो सकता है, आकलन एनवायरमेंट सेट अप करें.
• जिन पहलुओं पर असर होगा उनकी पहचान करने के लिए, सामान्य विश्लेषण कार्रवाइयां देखें.
• आंकड़े, ई-कॉमर्स, एसएसओ सेवाएं, एम्बेड किया गया कॉन्टेंट वगैरह जैसी सामान्य स्थितियों का विश्लेषण करने का तरीका जानने के लिए, विश्लेषण की स्थितियां में डेमो उदाहरण देखें.

इसके अलावा, समस्याओं की शिकायत करने से जुड़े दिशा-निर्देश देखें.

बेहतर लिस्टिंग को अनदेखा करने की सुविधा

node_modules के लिए डिफ़ॉल्ट एक्सक्लूज़न पैटर्न

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

Chromium से जुड़ी समस्या: 1496301.

ऐसे कोड जिन्हें अनदेखा नहीं किया गया है, उन पर अपवाद लागू होने की सुविधा अब रोक दी जाती है

जब छूटे हुए अपवादों पर रोकें की मदद से कोड को डीबग किया जाता है, तो Debugger अब सिंक किए गए और एसिंक्रोनस दोनों तरह के अपवादों के लिए एक्ज़ीक्यूशन रोक देता है:

• कॉल स्टैक में, ऐसे फ़्रेम के अपवाद हैं जिन्हें अनदेखा नहीं किया गया है.
• होल्ड किए गए ऐसे अपवाद जो कॉल स्टैक में ऐसे फ़्रेम से होकर गुज़रते हैं जिन्हें अनदेखा नहीं किया गया है. उदाहरण के लिए, स्क्रीनशॉट देखें.

इस व्यवहार की जांच करने के लिए, यह डेमो पेज खोलें:

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

एसिंक्रोनस कॉल में शामिल न किए गए और/या न मिले अपवादों (चेक किए जाने पर) को रोकने के लिए, Debugger, वादों में अस्वीकार करने वाले हैंडलर को ढूंढता है. इस वर्शन को लागू करते समय, डीबगर यह अनुमान नहीं लगाता कि Promise.finally() को अपवाद मानेगा. ठीक उसी तरह, जैसे try...finally ब्लॉक कोई अपवाद नहीं पकड़ता.

Chromium से जुड़ी समस्याएं: 1489312, 1291064.

सोर्स मैप में, x_google_ignoreList का नाम बदलकर ignoreList किया गया

सोर्स मैप स्पेसिफ़िकेशन में x_google_ignoreList के बजाय ignoreList फ़ील्ड का इस्तेमाल किया गया है. DevTools अब नए नाम के साथ पुराने नाम के लिए फ़ॉलबैक के साथ काम करता है. फ़्रेमवर्क और बंडलर, अब फ़ील्ड के नए नाम का इस्तेमाल कर सकते हैं.

सोर्स मैप की मदद से, आपकी वेबसाइट से मिलने वाले छोटे कोड को डीबग करने के बजाय, आपने जो कोड लिखा है उसे डीबग किया जा सकता है.

सोर्स मैप के बारे में ज़्यादा जानकारी के लिए, ये देखें:

• सोर्स मैप क्या होते हैं
• सोर्स मैप के साथ डिप्लॉय करने के बजाय, अपने ओरिजनल कोड को डीबग करना

रिमोट डीबगिंग के दौरान नया इनपुट मोड टॉगल

अब Chrome टैब को रिमोट तरीके से डीबग करते समय, टच और माउस इनपुट के बीच टॉगल किया जा सकता है. उदाहरण के लिए, जब --remote-debugging-port=<port> से Chrome इंस्टेंस चलाया जाता है और chrome://inspect/#devices के ज़रिए इस नेटवर्क टारगेट से कनेक्ट किया जाता है.

इनपुट मोड को टॉगल करते हुए काम करते हुए देखने के लिए वीडियो देखें.

Chromium से जुड़ी समस्या: 1410433.

एलिमेंट पैनल में अब #document नोड के लिए यूआरएल दिखते हैं

आप iframe को आसानी से डीबग कर सकें, इसके लिए एलिमेंट पैनल में अब #document नोड के बगल में documentURL दिखता है.

Chromium से जुड़ी समस्या: 1376976.

ऐप्लिकेशन पैनल में कॉन्टेंट की सुरक्षा के बारे में असरदार नीति

अब जांच किए गए फ़्रेम की कॉन्टेंट की सुरक्षा के बारे में नीति (सीएसपी) की जानकारी देखी जा सकती है. जानकारी देखने के लिए, ऐप्लिकेशन > फ़्रेम, कोई फ़्रेम चुनें और नीचे की ओर स्क्रोल करके, कॉन्टेंट की सुरक्षा के बारे में नीति (सीएसपी) सेक्शन पर जाएं.

Chromium से जुड़ी समस्या: 1424714.

बेहतर ऐनिमेशन डीबगिंग

ऐनिमेशन टैब में अब ये काम किए जा सकते हैं:

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

Chromium से जुड़ी समस्याएं: 1492460, 1489721.

'क्या आपको इस कोड पर भरोसा है?' सोर्स में डायलॉग और कंसोल में सेल्फ़-XSS चेतावनी

कोड पेस्ट करते समय Self-XSS के बारे में चेतावनी दिखाएं प्रयोग को डिफ़ॉल्ट रूप से चालू किया गया है. सेल्फ़-एक्सएसएस (सेल्फ़-क्रॉस-साइट स्क्रिप्टिंग) एक ऐसा हमला है, जिसकी मदद से आप DevTools में नुकसान पहुंचाने वाले कोड को चिपका सकते हैं. इसकी मदद से, हमलावर आपके वेब खातों और निजी जानकारी को कंट्रोल कर सकता है.

अगर आप एक नए DevTools उपयोगकर्ता हैं और आपने कोड चिपकाने की कोशिश की है, तो सोर्स पैनल में अब आपको क्या आपको इस कोड पर भरोसा है? डायलॉग दिखेगा और कंसोल में अब इससे मिलती-जुलती चेतावनी दिखेगी. सिर्फ़ वह कोड चिपकाएं जिसे आपने समझ लिया है और जिसकी आपने जांच की है. चिपकाने के लिए, निर्देश मिलने पर allow pasting टाइप करें. एक बार चिपकाने के बाद, चेतावनी फिर कभी नहीं दिखेगी.

Chromium से जुड़ी समस्या: 345205.

वेब वर्कर और वर्कलेट में इवेंट लिसनर ब्रेकपॉइंट

जब सोर्स में कोई इवेंट ब्रेकपॉइंट सेट किया जाता है, तो > इवेंट लिसनर ब्रेकपॉइंट पर, आपकी वेबसाइट पर इस इवेंट को रोकने के अलावा, डीबगर अब रुक जाता है. ऐसा तब होता है, जब इससे जुड़ा इवेंट वेब वर्कर या वर्कलेट में होता है. इसमें शेयर किए गए स्टोरेज के लिए वर्कलेट भी शामिल हैं.

Chromium से जुड़ी समस्या: 1445175.

<audio> और <video> के लिए नया मीडिया बैज

अब एलिमेंट पैनल में, <audio> और <video> एलिमेंट के लिए नया मीडिया बैज चालू किया जा सकता है. बैज पर क्लिक करने पर, यह आपको मीडिया पैनल पर ले जाता है, ताकि आप इन एलिमेंट को डीबग कर सकें.

इस सुविधा पर अभी काम चल रहा है. इसमें और सुधार किए जाएंगे. DevTools टीम इस सुधार के लिए, जुनसेओ (जेरेमी) यू का धन्यवाद करना चाहती है.

Chromium से जुड़ी समस्या: 1448214.

पहले से लोड करने की प्रोसेस का नाम बदलकर, अनुमान के हिसाब से लोड होने की सुविधा कर दिया गया है

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

Chromium से जुड़ी समस्या: 1478888.

लाइटहाउस 11.2.0

Lighthouse पैनल अब लाइटहाउस 11.2.0 पर चलता है. बदलावों की पूरी सूची देखें.

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

DevTools में Lighthouse पैनल का इस्तेमाल करने के बारे में बुनियादी जानकारी पाने के लिए, Lighthouse: वेबसाइट की स्पीड ऑप्टिमाइज़ करें लेख पढ़ें.

Chromium से जुड़ी समस्याएं: 772558.

सुलभता सुविधाओं में सुधार

इस वर्शन में सुलभता से जुड़े ये सुधार किए गए हैं:

• स्क्रीन रीडर अब सोर्स > में जाकर, चेकबॉक्स की स्थिति के बारे में बताएंगे ब्रेकपॉइंट.
• अब आपके पास कीबोर्ड से इस तरह की समस्याएं छिपाएं ड्रॉप-डाउन मेन्यू को ऐक्सेस करने का विकल्प है.

Chromium से जुड़ी समस्याएं: 1488645, 1484918.

अन्य खास बातें

इस रिलीज़ में किए गए कुछ अहम सुधार और सुधार यहां दिए गए हैं:

• परफ़ॉर्मेंस: रिकॉर्डिंग में कभी-कभी एलसीपी इंडिकेटर (1487136) को ठीक किया गया.
• अनुमान के हिसाब से लोड हुए यूआरएल: नेटवर्क पैनल के ड्रॉप-डाउन मेन्यू में, टारगेट के पूरे यूआरएल ठीक किए गए हैं (1471020).
• कवरेज:
  • प्रिटी-प्रिंटेड कोड (1464974) के लिए, लाइन-दर-लाइन कवरेज की समस्या ठीक की गई है.
  • कवरेज की जानकारी, अब पेज को फिर से लोड करने पर अपडेट होती है (1494457).
• कंसोल:
  • मैसेज में आंशिक टेक्स्ट चुनने की समस्या ठीक की गई (1487449).
  • ऑटोकंप्लीट ड्रॉप-डाउन की फ़्लिकर (1487453) गड़बड़ी ठीक की गई.
  • स्टैक पाथ में इस्तेमाल किए जा सकने वाले ब्रैकेट और स्टैक ट्रेस में यूआरएल (1473926).
• स्रोत: TypeScript using कीवर्ड (1490515) की सिंटैक्स हाइलाइटिंग का समर्थन किया गया.
• क्विक ओपन मेन्यू अब निजी तरीके (1492957) दिखाता है.
• ऐप्लिकेशन > बैकग्राउंड सेवाएं: सबसे ऊपर मौजूद ऐक्शन बार, साइज़ बदलते समय टेक्स्ट को रैप कर देता है (1487276).
• एलिमेंट > स्टाइल:
  • स्लॉट किए गए एलिमेंट के लिए, इनहेरिट किए गए सीएसएस वैरिएबल का रिज़ॉल्यूशन ठीक किया गया (1492162).
  • किसी सीएसएस प्रॉपर्टी को बंद करने पर, उससे जुड़ी टिप्पणियों को हटा दिया जाता है. ऐसा सिंटैक्स ब्रेक को ठीक करने के लिए किया जाता है (1101224).
• नेटवर्क: प्राथमिकता कॉलम अब शुरुआती प्राथमिकता की जानकारी के साथ एक टूलटिप दिखाता है (बड़े अनुरोध वाली लाइनों पर सही का निशान लगाने पर भी यह दिखता है) (1495735).
• बंद होना:
  • कलर फ़ॉर्मैट सेटिंग को पिछले वर्शन में बंद कर दिया गया था. अब इसे हटा दिया गया है.
  • ओवरराइड करने की प्रोसेस को व्यवस्थित करने (1473681) के बाद, कम इस्तेमाल होने की वजह से, सोर्स में सभी ओवरराइड मिटाने का विकल्प अब हटा दिया गया है.

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

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

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

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

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

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

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