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

Sofia Emelianova
Sofia Emelianova
GitHub

तीसरे पक्ष की कुकी के इस्तेमाल को बंद करना

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

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

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

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

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

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

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

  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 नोड के लिए यूआरएल दिखते हैं

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

जब कोई सर्विस वर्कर, सेट टाइमआउट फ़ंक्शन को कॉल करता है, तब डीबगर रुक जाता है.

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

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

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

ऑडियो और वीडियो टैग के लिए, नया मीडिया बैज चालू किया गया.

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

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

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

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

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

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

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

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