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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

चेकबॉक्स. तीसरे पक्ष की कुकी से जुड़ी समस्याएं शामिल करें चेकबॉक्स, 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. पेज पर, "पकड़े गए" स्थितियों की सूची में, अलग-अलग बटन पर क्लिक करें और बताए गए मामलों में, प्रोसेस के रुकने की जानकारी देखें.

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

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

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

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

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

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

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

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

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

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

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

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

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