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

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

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

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

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

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

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

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

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

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

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

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

अपने-आप बने कोड को नज़रअंदाज़ करने की बेहतर सुविधा

node_modules के लिए, बाहर रखे जाने वाले डेटा का डिफ़ॉल्ट पैटर्न

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

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

अब अपवाद मिलने या अनदेखा नहीं किए गए कोड से गुज़रने पर, प्रोग्राम का चलना रुक जाता है

मौजूद अपवादों पर रोकें को चुनकर कोड को डीबग करने पर, डीबगर अब सिंक्रोनस और एसिंक्रोनस, दोनों तरह के मौजूद अपवादों पर कोड को चलाने से रोक देता है:

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

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

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

असाइनमेंट के पूरा होने के बाद होने वाले कॉल में, पकड़े गए और/या पकड़े नहीं गए अपवादों (जांच करने पर) पर प्रोसेस को रोकने के लिए, डीबगर सभी प्रॉमिस में अस्वीकार करने वाले हैंडलर खोजता है. इस वर्शन से, डीबगर यह अनुमान नहीं लगाता कि 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.

सोर्स में 'क्या आपको इस कोड पर भरोसा है?' डायलॉग और कंसोल में, अपने-आप होने वाले एक्सएसएस (एक्सट्रेसिव सर्वर साइड स्क्रिप्ट) की चेतावनी

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

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

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

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

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

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

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

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

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

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

'पहले से लोड करना' सुविधा का नाम बदलकर 'अनुमान के हिसाब से यूआरएल लोड होना' कर दिया गया

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

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

Lighthouse 11.2.0

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

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

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

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

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

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