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

Sofia Emelianova
Sofia Emelianova

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

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

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

समस्याओं वाले टैब में, तीसरे पक्ष की कुकी के इस्तेमाल पर रोक लगाने के बारे में चेतावनी.

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

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

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

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

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

Privacy Sandbox विश्लेषण टूल.

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

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

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

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 दिखता है.

पहले और बाद के स्टेटस में, #document नोड के बगल में documentURL दिखता है.

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

ऐप्लिकेशन पैनल में, कॉन्टेंट की सुरक्षा के लिए लागू नीति

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

कॉन्टेंट की सुरक्षा के लिए नीति का सेक्शन, जो ऐप्लिकेशन टैब में मौजूद होता है.

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

ऐनिमेशन को डीबग करने की बेहतर सुविधा

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

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

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

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

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

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

सोर्स में कोड चिपकाते समय, &#39;क्या आपको इस कोड पर भरोसा है?&#39; डायलॉग.

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

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

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